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.
Related
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?
I have a simple html page with jquery for updating the contents of the different menu items from a php script on my server but the scripts written for the ajax loaded elements are not working.
how do i correct this.
please.
You're trying to apply your code for elements that do not yet exist in your document and that are created dynamically.
If you're using jQuery, read this: http://api.jquery.com/on/
Yeah thats what i taught was the problem but i actually called the functions onload of those very elements an it didn't still work
Use .on() method, when generating elements dynamically..
$(document).on('event','selector',callbackFfunction(){
});
Example
$(document).on('click','button.yellow-button', function(e){
});
Let me know if it not works.
I have some code that uses jQuery and it's in the html. I include jQuery at the bottom of the page so the problem is that every use of $. is undefined.
I remember reading somewhere that you can create a holder $ function and when the jQuery get loaded it will execute everything that called $. (like some sort of a stack).
Can you please tell me how to do this? Like with a code example or if you have that article link it will be great. :)
No, you can't make a whole bunch of jQuery calls before it's loaded and then expect something later on to play back everything.
Your choices are:
Load jQuery before things that use it.
Don't use any jQuery calls until after the page and jQuery are loaded.
Create your own list of initialization functions that you want called after jQuery is loaded and register those callbacks as the page is loading. Then, have your own function that walks that list of initialization functions and calls them all once jQuery is loaded to kick of the initialization that uses jQuery.
But, #3 seems like a lot of work that isn't really necessary. Either load jQuery up front or don't run your initialization functions that use jQuery until after it is loaded - either is cleaner and simpler.
Keep in mind that you also need to load any jQuery plugins after jQuery is loaded because they use jQuery to initialize/install themselves.
Make sure that you are not loading any plugins before you load jQuery. Plugins extend the "$" object, so if you load a plugin before loading jQuery core, then you'll get the error you described.
It could be that you have your script tag called before the jquery script is called
place the jquery.js before your script tag and it will work
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.
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/