This is an article discussing on how to handle and reveal an error message caused by an improper declaration or used upon creating a web-based application using JQuery. It is an error message which is generated as stated in the title : “variable is not defined”. The variable itself refers to any variable name exist in the snippet code defined using JQuery.
JQuery which is a Javascript triggered an error “variable is not defined” when a variable used within a certain process in the script but it hasn’t been properly declared, initiated or to be more precise, the variable itself hasn’t been assigned with a proper value. So based on that, an error triggered complaining that the variable itself has not been defined. Below is an example shown :
As shown in the image above, the exact error message can be detailed out as follows :
ReferenceError: element_text is not defined
And the error itself since JQuery is a Javascript and it is obvious that Javascript is a client-side programming script, Web Browser has an important role to interpret it. Using an additional plugin which in this context is an installed plugin of Firebug as part of Mozilla Web Browser, the error can be easily find out.
The problem is in a variable named ‘element_text’. After finding out part of the snippet code which is guessed will become the main cause for the error message to be appeared, below is the snippet code which is mentioned :
$('#list_selection ul').append($('<li></li>').attr(value(element_text).text(element_value));
The snippet code itself is trying to add a list item HTML element to an unordered list HTML element as shown above. It is also trying to set it with several attributes such as value and text of the element itself. And the cause is actually because the variable named ‘element_text’ hasn’t been defined in the first place so that the error regarding element_text is not defined. So, to solve the problem regarding the error happened, just define the variable before the the snippet code stated above as follows :
var element_text = $("#list_selection option").filter(":selected").text();