I know there are thousands of examples on the internet, but I want for the script I already have to display a loading gif image while the data is retrievedd. My java knowledge are poor, therefore I'm asking how to change the following:
<script type="text/javascript">
$(document).ready(function(){
function getData(p){
var page=p;
$.ajax({
url: "loadData.php?id=<? echo $id; ?>",
type: "POST",
cache: false,
data: "&page="+ page,
success : function(html){
$(".content").html(html);
}
});
}
getData(1);
$(".page").live("click", function(){
var id = $(this).attr("class");
getData(id.substr(8));
});
});
</script>
And my div is here:
<div class="content" id="data"></div>
Thanks. John
This is very simple and easily manage.
jQuery(document).ready(function(){
jQuery("#search").click(function(){
jQuery("#loader").show("slow");
jQuery("#response_result").hide("slow");
jQuery.post(siteurl+"/ajax.php?q="passyourdata, function(response){
setTimeout("finishAjax('response_result', '"+escape(response)+"')", 850);
});
});
})
function finishAjax(id,response){
jQuery("#loader").hide("slow");
jQuery('#response_result').html(unescape(response));
jQuery("#"+id).show("slow");
return true;
}
make sure to change in ajax call
async: true,
type: "GET",
dataType: "html",
<div id="load" style="display:none"><img src="ajax-loader.gif"/></div>
function getData(p){
var page=p;
document.getElementById("load").style.display = "block"; // show the loading message.
$.ajax({
url: "loadData.php?id=<? echo $id; ?>",
type: "POST",
cache: false,
data: "&page="+ page,
success : function(html){
$(".content").html(html);
document.getElementById("load").style.display = "none";
}
});
//$(document).ready(function(){_x000D_
// $("a").click(function(event){_x000D_
// event.preventDefault();_x000D_
// $("div").html("This is prevent link...");_x000D_
// });_x000D_
//}); _x000D_
_x000D_
$(document).ready(function(){_x000D_
$("a").click(function(event){_x000D_
event.preventDefault();_x000D_
$.ajax({_x000D_
beforeSend: function(){_x000D_
$('#text').html("<img src='ajax-loader.gif' /> Loading...");_x000D_
},_x000D_
success : function(){_x000D_
setInterval(function(){ $('#text').load("cd_catalog.txt"); },1000);_x000D_
}_x000D_
});_x000D_
});_x000D_
});
_x000D_
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>_x000D_
_x000D_
<a href="http://www.wantyourhelp.com">[click to redirect][1]</a>_x000D_
<div id="text"></div>
_x000D_
$.ajax(
{
type: 'post',
url: 'mail.php',
data: form.serialize(),
beforeSend: function()
{
$('.content').html('loading...');
},
success: function(data)
{
$('.content').html(data);
},
error: function()
{
$('.content').html('error');
}
});
have fun playing arround!
if you should have quick loading times which prevent te loading showing, you can add a timeout of some sort.
Source: Stackoverflow.com