{"id":2682,"date":"2013-03-12T15:32:28","date_gmt":"2013-03-12T15:32:28","guid":{"rendered":"http:\/\/www.simonbattersby.com\/blog\/?page_id=2682"},"modified":"2013-07-18T12:59:26","modified_gmt":"2013-07-18T11:59:26","slug":"debugging-jquery-a-beginners-guide","status":"publish","type":"page","link":"https:\/\/www.simonbattersby.com\/blog\/debugging-jquery-a-beginners-guide\/","title":{"rendered":"Debugging jQuery &#8211; a beginner&#8217;s guide"},"content":{"rendered":"<p>I get quite a lot of questions from users of this site who are trying to implement some jQuery on their pages, and encountering problems in doing so. I&#8217;ll start off by listing the things to check first, and then explain how you to use the browser console to help you. If you&#8217;re already seeing error messages in your console, start <a href=\"#console\">here<\/a>.<\/p>\r\n\r\n\r\n<h3>Nothing happens\/jQuery doesn&#8217;t work &#8211; help!<\/h3>\r\n<p>Go through this checklist in order to rule out the most likely issues:<\/p>\r\n<ul class=\"bulletlist\">\r\n    <li><strong>Have you included jQuery on your page?<\/strong><p>You need to include a link to jQuery on your page. This is normally (but doesn&#8217;t have to be) included in the document head, and will look something like this:<\/p><pre>&lt;script src=\"http:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.8.3\/jquery.min.js\" type=\"text\/javascript\"&gt;&lt;\/script&gt;<\/pre>\r\n<p>If you don&#8217;t include jQuery, nothing will work.<\/p><\/li>\r\n    <li><strong>Have you included jQuery just the once<\/strong><p>Check you&#8217;ve only got jQuery loaded once. It&#8217;s not uncommon to see it loaded more than once, particularly if you&#8217;re trying to use a couple of different plugins. Multiple versions usually, but not always, cause everything to fail.<\/p><\/li>\r\n    <li><strong>Are you calling the scripts in the right order?<\/strong><p>You need to call scripts (as in load them on your page) in the order that you need them. This should be: jQuery, jQuery UI (if you&#8217;re using it), and then any code that needs jQuery. If a script that needs jQuery runs before jQuery is loaded, it won&#8217;t work.<\/p><\/li>\r\n    <li><strong>Does your page use .noConflict()<\/strong><p>Err, what&#8230;.? You&#8217;ll probably be aware that jQuery uses the dollar sign as a shorthand &#8211; you&#8217;ll have seen code like this:<\/p>\r\n<pre>$('#myselector').fadeOut('slow');<\/pre>\r\n<p>Now, it&#8217;s possible to disable the use of the $ shorthand by using <a href=\"http:\/\/api.jquery.com\/jQuery.noConflict\/\">.noConflict()<\/a>. This is done in case other javascript libraries need to use the $ variable themselves. <strong>WordPress applies .noConflict() by default<\/strong>. The result will probably manifest in the same way as not loading jQuery. To fix this, you&#8217;ll need to amend your code to look like this throughout:<\/p>\r\n<pre>jQuery('#myselector').fadeOut('slow');<\/pre>\r\n<p>Check out the <a href=\"http:\/\/api.jquery.com\/jQuery.noConflict\/\">.noConflict documentation<\/a> for more information on how to use, and work around this.<\/p><\/li>\r\n    <li><strong>Are you using another javascript library as well as jQuery?<\/strong><p>If you are, the first thing to consider is &#8216;Why?&#8217;. It&#8217;s not impossible to do, but you&#8217;ll be making things more complex than they need to be, and life harder for yourself. You&#8217;ll need to look at .noConflict again.<\/p><\/li>\r\n<li><strong>Is your code correct?<\/strong><p>If you&#8217;ve mistyped your code or otherwise made an error, then that can cause all the javascript on your page to stop working. If this is the cause, then it&#8217;ll usually show as a console error &#8211; see below.<\/p><\/li>\r\n    <li><strong>Is anything else interfering with your code?<\/strong><p>Sometimes, if you have multiple plugins loaded, either in WordPress, or just lots of scripts loaded, they interfere with each other. If this is a possibility, remove the other scripts and see if that solves your problem. If it does, add scripts back one by one until you isolate the cause.<\/p><\/li>\r\n    <li><strong>It&#8217;s none of these&#8230;.<\/strong><p>Well, at least you&#8217;ve ruled out the obvious things. If you&#8217;ve got this far, you need to look more closely at your code, see if there are any error messages generated (see below), and take it from there.<\/p><\/li>\r\n<\/ul>\r\n\r\n<h3>Accessing the browser console<\/h3>\r\n<p>Most browsers have a helpful console where any javascript error messages are displayed. These can often give a clue to the problem. Accessing the console varies from browser to browser.<\/p>\r\n<ul class=\"bulletlist\">\r\n<li><strong>Firefox:<\/strong> If you&#8217;re using <a href=\"http:\/\/getFirebug.com\">Firebug<\/a> click the icon to launch Firebug and access the Console tab. You&#8217;ll need to load the page <em>after<\/em> launching Firebug.<\/li>\r\n<li><strong>IE9:<\/strong> Access Developer tools via F12, and then click the Console menu item. You&#8217;ll need to reload the page <em>after<\/em> launching tools. <\/li>\r\n<li><strong>Chrome:<\/strong> Developer tools are Ctrl+Shift+I, then Console tab.<\/li>\r\n<li><strong>Safari:<\/strong> Develop > Start Debugging Javascript<\/li>\r\n<li><strong>Opera:<\/strong> Ctrl+Shift+I to launch Dragonfly, then the Scripts tab (not the Console tab)<\/li>\r\n<\/ul>\r\n\r\n<h3 id=\"console\">Console errors in 15 seconds<\/h3>\r\n<p>Any of the first four issues in the checklist at the top of the page will generate this (or a very similar) error ($ is not defined) &#8211; for example (from Chrome):<\/p>\r\n<img loading=\"lazy\" decoding=\"async\" src=\"\/images\/blog\/debug2.png\" alt=\"Chrome console screenshot $ is not defined error\" title=\"Firebug console\" width=\"424\" height=\"36\"\/>\r\n<p>If your javascript\/jQuery has a syntax error, then the console will tell you where it is, and what it thinks is wrong. For example (from Firebug):<\/p>\r\n<img loading=\"lazy\" decoding=\"async\" src=\"\/images\/blog\/debug1.png\" alt=\"Firebug console screenshot showing the location and description of a jQuery syntax error\" title=\"Firebug console\" width=\"475\" height=\"51\"\/>\r\n<p>It&#8217;s obviously not feasible to list every possible console error here. If you see something in the console that doesn&#8217;t make sense to you, the best bet is to copy the message and Google it. Here&#8217;s some more information on <a href=\"\/blog\/debugging-jquery-using-the-console\/\">using the console to debug<\/a>.<\/p>\r\n","protected":false},"excerpt":{"rendered":"<p>I get quite a lot of questions from users of this site who are trying to implement some jQuery on their pages, and encountering problems in doing so. I&#8217;ll start off by listing the things to check first, and then explain how you to use the browser console to help you. If you&#8217;re already seeing [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-2682","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.simonbattersby.com\/blog\/wp-json\/wp\/v2\/pages\/2682","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.simonbattersby.com\/blog\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.simonbattersby.com\/blog\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.simonbattersby.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.simonbattersby.com\/blog\/wp-json\/wp\/v2\/comments?post=2682"}],"version-history":[{"count":34,"href":"https:\/\/www.simonbattersby.com\/blog\/wp-json\/wp\/v2\/pages\/2682\/revisions"}],"predecessor-version":[{"id":2857,"href":"https:\/\/www.simonbattersby.com\/blog\/wp-json\/wp\/v2\/pages\/2682\/revisions\/2857"}],"wp:attachment":[{"href":"https:\/\/www.simonbattersby.com\/blog\/wp-json\/wp\/v2\/media?parent=2682"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}