Ajax filecheck not changing variables upon success

Question

I'm using ajax to check to see if there is a file available in my image directory. If it is there, I append it to my html code, and change a boolean value to true, letting the user know it was found. If it does not find the file name, I check if it is a 2 part image (concating the numbers 1 and 2 at the end of the image name and producing 2 images). The boolean value is also changed to true saying that there were images found. Although if there is no single or two-part image, the code should just error out of the ajax, leaving the boolean as false, telling the user there are no images.

My logic is working great on everything except for notifying the user when there isn't an image. In the ajax success function, the images always append (whether success or error), but the boolean value never changes after success. Here is the code I'm running.

boolean = false  //declared globally
function tableSelect(location){
    $("#popupPhoto").text("");

var part = $("#table"+location).text().split(" ");

//part[0] always empty
for(var i=1;i<part.length;i++){                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     
    //change default value to false
    boolean = false;
    /* original code
    imageExists(part[i]);

    //when no file... is found, boolean stays false, causing this if statement to function
    if(boolean == false){
        alert("No Information for "+imagename+" of "+part[i]); 
            //displayes image that says "No Information Available"
            $("#popupPhoto").append($("<img>", {src: 'images/imagedir/nia.png', "class": 'popphoto', alt: 'NIA' }));
    }
*/
    //new code
    imageExists(part[i]).fail(function () {
    alert("No Information for "+imagename+" of "+part[i]); 
            $("#popupPhoto").append($("<img>", {src: 'images/imagedir/nia.png', "class": 'popphoto', alt: 'NIA' }));
    })

}//Displays images in popup
$("#popupPhoto").addClass("ui-popup-active");}

Here is the function that checks for the image

function imageExists(part){
var url = "images/imagedir/"+part+".png";
$.ajax({
        url:url,
        type:'HEAD',
        error: function()
        {
            $("#popupPhoto").append($("<img>", {src: 'images/imagedir/'+part+'1.png', "class": 'popphoto', alt: part.concat("1") }));
            $("#popupPhoto").append($("<img>", {src: 'images/imagedir/'+part+'2.png', "class": 'popphoto', alt: part.concat("2") }));
            //boolean = true;
            //boolean changes here
        },success: function()
        {//boolean will not change here
            //boolean = true;
            $("#popupPhoto").append($("<img>", {src: 'images/imagedir/'+part+'.png', "class": 'popphoto', alt: part }));
        }
});

}

I understand this is probably me not understanding the details of this function and how it works, but if anyone could help get around this issue or suggest a better way to do it, that is essentially what I am looking for. Thanks in advance.

score 0 · Answer 1 · edited May 23 '17 at 12:27

0

Why is AJAX called asynchronous?

Your code following the call to imageExists runs immediately after the ajax call fires. It will not wait for the ajax call to return.

You have two options for fixing this problem; Use the success/erorr callbacks or consume the promise. In either case, no global booleans are necessary and that variable should be deleted.

Callback:

function imageExists(part){
...
    $.ajax({
        ...
        error: function () {
            // move the boolean == false code in to the error handler
        },
        success: function() {
            // move the boolean == true code in to the success handler
        }
    });
}

Promise:

imageExists(part[i]).then(function () {
    // move the boolean == true code in to the then handler
}).fail(function () {
   // move the boolean == false code in to the failhandler
}

edited May 23 '17 at 12:27

Community

1
1

answered Jan 07 '13 at 16:46

jbabey

45,965
12
71
94

That works, only problem is, after it hits the imageExists(part[i]) method and goes through that, it exits the for loop for some reason. – Hartley Jan 07 '13 at 18:48
@hartley054 assuming you remove the code that relies on the boolean that you should no longer need, there is nothing else in loop. – jbabey Jan 07 '13 at 18:51
Just did an edit to show you what I changed. It should still loop though each element in the array "part", should it not? – Hartley Jan 07 '13 at 18:58

Ajax filecheck not changing variables upon success

1 Answers1