Response title
This is preview!
- Screen name: neejoh
- About Me: Owner of MW24/7, and the newly founded Digital Warfare 24/7 network.
neejoh's Profile
2 Posts
3 Responses
0
Followers
Activity Trend
Last 30 days
Loading Chart...
Show:
- Expanded view
- List view
- I know it's best practice to load jQuery on the bottom of the page (just above </body>) for optimal performance. Problem is, I often use inline jQuery code in modules that I load into pages instead of putting it in a separate file.So, now that I want to improve the speed of the page loading I want include the jQuery at the bottom instead of in the <head>, but it's giving me the following error (this occurs in both Chrome and Firefox);Uncaught ReferenceError: $ is not definedThis makes sense since jQuery has not been loaded yet. But is there a way around this? Or is it not possible to use inline jQuery when you load the framework at the bottom of the page?Example of inline code;<script type="text/javascript" charset="utf-8">//<[CDATA[$(function(){contact:87Uncaught ReferenceError: $ is not defined$("#contactForm1").validate({rules: {email: {required: true,email: true},question: "required"},messages: {email: "Please fill in your email address",question: "Please put your question here"}});});//]]></script><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
- 29-Jul-2010 05:45 AM
- Forum: Getting Started
I've been struggling with this for a while now and I don't believe I'm the only one. So let's hear it, how do you call to different plugins on one page and not clutter it with DOM ready's?I'm currently doing it like this, but there's probably a better way:In the <head />- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
- <script type="text/javascript" src="jquery.plugin1.js"></script>
- <script type="text/javascript" scr="jquery.plugin2.js"></script>
- <script type="text/javascript" scr="jquery.init.js"></script>
First I include jQuery (d'oh) and the jQuery plugins I want to use (slideshow, tinymce, tooltip, etc..).After that, I have a file "jquery.init.js" that calls to the plugins in the DOM ready.- $(document).ready(initWebsite);
- function initWebsite() {
- //DOM ready
- //simple inline function
- ie6Check();
- // 3rd Party
- if(jQuery().plugin1) //if plugin is loaded and available
- fPlugin1();
- if(jQuery().plugin2) // if plugin is loaded and available
- fPlugin2();
- }
- function fPlugin1(){
- if( $('#element').length > 0)
- $('#element').plugin1({
- foo: 'bar',
- bar: 'foo'
- })
- }
- [etc]
My problem with this is that I always have to edit my "jquery.init.js" to include and run a new plugin. I can't do this dynamically, which would be ideal. That, plus most of the time I don't need 75% of the plugins on most pages. For example; I only want to include "jquery.slideshow.js" on a page that includes a slideshow.Should I really stop putting it all in 1 DOM ready and lose the opportunity to have global variables that can be used between functions and plugins, or is there another better way?
contact:87Uncaught ReferenceError: $ is not defined