6 steps to take if your jQuery is not working
1. The file is not there or does not exist
People tend to become upset and/or frustrated (Including me) when something simple doesn’t work, such as jQuery not working. Before you do anything, navigate to your jQuery file and check that it is exactly where it should be.
Also make sure that you have the correct html file open – I have actually tried to load files using the incorrect html, so the path would have been correct if I had the correct html file open. Don’t ever be too proud to check the absolute basics.
2. Incorrect File Path
This is a common problem and it is the first thing I check when I’m having a javascript problem (I actually do step 1 and 2 with my style.css as well). After checking that the file path is correct, I double check by viewing the page source using Firefox, I then click on the .js link. If it opens up the jQuery file (Double check it is opening the correct file) then the destination is correct. If it does not, or it opens a page-not-found, then I know I have a problem with my file path.
3. Script load order
Help! jQuery not working, however it is loading perfectly!!!
Make sure that it is the first script loaded on your page. This is very easy to overlook. The problem exists because browsers understand javascript and not stand alone jQuery snippets. jQuery turns our code into normal javascript code, so that the browsers can interpret what we are saying. Javascript libraries are shortcuts.
If you were to load a library plugin before the library itself has been loaded, the plugin would be seen as bunch of mumbo-jumbo by the browser. This snippet of code means absolute nothing before the library has been loaded.
4. Plugin not working
Plugins malfunction sometimes, for whatever reason; And people sometimes tend to think that jQuery is not working, which isn’t always the case. When it gets this far I think to myself, “Lets get out the big guns”.
Note: Step 1 and 2 can also be applied to CSS problems.
Even though I have tried step 1, step 2 and step 3, I do ANOTHER test to make 100% sure that it is loading properly. 99.999% of the time this is the final test.
Firstly, I make sure there are absolutely NO plugins, other libraries or anything javascript related on my page, except for the jQuery library and a little script I write beneath it.
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js'></script>
<script type="text/javascript">
$(document).ready(function(){
$("div").css("border", "3px solid red");
});
</script>This adds a 3px red border to every single div on the page.
If this works, which it really should, the library is loading correctly. You then know that there is something wrong with the plugin(s) and that it is time for more troubleshooting. If you have more than one plugin, try switching the plugin order (This has worked for me on a few occasions), if it is still unsuccessful then remove each plugin and test until something works. Once you find the problem plugin, download it’s latest available version and see if it works.
If the 3px red border does not show up, then it’s time to jump to the next step.
5. Javascript library issues
Do not use multiple javascript libraries simultaneously! There are a few reasons to avoid this even besides the conflicts that could occur. More .js libraries means more html requests and more things to load. It doesn’t matter what .js library you use, use which ever you prefer more but stick with it throughout your project. There are thousands of jQuery plugins, I would say that 99% of the time there is no need for multiple libraries anyway.
6. Javascript disabled/not supported by browser
Make sure you are using a modern browser, and not IE 5.5 or something old and outdated.
It is possible to turn off the javascript support within a browser, and I have had this problem before (I actually turned off javascript support and forgot to turn it back on).
jQuery not working by this point? Try viewing the page with a different modern browser and see if there is any difference or make sure that javascript is enabled within the browser. This is a last resort.
Tips
- Don’t load two different javascript library versions, only one is ever needed.
- I have started loading jquery through Google at all times:
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js?ver=1.4.2'></script>The only downside to doing this that I can think of is if you are working offline (Obviously it won’t load) or if Google goes down for whatever reason.
- Step 1, 2 and 3 can be applied to CSS files too. The Step 3 load order could refer to the IE specific stylesheets loading before the main one.
- jQuery not working? Then follow the 6 steps again
- Feel free to comment and ask for help if any is needed.
Hi Jamy,
First of all, I love the design of this site – simple and elegant.
Secon, You mentioned “Don’t load two different javascript library versions, only one is ever needed”. I don’t write Javascript, so I often find “effects” that I like and download the source files from the author’s site. So you’re saying that if the source file is a little older and calls for jquery1.3.2 for example it’s OK to use jquery 1.4.2 as a substitute?
Thank you
Hi John, and thanks for the compliment
Yes, that is exactly what I am saying. I’ve noticed that sometimes people load jQuery 1.3.2 (for example) and 1.4.2 on the same webpage, which is unnecessary, adds to the html requests and can cause conflicts.
Only one version of a library is necessary.
Agreed on loading a single version, EXCEPT, newer versions of JQuery are not always backward compatible across the board. I have run into many issues in the past when upgrading to a new version.
The choices: 1) reference a different JQuery library where needed. Or 2) Rewrite your JQuery code to match the new version.
Hey dude, nice blog, btw there’s a typo:
“5. Javascript libarary issues”
Hey, I’m glad you like it. And thanks for letting me know, fixed.
Thanks for this tutorial. You helped me so much! Now my jquery is loading again…. yeah!
Great! Glad it helped.
Hey, I have tried all that u told…but still animation, fadeTo not working. I am using vs2005 and ie8 and just for a moment it looks that animate is going to perform but it does not.
slideToggle is working properly….
Hi, yes that’s quite simple to achieve:
If you look for this line of code:
thanks for this blog. this help me a lot. Initially my jquery was not running because i did not downloaded & had put jquery-1.7.2.min.js file. after so long time i realised that i have not placed this file in my directory & therefore my program was not running.
I’m glad it helped
Very new to this… but this image zoom jquery im working on is fine in Live View but when go to look at it in any browser nothing shows up. When I pull it up in IE and click on the question mark icon it says it cannot locate the file. Why is that? I haven’t moved it and yet the live preview sees it.
You should try and move away from Dreamweaver when you can :p
They may be setting up urls beginning with a ‘/’. That would work if you had a vhost set up but wouldn’t work otherwise. I’m taking a shot in the dark since I’m not actually seeing your website. Bottom line is your files aren’t being linked to.
Very helpful stuff. Your blog helped me solve a problem I had for two days. Never have multiple versions of jquery files in one project – point mastered. Thanks a lot.
Please check this website, everything is okay, but the website doesnt load like it should. Like it stops. Can u sort out the error by the source code? Or i can send u the files. Please help!
Hey, the CSS-Tricks forums is a great place to find people to help with your every day problems. Ask the question there and I’ll probably end up helping =)
hi please help me with this website. http://e-turumi.jp/demo/tsurumi/index.html… the slidebanner is not working in ie7.. i need it to work in that version of browser because a large percentage of japanese people is still using ie7.. thanks so much!
Hi Ysai, I’d say it’s probably because you don’t have a ‘left: 0′ property added to .headerimg
IE7 requires a left/right and top/bottom value.
hi,
I have a doubt , Instead of calling both js file in the main jsp file (as shown below) , can i cal the first js i.e, jquery js from any other page or
is that we have to cal the jquery js always in the loading jsp file?
It should be fine whether it’s an external or internal file just as long as its actually correctly linked
I’ve found reopening the html file to work sometimes, if you are just refreshing the page.
After hous of toubleshooting, I used your tip
$(“div”).css(“border”, “3px solid red”);
and the problem was fixed in minutes
thanks.
Great! I’m glad it helped.
Hi,
Below is my code. I work with Aptana HTML editor. I have jquery v1.8.2 js file saved locally in at least 3 places in my computer, including jre/lib folder and desktop, where this html file is saved. But when I run the code, only the text ‘Hello’ and ‘Hi’ appear. When I click on ‘Hello’ nothing happens. But when I tried this same code on an online editor called Tryit Editor v 1.5, it worked correctly! Why?
HTML
Is that the html exactly? The JS should be wrapped in a script tag. Also, where is the “clas” id? Try something like this:
Forgive me if I’m stating the obvious, but I just need to make sure :p
In my webpage I am doing two things
1. Image slide show
2.Image popup
for that I had included 6 javascript files, but it conflicts. It works fine individualy. How can I avoid the javascript conflict?
I had included the js file like as below
—————-for popup————-
—————for slideshow————-
your are gr8
HI Jamy,
1.I’m using multiple jQuery applications like sliders, image zooming , show and hiding div ..so on.. so i have multiple jQuery versions. In a same page i included 1.4.2, 1.0.2, 1.2.6 and 1.7.1. So as you said, if i just call 1.7.1 would everything run well ?? I guess its not running in ma site !?
This could be happening because one of the plugins doesn’t support the newer versions of jQuery. This is a problem with the plugin itself. Perhaps you should contact the developer and ask them to update the plugin.
My jquery script dont work when page loads for the first time but when i refresh the page its working. Please help.
You should try and validate your HTML, this sounds like it could be caused to do some HTML error. http://validator.w3.org/
Hi,
I have problems with references to the modules directory. The template uses the plusslider.css using the following reference: http://127.0.0.1/modules/mod_plusslider/assets/css.
But the web server, apache, in the httpd.conf file contains an alias (modules) to its own directory. For this reason, the css is not loaded because it is searched in the modules directory of apache.
How can you do to get around this?
thanks
What about relative path linking?
Hi, Jami!
I have the same problems with JSs. As Kiran said, it works fine individualy, but on 1 page it doesn`t work.
I use
jquery.ui.totop.js
easing.js
jquery-1.7.2.min.js
jquery-1.2.6.min.js
jquery-1.js
Plz help! And thnx
There is a script conflict. You would need start with 1 script that works, and slowly keep adding your other scripts until you get that same conflict. Once you figure out which script is causing the conflict, google for “jquery conflict xxscript”.
thx so much for the tips… They was very useful
I’m glad you found it helpful!
hi Jamy,
I have a problam with my ajax jquery request it works perfectly in FF,opera but it’s not responding in ie….
Please help!!
Are you using jQuery? jQuery usually takes care of most browser inconsistencies. If you are using jQuery, could you recreate an example for me to have a look at?
i have done after downloading the jquery into local system as fallow,, i place all the file correctly , Even-though i got an error. Please help if i made a mistake, I am a beginner only. Pls help me soon .
index.html:
=-=-=-=-=-=-
jq_My.js file contains :-
-=-=-=-=-=-=-=-=-=–=-=–
Can you create an example of the problem on CodePen or JSFiddle?
I have created codepen account and you can access it my location as shown below
http://codepen.io/svelmuruganrvs/public/
in that location testonly file is there.
in that i have added my HTML and Js file and i didn’t mention jquery file i have downloaded jquery.com site place in the same location where i kept html and js file.
Can any one help me now?
You weren’t linking to jQuery correctly. I’ve linked to a proper version here and the script runs: http://codepen.io/anon/pen/bnicC
Your a GOD. Thank you!
Dear Jamy
I used all the steps you recommended in this great piece and even deployed the color-the-divs-red test code, and it still was not working. It was driving me barmy.
Turns out that, after consulting an online for-hire guru, the problem was with my loading the google jquery source. My antivirus software blocks loading from that site. The guru put in code that refers to the latest release on the jQuery.com site, as follows:
This worked–and only it worked. My guess is that the jQuery site has a current security certificate with Norton (Norton 360) and the googleapis site doesn’t. There would be a long load in things like IE or Chrome, ending in the non-working page. I suspect that was while they were chasing certificates.
Just thought I’d bring this up, in case anyone out there is about to pack in jquery, which imho is the wonderfullest thing on the web.
Regards
G
Hi Jamy,
Your website helped me a lot! I am forced to use multiple plugins in one HTML document. However some plugins are from different versions of Jquery. It’s as you mentioned on your site – it makes the code above it break. Do you have any idea how I can get around this issue?
Some advised me to use the NoConflict code, others the migrate plugin. Which one? And how do I deploy it?
Thanks,
d
I am building an asp.net application with c#. I use a master file within which I put all the references to the jquery folders (both css and js). I create an aspx page inside a folder and refer to the master file (the master file is in the root of the application path), the styles are not properly rendered; moreover, the browsers throws an error, saying “$ undefined”. I understand this is related to path reference but i dont know how to overcome this.
\ Application Root
|
|-\js\(jquery files)
|
|-\css\(css files)
|
|- App.master (this refers to js and css files as src=”js/jquery-1.9.1.js” and src=”jquery-ui-1.10.2.js”
|
|
|-blahblah.aspx (refers to app.master) – jqueryui works fine
|
|blahblah2.aspx (same) – jqueryui works fine
|
|-\account
|-new.aspx (this refers to the app.master in the root; this files creates the problem.)
The problem is the master file always refers to the jquery files relative to the root folder. when aspx files from within a folder are called this becomes a problem.
This seems to be more of a path reference problem than jquery issue.
Please suggest how to overcome this
How about calling the files from the route of the site:
src="/js/jquery-1.9.1.js"andsrc="/js/jquery-ui-1.10.2.js"I see many examples of specific effects or “widgets” on sites. Each looks nice and provides something useful. Each time I try to integrate them into a “real” working system with rich features, I find that various combinations don’t work and a lot of time is spent getting the order of statements right, etc.
For instance I can test various portions of my pages without problems. However the full set consists of a page, activity.jsp. This page uses xslt transforms to create the data fields on a form from an xml file it receives from a dispatcher servlet. Both the name of the xslt and xml file are received. The page is built, then on the client, styles are applied and then after the page load is completed, various jQuery plugins should be activated. An example is that one of the plugins for a calendar is written by the xslt.
I have checked that all paths are correct, etc. but the plugin doesn’t work when created in this fashion.
I use the web console to try to determine why this is occurring. All ids are found, etc. If I put alert boxes for various actions, they come up, etc. Yet the plugin doesn’t work.
Is there a problem with using jQuery along with xslt, etc.?
I haven’t worked with javascript and xslt at the same time before so I’m not sure if there could be a problem. Do you have a test page/staging environment I can have a quick look at?
Thank you for the article!
I spent 10 minutes going over and over my code, looked at this article and realized I hadn’t put the jQuery Library above the link to my JavaScript file.
Thanks again!
Thank you for this post
it helps . but Is it a problem if we use many scripts Jquery in one page?
Yeah it is. Try and limit it to 1 jQuery script and version per page.
I find it helpful to add
border: 2px solid red;
To divs I’m having problems with. Change the color for different ones. This shows me why they won’t line up, etc.
Adding the css styles with jQuery is just a test to help find what the actual loading problem is. So if it does break the alignment, it doesn’t really matter since you can just remove that right away.
jQuery not working perfectly in IE9, when i refresh that page it works fine.. why this happen ?? plzz give me solution.
Try validating the page. Sounds to me like that could be a problem.
I could kiss u.
3. Script load order – it was for me.
Thanks a bunch
another reason mine was not working was… i was using a custom editor that was not pasting all the jquery information.
pasted using notepad. it worked then.
pk
Thank u!
I had 4 validation scripts :/
Deleted them and it worked great
Hi there,
First of all great site and very helpful tips. Unfortunately they didn’t help me, but I think it’s because I am missing something quite simple. I see in .js files instructions that I need to work the plugin interface into the html mark up. Problem is I am not sure how to do this as I used my own design with another lightbox and all my files already have styles and ids. I know this is probably very basic so sorry if it’s a silly question.
Any help will be greatly appreciated.
Thank you,
Maya
p.s. Unfinished site is on http://mayabeusdesign.com/ so you can see what exactly is happening.
Hi. My console is telling me that you have a problem in init.js on line 16. That’s what’s probably stopping the lightbox from loading. Hopefully that puts you onto the right track.
I am making a site wherein as i click on a particular image the border and certain attributes of the image must change. I have displayed the images on the using a table as below:
/. other code here…./
and my jQuery code is as below:
Where am I going wrong??
Can you create a jsfiddle of the problem?
Or just make sure all the plugins are working properly, that was my issue. Decided to change some variables within a plugin and everything went to the roof. Reset it back and voilá…
Also, some old plugins with the latest jquery versions just stop working. So is life. Be prepared and do not panic.
Cheers Jamy
It’s really easy to get bitten by jQuery problems. Most of the time, if a script I’ve written doesn’t work, it’s because I haven’t loaded jQuery before the script runs. Thanks for these great troubleshooting tips, Jamy.
Hi,
I just had this problem. I use chrome on my android device and i had to deactivate the option that blocked pop-ups… and it work… i used some animate functions.
Have a nice day
Dude I am so surprised that you are trying to reply all the questions. You’re great.
Haha thanks!
#2 using FF fixed my problem. (Paths are my nemesis.) Thanks so much!!
Hi Jamy,
i am using jquery slider plugin which is using jquery version 1.7.1min.js. which is working fine.
but when i try to add the jquery enabled menu to the same webpage which is using jquery version jQuery v1.10.1, then, when the page loads, i am able to see the jquery menu but image slider which is also there on the same page is not working. it will just show loading.jpg, and the entire iimage slider never gets loading.
kindly suggest any URL , if i want to add the jquery menu and slider on the same page written with same version of jquery.
Awaiting your reply on this ASAP.
Hi. I think this is happening because some of the jQuery used is deprecated in version 1.10.1. If you don’t plan on re-writing the javascript I suggest sticking with version 1.7.1
This loading problem can take an hour or two to realized, in particular when you have a working site, and suddenly doesn’t work because of a trivial issues.
Jamy,
We ran into a situation where jQuery 1.2.x was the default for the site and I was loading 1.4.2 in an iframe. One of local guys said it would be OK, and it was for a short time. Then things blew up and items that were supposed to show didn’t. Nobody still knows what happened except that it had to do with jQuery not loading or being recognized on this one set of pages.
Have any idea as to why jQuery in an iframe would blow up, even though there were no apparent conflicts, since the version I was using was in an iframe?
I’m currently looking for a way to replace the jQuery code with straight JS, but it’s not easy, since a set of loops that looks at data in a spanto figure out if the contents of a div should be shown or not. When it works, it’s sweet…and when it doesn’t, I have people higher up on the food chain not happy.
Hi Thanks for all the information.
For some reason I am not able to deploy jquery.min.js into the path it has to be(….core/library/js/jquery/1.3.2/jquery.min.js) in my webserver. Therefore i deployed the file under ….core/library/js/jquery/jquery.min.js.
This thing created a mess and many jquery errors thrown.
So question is does the path of jquery.min.js has to be PROPER ? Please suggest. Thanks
I’m guessing that the path you are referencing is incorrect. No, jQuery doesn’t have to have to have a specific file structure path. You could always reference jQuery via the google CDN. http://scriptsrc.net/
heyy im new to jquery . im using jq version 2 . and i used the code
its working in mozilla , chrome , safari and opera . but not working in IE10
can you help me , i had tried all the 6 steps its okkay
Hi,
Im fairly new to html and web design in general, my background is largely design. but recently made a personal website to show my portfolio and found out about jquery, so thought i might try and add a new nice effects to button etc.
So i downloaded the very latest version of query and put it into a ‘scripts’ file in my root folder for my site.
Bascially the effect I am after is a simple faze button rollover effect for my main page. So I constructed the html code for this (which to the best of my knowledge is correct?) and dreamweaver says the code is fine with no errors.
Here it is:
Yet when I save and load up in a browser, no effects take place… its almost as though the code is ignored.
Can anybody help please?
Do you have an example link with the problem I could have a look at?
I just saw that your site is built up using framesets, that will create a big problem when trying to access certain things with the javascript. If you load up the script, and then have a frameset which includes the ‘a img’ html, the javascript won’t be able to access that and will seem as if the javascript is just being ignored.
Using framesets is a really old way to develop websites and is considered pretty bad practice. I think you are using the framesets to be able to re-use code within your site without having to duplicate it on each page. I would suggest you use .php files and use the php
include()function. If you need any help with that just send me a message via my contact form on the contact page.I have to say “Thank You Very Much” to you for this. I was having trouble with my jQuery until I read this. Apparently I had the script load order wrong.
It’s my pleasure. Yeah it’s the small things that are tricky at first!
3. Script load order …… YOU are a life saver THanks
Thankyou, I had the step 4 problem; as I were inserting my jQuery Mobile Plugin before the jQuery Min, and therefore the jQuery Min file wasn’t uploading untill i swapped it to be the first one. So thankyou
Good advice. Also, beware of using jquery-latest cdn. I changed from 1.7.2 to latest and found this week that the script had broken. Changing back fixed it.
Your liberal use of the phrase “jquery not working” seems to have done the trick on the search engines
Haha yeah, I was actually doing a test when I wrote this article.
Thanks Jamy Golden,
I was using multiple Plugins. I commented out the older version and it worked fine. Have a good day.
Hi Jamy,
First of all it’s a great blog and your tutorial helped me a lot. In fact I am checking these 6 things whenever I am working with jQuery. Thanks for that.
Actually I am a noob in javascript, I have one problem, I have checked all the steps you told in your tutorial but still no luck.
I am loading all javascript libraries first and then I have written the javascript for the page. Now I am converting all the javascript code into a file called scripts.js and I am calling that file but it’s not working.
Please Help. Thanks.
Hi Akshay, could you please send me a link to a page that has this problem so I can check it out?
Legendary post. Saved me a few times, being a part-time jquery user.
hi….m using these scripts in my project…..
hljs.initHighlightingOnLoad();
validator.js version 3.1
prototype version 1.6.0.2
calendar v4.0.4
jQuery v1.3.2
jquery.nyroModal 1.6.2
and another js files which has been created by myself…..
and one of them is general_function.js which contains confirm delete code…….
I know that js conflicts anddue to this confliction my deletion doesn’t works successfully….m not able to recognize where does the confliction occurs?
So, please do help me…..
Do you have a demo link where I could see the problem?