Run JQuery when data is loaded in Firebase

Question

i have a problem that i need first to get the image links from the Firebase data base then i call a JQuery code that will organize the images in a beautiful way >> But it seems that the Jquery runs before i get the images, Help Please ..!

JS Function

new Firebase("https://zoominp.firebaseio.com/photos/"+imageID)
    .once('value', function(snap)
    {
        link = snap.child('imageLink').val();
        link = 'images/'+link;
        var id = "img";
        div.innerHTML += "<a href=http://unitegallery.net><img data-description=aaaaa alt=HHHH data-image="+link+" src="+link+"></a>";
    });

JQuery

jQuery("#gallery").unitegallery(
{
    tiles_type:"nested",
    tiles_nested_optimal_tile_width:200
});

Answer 1

Firebase loads (and synchronizes) the data asynchronously. So the jQuery code you have, will indeed execute before the data has come back from the server.

To fix this, move the jQuery code into the Firebase callback:

var ref = new Firebase("https://zoominp.firebaseio.com/photos/"+imageID);
ref.on('value', function(snap) {
    link=snap.child('imageLink').val();
    link='images/'+link;
    var id="img";
    div.innerHTML = div.innerHTML +"<a href=http://unitegallery.net><img data-description=aaaaa alt=HHHH data-image="+link+" src="+link+"></a>";
    jQuery("#gallery").unitegallery({
        tiles_type:"nested",
        tiles_nested_optimal_tile_width:200
    });
 });

I also changed once() to on(). With that tiny change, your HTML will be updated whenever the data in the database changes. Try changing the data and you'll experience the "magic" of Firebase.

Since asynchronous loading is hard to wrap your head around when you first encounter it, I highly recommend that you read the more in-depth answers to these questions:

• How do I return the response from an asynchronous call?
• Why is my variable unaltered after I modify it inside of a function? - Asynchronous code reference
• Handling Asynchronous Calls (Firebase) in functions
• Returning value from a jQuery function

Answer 2

i have never worked with a Firebase, but you will need to have your actual resources ready before running the jQuery - you cannot do this in a synchronous way, as when you call your jquery unitedGallery it is called before the .once('value') event triggers.

do you call that new Firebase(.... thing more times in a loop or something? you could do something like keeping information about whether have all the images loaded in an array. something like this: let's assume, your images are stored in an array allOfYourImages. then,

define a global variable like this

var images_loaded=[];
  for(var i=0; i<allOfYourImages.length; i++){ images_loaded[i]=false; }

then i assume you somehow iterate over your pictures since you are using imageID. add an incrementing variable var image_number=0; before the iterator and do image_number++ after each image iteration. like

var image_number=0;
...iteratorofyourchoiseihavenoideawhatareyouusing...{
    new Firebase("https://zoominp.firebaseio.com/photos/"+imageID).once('value', function(snap){
      ...DOM stuff previously did ...

      images_loaded[image_number]=true;
      checkAllImagesLoaded();
    });
    image_number++;
}

notice the checkAllImagesLoaded() function. this will look whether have all your images already loaded and fire the jQuery gallery thing, like this

checkAllImagesLoaded(){
  var all_loaded=true;
  for(var i=0; i<allOfYourImages.length; i++){ 
    all_loaded &= images_loaded[i]; //in case any of the items is false, it will set the all_loaded to false
  }

  if(all_loaded){
    ..your jQuery.("#gallery").unitegallery stuff..
  }
}