JQuery error message name is not a function

Posted on

Another article written to discuss an error message triggered upon executing a web page using JQuery inside of it. In this web page itself there is a snippet code defined using JQuery to get the value of a list item selected. But upon executing the script for extracing or retrieving that value, an error message is triggered. The error message itself is stated in the title of this article which is “name is not a function”. To be more specific, “name” is referring on the name of the function summoned to retrieve the value. Below is the image displaying on the actual error message :

JQuery error message name is not a function
JQuery error message name is not a function

To be more specific, the error presented in the above image is generated from a plugin named Firebug. It is a plugin specifically added and installed in a Mozilla Web Browser. Since JQuery is a Javascript which is a client-side scripting language, it need an additional helper in form of a tool to assess or to check whether the snippet code run and executed is grammatically correct. The error shown that there is shown below :

var element_value = $("#list_selection ul li:selected").value();

But firebug declared that value is not a function. In this context, value referred on the .value() summoned which is expected to retrieve the value attribute of a selected list item located in an HTML element which has an id of list_selection. The snippet code above expected to get the value of a selected list item associated from the following HTML snippet code :

<div id="list_selection_sample">
<ul>
<li value="PostgreSQL">PostgreSQL</li>
</ul>
</div>

To be able to extract the value of a selected list item HTML element there is the right and effective way to do it. It is by declaring the following snippet code for repairing the previous Javascript based on JQuery and also the HTML list element declaration as shown below :

var element_value = $("#list_selection li").attr("value");

As shown in the above declaration of a variable named element_value, it retrieves the value attribute from the point of view of Unordered List represented by an “<ul>” tag HTML element and not on “<div>” tag HTML element as shown in the previous snippet code. Since the focus is on the Unordered List which is represented by an “<ul>” tag HTML element, the id name must be moved from the “<div>” tag HTML element to “<ul>” tag HTML element so that JQuery can refer to the right HTML element. After finding the right Unordered List represented by “<ul>” tag HTML element identified by an unique id named “list_selection_sample”, it will further be checked on the inner HTML element which is represented by “<li>” tag HTML element.

<div>
<ul id="list_selection_sample">
<li value="PostgreSQL">PostgreSQL</li>
</ul>
</div>

So, to be able to get the value “PostgreSQL” from the list item HTML element above described, just repair and redefine the snippet code as shown previously :

var element_value = $("#list_selection li").attr("value");

The above snippet code can be described as follows : the variable named element_value will have the value of the attribute named value of the list item insert the unordered list with the id of list_selection.

Leave a Reply