Question

I’ve found a possible bug while i was using jquery and Ajax function on my new website, or more probably some big bug on my code that is driving me crazy.

Here’s the website url for further documentation,
http://phpschool.altervista.org/is/

The problem occurs when i call the function loadXML to load some contents using ajax this way:

      $("#menubar .button").live("click",function () {

           $("#aj_load").fadeOut("slow", function()
           {                
              loadXML('archive/'+$(this).attr("id")+'.html');
           });

      });

// #menubar .button is the identifier for the menu buttons.
// #aj_load is the div that contains ajax contents when requested. 

So the meaning of this code, should be

Fade out the contenitor aj_load,
Load Contents using ajax,
Show out the contenitor with contents,

But, When i do so, ajax request report error 404 or 12000, and the script stops running.

If you try on the website to click the about button for example, you should see it’s working correctly, because i’ve modified the code in order to remove the fadeOut function from the contenitor:

        $("#menubar .button").live("click",function () {

            loadXML('archive/'+$(this).attr("id")+'.html');
        });

Why a fade function should interfere anyway with ajax requests?
I can’t explain this.

loadXML contains .load() function from jquery, you can see it on the website.

Thanks very much,

EDIT:

function loadXML(xmlURL)
{
resetStyles();

$("#aj_load").load(xmlURL+" #content0"+cur_seq, function(response, status, xhr) {
    if (status == "error") 
    {
        var msg = "Pagina Non Trovata: ";
        $("#aj_load").html('<br/><br/><br/><h3 style="text-align:center">'+msg + xhr.status + " " + xhr.statusText+'</h3>');
    }
    else
    {
        num_seq = $("#aj_content").text();
        if(num_seq !="0")
        {
            $("#less").off("click").on("click", function()
            { 
                $("#aj_load").fadeOut("slow",function()
                {
                    slideUP(num_seq);
                    loadNEXT(xmlURL,"prev");
                });
            });
            $("#more").off("click").on("click", function()
            {
                $("#aj_load").fadeOut("slow",function() 
                {
                    slideDW(num_seq);
                    loadNEXT(xmlURL,"next");
                });

            }).fadeIn("slow");
        }

    }
}).delay(300).fadeIn("slow",function(){inAnimation();});
}

Answer 1

It’s because when you use $(this) to get the button ID you’re actually getting the ID of the element you’re fading. Try this instead…

$("#menubar .button").live("click",function () {
    var buttonID = $(this).attr("id");
    $("#aj_load").fadeOut("slow", function()
    {                
        loadXML('archive/' + buttonID + '.html');
    });
});

Edit: Just modified your script on-the-fly and the above works fine. It looks nice as well. Think I might pinch that idea for when I rebuild my site 😉