We Keep Coding

jQuery masonry doesn't work after content is loaded via AJAX

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?

JS libraries not working after Ajax call

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.

jquery recommended way to do ajax navigation

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.

Ajax page load in rails 3 is breaking other javascript functions..?

So I'm using http://code.drewwilson.com/entry/tiptip-jquery-plugin for tool tips in my app.
When a page loads, it works great. If I load a new page through ajax, the tool tipz on the new page simply don't show up.
Any ideas for what could be breaking something like this?

When you say this:
$(".someClass").tipTip();
To bind the tooltips to some elements, that executes immediately and only pays attention to the elements that are currently on the page. If you load some new elements through an AJAX call, you'll have to bind tipTip to everything in the new HTML. Whatever AJAX calls you're using should have a success callback, you can supply a callback that will re-do the .tipTip() call on the new HTML as you insert it into the page.

Rails uses prototype by default currently so anything that uses jQuery, unless you use a gem requires this:
http://docs.jquery.com/Using_jQuery_with_Other_Libraries
I assume you're using the $( syntax... so just replace $( with jQuery( and call jQuery.noConflict(); at the beginning of the plugin.
Hope this helps.

using load() to load page that also uses jQuery

I'm trying to load a page that is basically an edit form inside a
dialog (ui.dialog). I can load this page fine from an external (I'm
using asp.net) page.
The problem is that inside of my "popup" form, I need to $(function()
{my function here}); syntax to do some stuff when the page loads,
along with registering some .fn extensions for some dynamic dropdowns
using ajax calls.
I have created my <script type="text/javascript" src="jquery.js"> but
I don't think these are being included, and also my $(function) is not
being called.
Is this possible to do or do I need to find another way of
accomplishing what I need to do?

If you really need to load that form via AJAX you could to do all the Javascript stuff in $.ajax callback itself.
So, you load the popup form like this:
$.ajax({
//...
success: function(text) {
// insert text into container
// the code from $(function() {});
}
});

The script isn't getting run because the document's ready event has already been fired. Remove your code from within the
$()

Use the livequery plugin.
It allows you to bind events to elements that might be loaded later: http://brandonaaron.net/docs/livequery/