I am trying to run a jQuery snippet after I initialize a custom jQuery plugin.
The snippet needs to modify part of the DOM that the plugin makes, so I need to ensure that the snippet executes after the plugin finishes initializing its DOM.
$(function() {
// initializing the plugin
PluginConstructor({
"id": "plugin-container"
});
// snippet
$('.some-div-inside-plugin-container').remove();
});
The above seems to execute non-sequentially, top to bottom, since the snippet has no effect, leading me to believe the snippet was executed before the plugin's DOM has finished initializing.
Is there a jQuery/javascript method that allows the snippet to wait for the completion of the plugin?
I cannot modify the source code of the plugin, by the way.
I think no, there's no jQuery/javascript method do that, because that depend to the plugin itself, so you have to check in the plugin you want to use for this function triggred after load (ready status).
Just like example #Marcos mentioned in comment for phantomJS we found onLoadFinished or onInitialized functions.
Related
I'm needing to load JS code on many different websites with different developer's code, and I want to load in jQuery into their site to manipulate the DOM. The only problem is they may or may not have jQuery already loaded on the page, and I don't want to conflict with that.
A lot of answers deal with checking if jQuery is already loaded on the page, or adding callbacks to when the entire dom is loaded. I don't want to go that approach, instead I want to know if I can directly load jQuery in as it's own variable which is completely isolated, so that I can use it directly without conflicting with whatever is outside.
This includes the fact that they may be using old, specific versions of jQuery that I can't go overwriting with my newer version. I really just want a complete isolated instance.
(function() {
// load jQuery in isolation and call it "xxx"
var divs = xxx('body').find('div');
})();
I also need to do this FROM JS itself, not by editing html (so I can't add jquery script tag in their HTML, i want to load it asyncronously with a callback)
You might try this approach:
(function(xxx) { // add xxx as a paramters
var divs = xxx('body').find('div');
})(jQuery); // Add jQuery as a value here.
As mentioned in other answers. You can check if jQuery is loaded using window.jQuery. And to check the version number you can use jQuery.fn.jquery.
I still however not sure what you mean by isolation. jQuery loads into window object which is global.
You might want to use another library like Zepto which has similar syntax to jQuery, or you can use vanilla JavaScript. See this link http://youmightnotneedjquery.com/
You could do this ...
if(!window.jQuery)
{
// load jquery here
}
Before you load your script. Declare no conflict.
Then you can load your script.
After that is loaded, do ...
var myJq = jQuery.noConflict();
You can access your library using myJq.
I'm trying to run JS code in WordPress, using a plugin; but can't make it work.
Here on this Codepen page, you can see the element I'm trying to integrate on my site (i.e. a drag and drop feature)
http://codepen.io/galaxija737/pen/pHvEi
And here, this is working properly.
But then, I can't figure out how to integrate the JS code properly into WordPress; whatever plugin i'm using. And idem into JSFiddle, impossible to run properly the script, as you can see...
https://jsfiddle.net/szan6shz/)
For instance using "TC-custom-javascript" plugin; when I add the JS code, nothing is running (i.e the drag-drop feature is not working; like on the Fiddle) :
I'm really new at Javascript as you can see. If anyone can give me a hand on this. (I guess i miss something is the way JS needs to be written/integrated)
Thanks a lot!
Greg
WordPress runs jQuery in safe mode. This means that you need to call it with jQuery instead of $. You can call your initial onload function with jQuery and pass $ into the function to define its use throughout the function.
See this example:
jQuery(function($){
$('.theclass').fadeIn('slow');
});
I think this question is asked, but I am surprised to see that dojo is not behaving as per the docs. I want some div to be changed with particular class. So I decided to use
dojo.ready(function(){
});
But that was running before the page was completely loaded. Then I used addonload() function. That too gave the same result. Finally I ended up doing something like this
require(["dojo/domReady"], function(domReady) {
domReady(function () {
setTimeout(function(){
setAfrobeat();
},500);
});
});
That is working fine, but some times I see a blink as there is delay, and very a few times this also doesn't work. If I increase that timeout to 1000 it works always, but user can see the content modification. Any perfect way like I used to do in jquery's document.ready
Regards
Aadam
The way you are loading domReady is as a typical module instead of as a dojo plugin with the "!" convention as per the dojo documentation http://dojotoolkit.org/documentation/tutorials/1.8/modules/ see using plugins.
To use domReady correctly it should look like this..
require(["dojo/domReady!"], function(){
// will not run until DOM is finished loading
});
http://dojotoolkit.org/reference-guide/1.10/dojo/domReady.html outlines when and how to use dojo/domReady! vs dojo/ready
Adding different plugins, scripts and other jquery the code gets pretty messy.
What is the right place for running each jquery, and does it need separated functions for each element.
Some of the scripts are runs like this in the head of the page:
$(function(){ ...
jQuery(function() { ...
and other need to be at the end:
$( ".add" ).button({ ...
is it wrong to merge all of the functions into one $(function(){ ... ?
There is NO hard-n-fast rule for where to put a jQuery snippet.
You put it at correct place where it is needed.
$(function(){ is short for $(document).ready(function() {. It is an event, which executes when the document is ready for processing.
$( ".add" ).button({ is assigning a plugin(probably) to an selector. Every plugins have their own event triggers and they will occur either automatically or manually like through, hovers and clicks
You should put(always) code at the correct event triggers/function call for them to function properly.
But
If you are using too many scripts on your page, that it is slowing the load time. Then they are better when they are placed right before the </body>
References
Read jQuery Events Documentation [docs here] very clearly to understand, where to put your code effectively
$ is an alias for jQuery, so you can pick what ever you prefer and stick to it. There are some advantages of using $. It is slightly more compact and commonly used in the jQuery documentation.
In your examples your anonymous function was called when document was ready. One thing that is good to know is that images might not be loaded when using document ready. You can be sure that are DOM elements are there, so your jQuery selectors should work correctly.
If you have multiple $(document).ready(function () { /* your code here */ }); lines then all them are executed, so they don't override each other. For example if you multiple JS files. You should separate your JS files for maintainability.
I need a little help understanding something. I am using the colorbox plugin to load an external an external html snippet (which works fine). But none of my jquery selectors see the newly loaded html. Is that right (I think it is)? and if so how do I work around that.
Thanks
When you set any properties/bind events in your $(document).ready(function() { ... }) they are executed on page load. So it is all applied to the DOM elements that are present initially.
But when you call the AJAX request and insert some elements into your document, the jquery statements are not executed again (because document.ready doesn't fire). Some solutions to overcome this are:
execute the inside of the document.ready function or the relevant part of it after you insert the new elements.
if the only thing you need are event handlers that should be bound the the new elements you may use live events.