Load jQuery at the end of the page? - javascript

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

Related

jQuery dom ready and run javascript when library jquery loaded

I do not want to wait until DOM ready with $(document).ready(function(). So, how to execute my inline and not inline javascript (jQuery) code when jQuery library 100% downloaded and executed? Seems it's not safe to write code without some wrapper like $(document).ready(function(), because browser can try to execute code while jQuery library not ready.
Also I have the question about the situation with $(document).ready(function() when I have some external javascripts like addthis on the page. Am I right that DOM is NOT ready until addthis javascript not loaded?
The problem is that I am already seen some links on the page and I need to add to them some parameters with jQuery, before user will click on the link, but user click before DOM ready and parameter losses.
Thanks.

Activating wordpress plugins breaks jquery effects

I'm currently working on converting an HTML5 template called Rekreato into a wordpress theme. I've managed to set up a bare-bones theme, but whenever I activate any plugins with jQuery scripts, a few of my jQuery effects are broken. Specifically, in Firefox debugger I get --
TypeError: jQuery.easing[jQuery.easing.def] is not a function #
jquery.easing.1.3.js:46
Here is the page in question. You can see about halfway down there is an image slider that is not functional. I have left one plugin active, called WP eMember.
I've tried a number of things like configuring my theme as a child theme, wrapping jquery.easing.1.3 in a document ready function, and moving the script call around in the code, but to no avail. I'm not even sure that the easing script is at fault. The answer is probably staring me in the face, but I can't seem to figure it out. Many thanks in advance.
EDIT: Excellent suggestion from markratledge. I put the scripts in functions.php with wp_register_script() and wp_enqueue_script(). At first I was very confused that even more things were broken. Reading further, I saw that since Wordpress uses a noConflict wrapper around its built-in jQuery library, the $ shortcut is unavailable. So, I went through all of my scripts that were showing errors in the inspector and swapped '$' with 'jQuery'. Voila! Everything jives. Thanks again!
Check out Function Reference/wp enqueue script « WordPress Codex on how to load JS in WordPress themes and avoid jQuery errors, with examples shown.
You're loading a bunch of jQuery by direct link, but then wp_head comes in and loads more jQuery for the plugins, and collisions occur. I.e., the two different main jQuery libraries; check in the Firefox console to get a list of all the JS that is loading.
From that doc:
wp_enqueue_script links a script file to the generated page at the right time according
to the script dependencies, if the script has not been already
included and if all the dependencies have been registered. You could
either link a script with a handle previously registered using the
wp_register_script() function, or provide this function with all the
parameters necessary to link a script.
This is the recommended method of linking JavaScript to a WordPress
generated page.

Jumi plugin doesnt seem to load jQuery and images called with css in joomla 1.5

I have a select list I have styled using html, css& js, it is working independently but once I load it into an article it displays the default html select list. I have tried positioning the customized select.html using Jumi plugin it loads most css but somehow refuses to load images called in the css. Help
First of all, the last time I used Joomla, it uses Mootools. Mootools and jQuery don't get along well because they fight over $ namespace and most people use $ in jQuery code.
to prevent this, you should either
use $.noConflict() to change the jQuery namespace
use jQuery instead of $ in your code
enclose your code in a closure:
(function($){
//use `$` safely in here
}(jQuery))

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.

Error while loading jquery plugin

i have jquery plugin jquery-1.4.2.min.js. while loading this file the following error is showing. but if i use it in another screen or another program it is loading successfully... i am unable to find the reason. Can any one help me please.
Thank you
Mihir
Make sure you are not referencing (linking) jQuery more than once in the page and that the plug-in is referenced after the jQuery reference. What sometimes happens (especially with auto script management) is jQuery is loaded, the plug-in is loaded in the jQuery instance, then jQuery is loaded again, which effectively resets any plug ins.

Categories