I am using, Ajax load function in jquery to load another page in DOM.
By using this
$('.upload').on('click',function(){
$('.content').load('loo.php');
});
When i use this the page in division content loads after a 3-4 second Interval.
I wanted to show progress bar using that interval so i used this way
$('.upload').on('click',function(){
$.ajax({
url: 'loo.php',
beforeSend:function(){
res.container.append(res.loader); //Showing loader
},
success:function(){
$('.content').load('loo.php');
res.container.find(res.loader).remove(); //Hiding Loader
}
});
});
So Now what happen is, loader comes and shows for few time and then page in division loads, But the problem is i again see delay in page loading after the loader hides. I created the loader to overcome the time but, still it takes time after the loader goes.
In firebug, by analysing request the page starts loading after the loader , which i don't want.
Any idea, how to overcome this problem.
you are removing the "loader" before the AJAX request is finished. you should remove the loader in a callback function, after the load() is finished. Also no need for double AJAX request.
$('.upload').on('click',function(){
res.container.append(res.loader); //Showing loader
$('.content').load('loo.php', function(){
res.container.find(res.loader).remove(); //Hiding Loader
});
});
load() and ajax() both perform ajax calls, this is probably not what you meant to do. Try this instead:
$('.upload').on('click',function() {
$.ajax({
url: 'loo.php',
beforeSend: function() {
res.container.append(res.loader); //Showing loader
},
success: function(data) {
// add the content to the DOM instead of loading it again
$('.content').html(data);
res.container.find(res.loader).remove(); //Hiding Loader
}
});
});
Related
I would like to slide my page only after it fully loads.
I use
href="page#a"
and
href="page#b"
however, sections a and b's initial position is not the final position. my page loads charts and data from SPs and it takes a few seconds, making divs a and b go to the lower part of the page. Thanks.
Write your code inside .load()
$( window ).load(function() {
//whatever you write here will get executed when the page is fully loaded
$.ajax({
dataType: 'json',
beforeSend : function() {
console.log('Before Ajax Request Starts !!');
},
success: function(data) {
/*__YOUR CODE GOES HERE
AFTER PAGE LOADS AND AJAX COMPLETES LOADING_
_____code for sliding ______
*/
}
});
});
you can try this one:
$(document).ready(function(){ ... });
or
$(window).load(function(){ ... });
Hello mates just stuck with a problem.
i am using click() and load() function to get my content in a css class
$("#feed").click(function(){
$(".homefeed").load("feedcontainer.php");
$("#elementcontainer").show();
});
$("#news").click(function(){
$(".homefeed").load("n.php");
$("#elementcontainer").show();
});
$("#info").click(function(){
$(".homefeed").load("newinfo.php");
$("#elementcontainer").hide();
});
As you can see when i click a div then i am able to load a php file content in a .homefeed class container and it is working perfectly
all i want to show a loading image..like loading....loading..... before the content loads..
because when i click one of those div then it is loaded into homefeed container perfectly but it is taking some time so i just want to show user some loading image to keep them engaged
any guess how to achieve it now?
thank you.
Try this: $(".homefeed").prepend(response); change to $(".homefeed").html(response)
$("#info").click(function (e) {
$("#loadimg").show();
jQuery.ajax({
type: "POST",
url: "newinfo.php",
dataType:"text",
cache: true,
success:function(response){
$(".homefeed").html(response);
$("#loadimg").hide();
},
});
});
You can use jquery blockUI plugin. jquery blockUI
Use the .beforeSend option in the jQuery AJAX call. Note, that this only works if your AJAX call is asynchronous. If you call it using synchronous, it won't do any animations/queries/callbacks (as jQ is busy blocking everything until your call comes back).
$.ajax({
url: "http://myurl.dot.com.jpeg.image.file.chmtl.php.asp.cfm",
async:false,
cache: false,
beforeSend: function( xhr ) {
// do stuff here to do the 'loading' animation
// (show a dialog, reveal a spinner, etc)
},
done: function(data){
//process response here
}
})
http://api.jquery.com/jquery.ajax/
Here is my code below,
function image_effect(){
$.ajax({
url: "image/image.php",
global: false,
type: "POST",
data: ({my_color:encodeURIComponent($('#my_color').val()),my_size:$('#my_size').val(),g_color1:encodeURIComponent($('#g_color1').val()),format:$('#format').val()}),
cache: false,
beforeSend: function() {
$('.mypreviewArea').html("<img src='images/animated_loading.gif' />");
},
success: function(html) {
$('.mypreviewArea').html(html);
}
});
}
$("#my_size").bind("slider:changed", function (event, data) {
// The currently selected value of the slider
image_effect();
});
Iam trying to generate new image through IM by passing parameters to server page through ajax, this code works fine by displaying loading image before fetching the actual image generated from server page... but some times if the generated time is long... loading image will be displayed only for short duration and it disappears, after waiting for minutes the actual out put image will be shown ...But i want to display loading image till the actual image is shown... there should not be a blank space shown, because people will think that ,Page has stopped loading... how to fix this...?
Try this function work fine:
<div id="loader"> <img id="img-spinner" src="img/ajax-loader.gif" style="position:fixed;left:50%;top:50%;margin-left:-32px;margin-top:-32px;z-index:9999;"/></div>
$(document).ready(function(){
$("#loader").ajaxStart(function() {
$("#loader").show();
}).ajaxStop(function() {
$("#loader").hide();
});});
It looks like you're only loading a snippet of HTML which you dump into the page, replacing the loading, and that snippet actually contains the that loads your real image? In this case, the browser never even begins to load the image until after your success callback is done!
What you want is to add the new HTML with image to the container, but hidden by default. Attach a load event handler to the image you insert and, when the image is loaded, then display it.
I have an ajax call which loads some HTML into the DOM. If the call was successful I show a spinning loading gif and when the call is complete I hide it. The code:
$.ajax({
url: someUrl,
type: 'POST',
dataType: 'json',
data: someData,
success: function(response){
$(myLoadingGif).show(); // Show the loading gif
$(myContainer).html(response);
},
complete: function(){
$(myLoadingGif).hide(); // Hide the loading gif. Note: HTML has not been added yet
}
});
The problem is: The loading gif becomes hidden a couple of seconds BEFORE the HTML is added, even though I declared it in the complete section of the ajax call. I want it to remain visible the entire time. And I don't want to do an ugly setTimeout() of 1000ms just to delay it. I might add that the chunk of HTML loaded is fairly big. It's a table with 20-40 rows.
Any ideas on how to make sure the gif remains visible until the HTML has actually been added?
Success fires every time your ajax call returns a value. Complete fires when the last value is returned from the Ajax call. Because your Ajax call only returns values once, success and complete fire at the same time.
$(myLoadingGif).show();
$.ajax({
url: someUrl,
type: 'POST',
dataType: 'json',
data: someData,
success: function(response){
// Show the loading gif
$(myContainer).html(response);
$(myLoadingGif).hide();
},
failure: function(){
$(myLoadingGif).hide();
}
complete:function(){}
});
Try the above and see if this works.
You need yo hide the gif, after the new HTML is attached to the DOM, so because .html() is synchronous, any code put after calling .html() would execute after the new html is appended to the DOM. But sometimes, there's a delay, just because the DOM is added, but the browser engine not render it yet, it's there, but not showing.
For that purpuse, try a hack, sometimes it's been usefull to me:
$.ajax({
url: someUrl,
type: 'POST',
dataType: 'json',
data: someData,
success: function(response){
$(myLoadingGif).show(); // Show the loading gif
$(myContainer).html(response);
},
complete: function(){
setTimeout(function(){$(myLoadingGif).hide();},0);
}
});
I'm using pjax to load content and while the content is loading, I show a spinner:
$('a[data-pjax]').pjax().live ("click", function () {
$("#loader").show();
});
This works fine, however, after the content loads the loader still stays there.
Where should I call $(#loader).hide() to hide the loader after the content has loaded?
According to the doc https://github.com/defunkt/jquery-pjax
$(document).on('pjax:complete', function() {
$("#loader").hide()
})
I think you can also use pjax:end event.
of course after the content loads, after your ajax call within the success function.
$.ajax({
url: "test.html",
data: {parameter:parameter},
}).done(function() {
//on return, add here
$("#loader").hide()
});