JQuery Load, prevent duplicate twice?

I am using jquery loading to load php pages into my content area.

I noticed some kind of creepy behavior if the user repeatedly clicks on the navigation menu items offensively.

Currently, my code is as simple as hiding the content area, loading a new page, and then fading in:

 $("#homeLink").click(function(){
    $("#contentPane").hide();
    $("#contentPane").load("welcome.php");
    $("#contentPane").fadeIn();
 });

Problem behavior: a new link is clicked, the panel disappears from the previous page (then it is updated on a new page)

I tried to use $.ajax({async:false});, but it all survived. At the moment, I am considering the possibility of rewriting my navigation system so that it turns on depending on the parameters of the URL, if there can be no idea how I can stop it from the queue of the next load call until the first one is completed ?

+5
source share
3 answers

You can use the "complete" callback. It is executed when the request completes.

$("#homeLink").click(function() {
    var pane = $("#contentPane");

    pane.hide();
    pane.load("welcome.php", function() {
        pane.fadeIn();
    });
});
+8
source

You can bind your methods:

 $("#homeLink").click(function(){
    $("#contentPane").hide().load('welcome.php', function() {
        $(this).fadeIn();
    });
 });
+1
source

: / , , , . , . , , , , , , , , . , , , :

<div id="divTestArea3"></div>
<script type="text/javascript">
$(function()
{
        $("#divTestArea3").load("no-content.html", function(responseText, statusText, xhr)
        {
                if(statusText == "success")
                        alert("Successfully loaded the content!");
                if(statusText == "error")
                        alert("An error occurred: " + xhr.status + " - " + xhr.statusText);
        });
});
</script>

, 3 , jQuery . , . - , , . "" "". , , . - XMLHttpRequest, AJAX. , , , , . .

+1

All Articles