Question

I am trying to create a jQuery Gallery that lets the user flip (with previous, next buttons) through ‘icons’ which contain photos, movies, PDF documents.

My strategy is as follows:

• keep jQuery ignorant of the actual contents of the icon,
• the actual content comes from an Ajax callback, which returns an HTML string,
• if my php-code so decides, a previous and/or next button maybe present in that HTML string,
• if those buttons are present, bind a click event to them,
• the click event makes a recursive call to mainLoop() which shows the new icon.

Here is the code:

function mainLoop() {
if (icons[newIndex] !== IFM_APPENDED ) { // tests whether this icon has already been loaded
    $.ajax({
        type: 'POST',
        url: '/callback/div_supply',
        data: {iconindex: newIndex},
        success: function(data) {
            $('#jquery-lightbox').append(data); // inserts new icon into the DOM
            icons[newIndex] = IFM_APPENDED; // registers that this icon has been loaded
            if ($('#icon'+newIndex+' .prev-button').length !== 0) { // test if the previous button is present
                $('#icon'+newIndex+' .prev-button').click(function () {
                oldIndex = newIndex;
                newIndex -= 1;
                mainLoop();
                }); // END $('#icon'+newIndex+' .prev-button').click()
            } // END if ($('#icon'+newIndex+' .prev-button').length !== 0) 
            if ($('#icon'+newIndex+' .next-button').length !== 0) { // test if the previous button is present
                $('#icon'+newIndex+' .next-button').click(function () {
                oldIndex = newIndex;
                newIndex += 1;
                mainLoop();
                }); // END $('#icon'+newIndex+' .prev-button').click()
            } // END if ($('#icon'+newIndex+' .prev-button').length !== 0) 
        } // END succes:
    }); // END $.ajax
} //  END if (icons[newIndex] !== IFM_APPENDED )
$('#icon'+oldIndex).hide(); // hide the old icon
$('#icon'+newIndex).show(); // hide the new icon
}

$(document).ready(function() {
// Hide some elements to avoid conflict with overlay in IE. These elements appear above the overlay.
$('embed, object, select').css({ 'visibility' : 'hidden' });
$("#gallery li").click(function() {
    _set_interface();
    mainLoop();
}); // END  $("#gallery a").click(function
}); // END $(document).ready(function()

This code works fine when I step through mainLoop() in the Firebug debugger.

However, when I run it, the script just hangs. It also ends up hanging when I step though the $(document).ready(function(). There a no console.log() calls which could throw Firebug off.

I suspect there is something wrong with the way I have set up recursion.

What is going wrong?

Answer 1

OK, I have (sort of) discovered what is going on.

The problem was caused by explicitly stating display:none in the callback-HTML. When I do that, the .hide() method fails to turn it to display: block.

The plot thickens when you consider that this DOES work when stepping with Firebug. But it fails when running the code straight in Firefox.

I am still not sure what actually hit me…

EDIT

This problem went away after I contacted the Dreamhost support. So, I assume that there was nothing wrong on my side, but some setting on the server was out of whack. However, I never learned what the actual problem was.