开发者

load data only when slide down with jquery

开发者 https://www.devze.com 2023-02-11 07:42 出处:网络
I have a link that when user clicks on it some data loaded into a div. I want to display waiting message to user until the data fetch completely from server and then show it to user.

I have a link that when user clicks on it some data loaded into a div. I want to display waiting message to user until the data fetch completely from server and then show it to user.

I also want to call the data url happen only when the result box is going down(slide down) not in both of slide down and slide up events to reduce load on server.

my code is here but i don't know how implement second part into it:

$(document).ready(function() {
        $("#prereq").hide();
        $("#prereqlink").click(function() {
             $("#prereq").html("please wait ...");
             $("#prereq").slideToggle("slow");

             $.开发者_运维知识库ajax({ url:"referee.php",
                      success:function(data) {
                              $("#prereq").html(data);
                    }
             });

        });
 });

would you help me??


try something like this but please note that I am not so sure

var mode = 'down';

$(document).ready(function() {
    $("#prereq").hide();
    $("#prereqlink").click(function() {
         $("#prereq").html("please wait ...");
         $("#prereq").slideToggle("slow");
    if(mode == 'down'){
         $.ajax({ url:"referee.php",
                  success:function(data) {
                        mode = 'up';
                          $("#prereq").html(data);
                }
         });
    }
    else{
        mode = 'down';
    }

    });
});


I found a way.by using $("#prereq").is(":visible") we can check it.


    $(document).ready(function() {
    $("#prereq").hide();
    /* OR to add class to initialize as required 
     $("#prereq").addClass(("downMode").hide(); 
    */
    $("#prereqlink").click(function() {
         $("#prereq").slideToggle("slow", function(){
             $.ajax({ url:"referee.php",
                  beforeSend: function() {
                   if ($("#prereq").hasClass("downMode")){
                     $("#prereq").html("please wait ...").show();   
                     return true;
                   }
                   /* cancel ajax request */
                   return false ;   
                  },
                  success:function(data) {
                   $("#prereq").html(data);
                  }
             });
        }).toggleClass("downMode");
    });
 });

Edit:
I think we can remove beforeSend and check for class before the $.ajax(...) in slideToggle callback as if ($(this).is('.downMode')){ $.ajax(....

0

精彩评论

暂无评论...
验证码 换一张
取 消