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(){ ... });
Related
I am using a plugin called mixitup that makes sure I have a masonry layout with some animations.
The masonry comes from another page which gets loaded in through ajax. I have a search bar which searches for photos and returns them from the masonry page. The issue is this works the first time but not the second time and so on. Why is that?
My code for the search input:
$('.photosearchinput').keyup(function(e) {
clearTimeout($.data(this, 'timer'));
if (e.keyCode == 13){
searchphotos(true);
}else{
$(this).data('timer', setTimeout(searchphotos, 500));
}
});
My function that makes the ajax call and which has my masonry mixitup function in the complete:
function searchphotos(force) {
var photoform = $(".photosearchform").serialize();
$.ajax({
type:'post',
url:"includes/photoresults.php",
data:({photoform: photoform}),
success:function(data){
$( "#searchphotos" ).show().empty().append( data );
},
complete:function(){
// I tried calling #masongallery from the body (body always stays the same and does not get added again)
$('body').find('#masonrygallery').mixItUp({
selectors: {
target: '.tile',
filter: '.filter',
sort: '.sort-btn'
},
animation: {
animateResizeContainer: false,
effects: 'fade scale'
}
});
}
});
}
I thought maybe the DOM gets reloaded and jquery cannot find the element #masonrygallery anymore so I tried calling it like this: $('body').find('#masonrygallery').mixItUp({ the body never gets reloaded so maybe this would fix it, but no. I get the same result. It works the first time, but not any time after that.
I have made a video to show what I mean: https://streamable.com/njy6x7
I get no errors in my console. And when I look in the network tab to see what ajax is retrieving, I see the correct images, they are just not visible as masonry layout (in fact they are not visible on the page at all but this is because of the plugin).
I'm using ajax but is there any option to call function after ajax content fully loaded like $(window).load() or window.onload? When i'm in fresh page everything working fine with $(window).load() or window.onload function because some scripts work after window complete load. But the problem is in ajax and when i click on a link and page is dynamically load contents from another page so we don't need $(window).load() or window.onload function but because some script only work when window loaded or content fully loaded so how to call function after ajax content fully loaded like $(window).load() or window.onload ?
function windowload() {
//Some functions works only after window load
};
$(function() {
$(window).on('load', windowload);
$(document).on('click', '.pagination a', function(event) {
event.preventDefault();
var $this = this.href;
$.ajax({
url: '' + $this + '',
dataType: 'html',
success: function(html) {
var div = $('#style', $(html));
$('#style').html(div);
//call windowload but not working
windowload();
//Also tried this but not working
$('#style').on('load', function(){
windowload();
//Some functions work only after ajax content fully loaded
});
});
});
Edit :
I need a function after ajax content fully loaded not after ajax request complete.
I have been trying to find the solution to this exact same problem for hours. What worked for me was
$(document).ajaxComplete()
I put my code in there and when Ajax was complete and the content of the div fully reloaded, I added the style I wanted to add. Hope this helps someone. Calling the method from ajax success won't work.
If you need to call a single function at multiple points in the pages lifecycle (as you describe above, where the logic is needed on both page load and also when an AJAX request completes), then you can extract the required logic to its own function to be called as needed. Try this:
function htmlLoaded() {
// Some functions work only after window load
}
$(window).load(htmlLoaded); // called on page load
$(function() {
$(document).on('click', '.pagination a', function(event) {
event.preventDefault();
$.ajax({
url: this.href,
dataType: 'html',
success: function(html) {
var styleHtml = $(html).find('#style');
$('#style').html(styleHtml);
htmlLoaded(); // called after the AJAX request completes successfully
});
});
});
});
Also note that I made a couple of amendments to improve the logic in your JS code.
Try this:
$("#Style").ready(function(){
console.log('Style is fully loaded.');
windowload();
});
Hope this will help.
When you call a function you must use the () symbol like windowload().
Here is the fixed, well-indented code : (I removed the empty quotes, useless here)
function windowload() {
//Some functions works only after window load
};
$(function() {
$(window).on('load', windowload);
$(document).on('click', '.pagination a', function(event) {
event.preventDefault();
var $this = this.href;
$.ajax({
url: $this, // Removed the empty quotes which are useless here
dataType: 'html',
success: function(html) {
var div = $('#style', $(html));
$('#style').html(div.html());
$('#style').ready(windowload);
}
});
});
});
By adding a new script tag which will run the windowload() function, we solve the problem. Because when this script is runned all HTML content placed before this tag has been loaded.
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'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()
});