I use "https://salvattore.js.org/" as masonry layout for my product list. I also use filters which is done with Ajax. (I am working on Prtestashop v1.6). So, when filters is active/An ajax call was made, the masonry layout not working.
I found the similar question here: jQuery doesn't work after content is loaded via AJAX
and I think this solution must work for me:
$( document ).ajaxStop(function() {
//your code
}
But I don't know where I must place it? Inside Ajax or in salvattore.min.js? Or I must look for a different masonry solution?
Related
I have using FormSliderSwitcher boostrap plugin in my web page and i have init that plugin on document ready
$(document).ready(function(){
FormSliderSwitcher.init();
});
I have used this plugin all functionality on the page but after ajax call i dosent used this plugin functionality on newly append HTML after Ajax
if i would try to work with below code
$(document).ajaxComplete(function(){
FormSliderSwitcher.init();
});
then every time AJAX call multiple switches append in HTML again and again so please help me How can i get plugin functionality after ajax without init that plugin again ? or also would be better to give idea how to know plugin already initialize or not ?
keep a variable :). Simple enough.
vAjaxCompletedOnce=false;
$(document).ajaxComplete(function(){
if(vAjaxCompletedOnce==false){
FormSliderSwitcher.init();
vAjaxCompletedOnce =true;
}
});
Im having a problem loading pages in wordpress with ajax. I have to make animated page transition, so i decided to use ajax and put page content into a div which i will animate into view. I created this logic, that works 50% of the time. There are generally a lot of weird bugs.
So my question did anyone create ajax page loader in wordpress? I read a bit about using ajax with wordpress, and that i had to use wordpress built in features, but I didn't get why is that. Also I don't know how to get the back button to work properly.
$( links ).click(function(e) {
var link = $(this).get(0).href;
$('body').append('<div class="contain-all"></div>');
$('.contain-all').load(link);
if(link!=window.location){
window.history.pushState({path: link},'',link);
}
e.preventDefault();
});
Hope somebody has the anserws I need. :)
Okay i read a bit about ajax in wordpress and loading pages, and you can achieve this by creating template parts which you will fetch by a function in wordpress functions.php, by calling it with ajax. It sounds complicated, (and it partly is), but you can read more about it here:
https://premium.wpmudev.org/blog/load-posts-ajax/
Also if anybody have questions they can ask them here, so everyone will have access to them.
I have an Ajax call, that returns some HTML code. In this returned code, I have several dropdown boxes that use the select2 JavaScript library among many others (company libraries, custom libraries, etc.)
Now, none of the libraries seems to work at all in the content retrieved from the Ajax call.
A solution to a similar problem can be solved by using the jQuery delegate method (according to other questions made), but in this case I cannot simply go into the select2 library (nor inside all the other ones for that matter) and replace everything with delegate.
What solutions can I implement in order to make the libraries work on the returned ajax content?
If you are loading html into the page via AJAX you will need to run the initialization function on the new html:
//from the docs
$('select').select2();
If you are using jQuery.load you can do it like this:
//load the html into #result
$( "#result" ).load( "demo.html", function() {
//now use 'this' in the selection to search the new html and init select2
$('select',this).select2();
});
alternatively, to use delegate, you wait until after a click (or a custom event) and then initialize select2 again but I don't think you need to do that in this case.
I am using jQuery Mobile with Yii Framework.
Yii framework allows easy partial render for Ajax requests.
jQuery Mobile on the other hand will not display anything that is not within the data-role="page" container. Even though it does an Ajax request, a full page refresh ensues because it appears to only be able to refresh all the content within this container (what's the point???).
How can I specify the container that jQuery Mobile will refresh, rather than the container with data-role="page"?
One would EXPECT that the container flagged with data-role="content" would be the Ajax container, but it's not. I can see a JS hack coming on.
The above can be done like this:
Create your header outside the container flagged as data-role="page".
Use the following jQuery to initialise the header (otherwise you will not see it):
$(function(){
$( "[data-role='header']" ).toolbar();
});
jquery recommended way to do ajax navigation
I just tried out this simple jquery ajax code to load all the links in a page in an ajax manner.
$('a').click(function(e){
e.preventDefault();
url = $(this).attr('href');
$('body').fadeTo('slow', 0.2);
$('body').load(url, function(data){
$(this).fadeTo('slow', 1, function(){
$(this).html(data);
scroll(0,0);
});
});
});
[The links in the page stick to the current domain and no external links are present]
The page load works as expected but the scripts for Facebook, LinkedIn, pinterest buttons fail to load.
I think this is not the safest way to do a ajax navigation and I am sure other JS files, inline JavaScripts will cause error.
http://davidwalsh.name has some good ajax navigation work with mootools. I am trying to achieve the same using jquery.
The website loads and executes every script successfully and it is seen that the ajax work is not done to load specific scripts.
Is there any safe way to achieve this, making sure that the ajax loaded page works as normal as it should ??
You should call the function that attaches the script inside the load handler, so it re-attaches all DOM scripts on each load.
F.ex, if you have this code:
$(document).ready(function() {
$('#facebook').doFacebook();
$('#twitter').doTwitter();
});
Change it to:
var onload = function() {
$('#facebook').doFacebook();
$('#twitter').doTwitter();
};
$(document).ready(onload);
Then just call onload whenever the body gets new content.
Inline scripts should execute according to the docs.
You might also want to read up on how to manipulate browser history and URL using .pushState:
https://developer.mozilla.org/en-US/docs/DOM/Manipulating_the_browser_history#Adding_and_modifying_history_entries
There are decent jQuery plugins that adds this functionality in a cross-browser manner if you google around a bit.