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(....
精彩评论