How to dynamically pass parameter to jQuery click event from HTML elements?

Question

First of all, I must mention that I am new to the world of JavaScript and jQuery. I'm not sure if I put the right headline for my question, but I will try my best to explain my problem.

Scenario: I have a list of items whose names are displayed. When one of the elements is clicked, the popup should display and display the description of the element. Description is retrieved from the server via an AJAX call when clicked. An AJAX call requires a unique identifier for the item (in the database). Here is my problem, which consists of two parts:

• I do not know how and where to include the element identifier in HTML. Please note that only the name of the element is displayed in the list, not id.
• Suppose 1) it is allowed how I can pass the identifier of the element that clicked on the AJAX call.

This is an HTML list of items. As you can see, this illustrates part 1) of my problem (i.e. I don’t know how to include identifiers in HTML).

<ul> <li class="item">Item1</li> <!-- this item has id=1 in the database --> <li class="item">Item2</li> <!-- this item has id=2 in the database --> <li class="item">Item3</li> <!-- this item has id=3 in the database --> </ul> 

The following is a jQuery event handler that sends an AJAX call (i.e. getJSON) to the server. Note that part 2) of the problem is illustrated by the line var item_id = ?? . Note that the popup is self-defined javascript.

  <script type="text/javascript" charset="utf-8"> $(document).ready(function() { $(".item").click(function() { var item_id = ?? var data = {"item_id":item_id}; $.getJSON("/item/json", data, function(data) { var name = data[0]["fields"]["name"] var description = data[0]["fields"]["description"] popup.call(this, name, description); }); }); }); </script> 

Additional Information:. For the server side, I use Django 1.3 and JQuery 1.5.2 for the client side. I hope I have set my question clear, and I appreciate any help from your experts. Thanks.

Here is an example similar to what I'm looking for. http://esdi.excelsystems.com/iseries400apps/exmain.pgm?wsname=DIALOG.pgm&wsnumb=214&wsprogtype=P

Answer 1

http://www.w3schools.com/tags/tag_li.asp

li> supports the following standard attributes: id Indicates the unique identifier of the element

In this case, use:

 <ul> <li class="item" id="item_1">Item1</li> <!-- this item has id=1 in the database --> <li class="item" id="item_2">Item2</li> <!-- this item has id=2 in the database --> <li class="item" id="item_3">Item3</li> <!-- this item has id=3 in the database --> </ul> 

and

 <script type="text/javascript" charset="utf-8"> $(document).ready(function() { $(".item").click(function() { var item_id = $(this).attr('id').replace('item_',''); var data = {"item_id":item_id}; $.getJSON("/item/json", data, function(data) { var name = data[0]["fields"]["name"] var description = data[0]["fields"]["description"] popup.call(this, name, description); }); }); }); </script> 

Answer 2

Javascript (and jQuery in particular) are used for client scripts. Thus, you will need to provide the data in the HTML document. You can use the jQuery ' Metadata plugin to deliver the item id:

 <li class="item" data="{ItemID: 'Your_Item_ID'}">Item1</li> 

and get it through:

 var item_id_structure = $(this).metadata().ItemID; 

Answer 3

If your item names are unique, submit the item names via Ajax. This way you can avoid Item ID.

Answer 4

HTML5 natively supports data attributes that can be easily accessed using jquery

http://api.jquery.com/data/#data-html5

For example, given the following HTML:

<div data-role="page" data-last-value="43" data-hidden="true" data-options='{"name":"John"}'></div> 1

All of the following jQuery codes will work.

 $( "div" ).data( "role" ) === "page"; $( "div" ).data( "lastValue" ) === 43; $( "div" ).data( "hidden" ) === true; $( "div" ).data( "options" ).name === "John";