function executes too soon

I'm stuck with the following problem:

I want a function to create DIV tags to hold images and a second function to create the IMG tag and insert them in the DIVs created before. Works well with "alert messages". However without alerts, the second function ru开发者_JAVA技巧ns before the first finished loading the DIV tags.

I think I need some kind of callback function worked in, but I have no clue how to do this.

Here is the code:

function imageLoader ()
     {         
     for (i=1;i<=5;i++)
             {
             checkPath = 'images/pic'i+'.png';
             $.ajax({
                     url: checkPath,
                     type:'HEAD',
                     success:
                             function() {
                                     //create DIVs t hold images
                                     $('.tools').append("<div class='tooling'></div>");
                                     }
                     });
             }
     // after creating DIVs, call function to create <img> tags
     appendix();  
     }

Thanks for helping out.

Regards,

frequent

---

Since, as Kos pointed out, you can't rely on the calls to complete in order, you'll have to get a little tricky to ensure that all your ajax calls have been completed. Try something like this:

function imageLoader() {
    var ajaxCounter = 0;
    for (i = 1; i <= 5; i++) {
        checkPath = 'images/pic'
        i + '.png';
        $.ajax({
            url: checkPath,
            type: 'HEAD',
            success: function() {
                //create DIVs t hold images
                $('.tools').append("<div class='tooling'></div>");
                ajaxCounter++;
                if (ajaxCounter == 5) {
                    // after creating DIVs, call function to create <img> tags
                    appendix();
                }
            }
        });
    }
}

That should check to make sure you have the required number of ajax successes before executing the appendix() call.

---

I can't tell exactly what you're asking, but it looks like maybe you need to move your appendix() call into the success callback. Remember that the success callback may not be executed before the appendix call in the code you presented.

function() {
  //create DIVs t hold images
  $('.tools').append("<div class='tooling'></div>");
  appendix();
}

Of course, you might not want this called 5 times inside your for loop. Here's one way to make it call after the last success occurs, perhaps not the cleanest:

for (i=1;i<=5;i++)
{
  if(i == 5) {
    var succ = function() {
        //create DIVs t hold images
        $('.tools').append("<div class='tooling'></div>");
        appendix();
      };
  } else {
    var succ = function() {
        //create DIVs t hold images
        $('.tools').append("<div class='tooling'></div>");
      };
  }
  checkPath = 'images/pic'i+'.png';
  $.ajax({
    url: checkPath,
    type:'HEAD',
    success: succ
    });
}

---

a) Create a variable to count how many times the success function callback has executed and run appendix only when this count equals the number of your ajax calls,

b) Register the $.ajaxComplete callback.

---

The elegant way to do this is to use $.when:

function imageLoader(
    $.when.apply($, $.map(new Array(5), function (e, i) {
        var checkPath = 'images/pic' + (i + 1) +'.png',
            d = $.Deferred();

        $.ajax({
            url: checkPath,
            type:'HEAD',
            success: function () {
                d.resolve($('<div class="tooling">')
                              .append($('<img>').attr(src, checkPath)));
            },
            error: function () { d.resolve(null); }
        });

        return d.promise();
    })
    .then(function () {
        $('.tools').append(Array.prototype.slice(arguments));
    });
}

---

You could set async to false in $.ajax so it blocks execution. Or, you could check i in the success callback, and if its 5, call appendix().

---

function imageLoader ()
 {         
 for (i=1;i<=5;i++)
         {
         checkPath = 'images/pic'i+'.png';
         $.ajax({
                 url: checkPath,
                 type:'HEAD',
                 success:
                         function() {
                                 //create DIVs t hold images
                                 $('.tools').append("<div class='tooling'></div>", 
                                     function(){
                                         appendix();  
                                     });
                                 }
                 });
         }     
 }