JQuery not working – ten most common reasons

JQuery not working – ten most common reasons

Several newbies start off with JQuery design immediately after HTML and CSS lessons. JQuery is a JavaScript library that enables developers to seamlessly implement wonderful working user functionalities and design.

JQuery not working is what a major section of the developers’ face each day while developing. This problem will not keep on sustaining if you keep some basics in mind while developing.

We all know the syntax well and how to implement, but these cardinals are often forgotten.

Let’s have a look at the ten most common reasons according to their level of difficulty.

JQuery not working – wrong id or class name

This is one of the most common mistakes. Often we miss out on this mistake because we are sure that this can never go wrong. But this is the most common mistake that occurs; and quite frequently too.

JQuery not working because of wrong names of the element is common, for example, you give the element an id “button” and you call it as a class. Another one could be is when you name it as “button” and then call “savebutton” in the JQuery code.

JQuery not working – check the commas, brackets and semi-colons

Commas or quotes are very important. Whenever you call a function or event with respect to an element, make sure the element id or class is within quotes. For example – $(button) is wrong syntax. You should write $(“button”) or $(‘button’).

Brackets can also make JQuery not working. Functions are a tricky syntax in JQuery. Each event binding function has a parenthesis and a curly brace both. So, if you miss any one of them you’ll land up having an error.

Semi-colons are also a must after every function and statement. JAVA statements always end with a semi-colon. In JQuery, semi-colons are also given after function end. For example –

$(“div”).click(function(){
	//some statements
});

JQuery not working – wrong include syntax

This often pops out once in a while. Although several of us know the exact syntax of including script files in HTML, this error is very common. Maybe due to overlook or quick run through you have missed this. So, never forget to check this point when you have JQuery not working. The format for include in head region is –

JQuery not working – wrong file path

This is also a very important bug yet very simple. File path can be wrong or file name. JQuery not working because of file path can be treated if you copy the file path directly from the containing folder. Just copy the path from the folder address bar and paste it directly to the code.

You can check whether your JQuery is not working because of file import or not. Just write the following code in your HTML file and run it. If your JQuery works then import is successful else your import is failing.

$(document).ready(function(){
	$(“body”).click(function(){
	alert(“its working”);
});
});

 

JQuery not working – version problem

Version of JQuery matters depending on your usage. Some functions can be implemented even with the basic versions of JQuery. Like “.click” and “.focus” for example, are included in the very basic builds of JQuery. However, since the core modules are improved day to day, you need to have the update JQuery build linked to your file for perfect results. The best method for using JQuery on the server is to link JQuery from the web. Link directly to the URL provided in their site. Otherwise you can also download the latest build regularly and keep your code updated.

JQuery not working – wrong function name or syntax

Another error can occur when you are calling a function that does not exist. This type of error gets marked automatically. However, in case of a syntax problem, you might not be able to catch the actual problem root. Check all the functions that you are using with the JQuery documentation.

Keep syntax in mind. All functions may not have callback methods. Follow the general syntax to avoid any glitches.

JQuery not working – dot and hash usage

Dot and hash have certain meaning. Dots are used when you call an element with its CLASS name, while hash is used for calling elements with its ID. If in any case you mix up the two, your code would not work and you would never find out why.

HTML built in elements does not require dots or hash. Suppose you call elements directly by their DOM name, you need not give a hash or dot.

For example –

$(“#wrapper”).children(“input”).css(‘border’,’1px solid red’);

So, whenever you face JQuery not working, remember to check this thoroughly.

JQuery not working – the ‘this’ operator

The “this” operator is used to select an element that is bind to the current event. This keyword is very useful. However, whenever you use it remember to put it outside any commas.

For example, the following is incorrect –

$(“this”).attr(‘id’);

The following is the correct syntax –

$(this).attr(‘id’);

 

JQuery not working – calling element before declaration

Often we make this mistake and find JQuery not working. We write the script just after the beginning of the body tag or maybe somewhere at the starting stages. However, the element we are calling might be somewhere down at the footer.

What happens here is the script gets called first even before the element has been initialized in the DOM. In this way, the script at times works and at other times fails. The reason is that the script gets called before and it fails to find the element to call.

The best method to check this is put all your script each time inside a $(document).ready() function. So, these scripts do not run until the whole DOM has been loaded.

JQuery not working – for Smarty or similar other languages

Smarty and similar such languages do not allow direct include of JQuery. TPL files need to implement JQuery in a slightly different way.

First, include the script within a {literal} {/literal}

Second, include the following in the head region

<script type="text/javascript">// <![CDATA[
jQuery.noConflict();
// ]]></script>

Third, use jQuery instead of $ in your JQuery code.

Here’s an example,

{literal}<script type="text/javascript">// <![CDATA[
jQuery(document).ready(function(){
	jQuery(“body”).click(function(){
	alert(“Hi”);
});
});
// ]]></script>{/literal}

Comments are closed.