Return String Outside Ajax Request

Question

I am pretty new to this, so go easy on me:

I am building an image gallery with a main index page which allows users to select different categories of projects, a sub-index page which allows users to select specific projects within their selected category, and then the gallery page for that project.

The code below is for the main index page. I am trying to pass the value of the src attribute of the first image of the first gallery page to the main index page to use as a thumbnail.

I have effectively been able to load the correct URL into the imageLoc variable, but I need to pass it outside of the Ajax request to pass it into my HTML document.

Simply put, I am trying to pass the value of the imageURL variable to the imageLoc variable.

Thanks for your help.

    $('.galleryIndex a img').hide().each(function(){
        var destination = $(this).parent('a').attr('href');

        var imageLoc = $.ajax({
            url: destination,
            success: function(data){
                var pageLoc = $(data).find('.galleryList a:first').attr('href');
                $.ajax({
                    url: pageLoc,
                    success: function(data){
                        var imageURL = $(data).find('.galleryBox img:first').attr('src');
                        return imageURL
                    }
                });
            }
        });

        alert(imageLoc);

    });

Answer 1

This will cause troubles do to the way the callback function is handled. It's a closure block that is called after the request has returned, so it runs apart from your main code in the function. If you want to alert the imageURL variable, alert it inside the callback function, or call another function to handle it. Since it is a callback function for an asynchronous server request, the part that alerts "imageLoc" will have run long before you ever get your async request back.

Edit: The only way to achieve what you're trying to do is to not make the ajax request asynchronously. If you set async:false, then you can call on the "responseText" property like this:

var html = $.ajax({
    url: "some.php",
    async: false
}).responseText;

But be warned...this will halt browser operation while the request is pending. It's usually best to block user interaction by other means if you don't want them to screw with the page while something is loading.

Answer 2

I was able to get what I wanted as follows:

    $('.galleryIndex a img[id!="fp"]').hide().each(function(){
        var destination = $(this).parent('a').attr('href');
        $.ajax({
            url: destination,
            context: $(this),
            success: function(data){
                var pageLoc = $(data).find('.galleryList a:first').attr('href');
                $.ajax({
                    url: pageLoc,
                    context: $(this),
                    success: function(data){
                        var imageURL = $(data).find('.galleryBox img:first').attr('src'); //returns the src for the thumbnails
                        $(this).attr('src', imageURL);
                        $(this).load(function(){
                            $(this).show();
                        });
                    }
                });
            }
        });
    });