$.Ajax send with progress bar using jquery
Hi folks
I use $.ajax functionality to send data to server and with this method I removed most of postback pages it works but I need some progress bar to show visitors there are some progress now it shows nothing after some second it shows result but i think a message or small picture is need in my web site. How I can implement it with simple jquery code ? something popup and shows the page is in the progress.And also I need to add some other jquery to prevent 开发者_运维技巧other click during the progress is it possible ?
You can do something like
$("elemnt").click(function(){
$("loader-img").show();
$.ajax({
url : "your url",
complete: function(){
$("loader-img").hide();
}
});
});
The loader image can be an page blocking div, to block the user from doing anything with a image at the center of the viewport.
Here the complete event is used since this event is called in case of a successful/failed ajax request.
EDITED You can do something like
<style type="text/css">
.blocker{
z-index: 99999;
opacity: .5;
height: 100px;
position: fixed;
background: none repeat scroll 0 0 lightgrey;
width: 100%;
}
.blocker .img{
position: fixed;
color: red;
}
</style>
<body>
<div class="blocker" style="display: none">
<div class="img">img</div>
</div>
.............
.............
.............
Then In Script
function showBlocker(){
$(".blocker .img").css({
top: $(window).height() / 2,
left: $(window).width() / 2
});
$(".blocker").show().css({
height: $(document).height()
});
}
Then call the showBlocker() method to show the blocker.
You can tweak the answer to fit into your need. This is just a sample how it can be achieved
You can show a loading image before the AJAX call starts and then hide it in the callback function.
Something like
// handler for ajax trigger
$("#yourelement").click(function(){
// your loading image object
$("#yourimage").show();
$.ajax({
url: 'ajax/test.html',
success: function(data) {
$("#yourimage").hide();
}
});
});
加载中,请稍侯......
精彩评论