6

First of all, I have to mention that I am a newbie in the JavaScript and JQuery world. I am not sure if I put down an appropriate title for my question but I'll try my best to explain my problem.

Scenario: I have a list of items whose names are being displayed. When one of the items is being clicked, a popup should show up and display the description of the item. The description is retrieved from the server via an AJAX call upon the click. The AJAX call requires the unique id of the item (in the database) to be provided. Here comes my problem which has two parts:

  1. I don't know how and where to include the item id in the HTML. Note that the list only displays item name not id.
  2. Assume 1) is resolved, how can I pass the id of the item that's being clicked to the AJAX call.

This is the HTML of the list of items. As you can see, it illustrates part 1) of my problem (ie. don't know how to include the ids in the 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>

Below is the JQuery click event handler that sends the AJAX call (ie. getJSON) to the server. Note that the part 2) of the problem is illustrated by the line var item_id = ??. Note that popup is a 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 Info: For the server side I use Django 1.3, and JQuery 1.5.2 for the client side. I hope I have made my question clear and I appreciate any help from you experts. Thanks.

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

Improve this question

4 Answers 4

Reset to default
15

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

The < li > tag supports the following standard attributes: id Specifies a unique id for an 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>
Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

ARTstudio - thanks for your answer. I feel this approach is more or less a hack given that parsing is needed. Is this a common approach? And would you use the same approach if the key involved is not of a single attribute but made of multiple? Acolyte's approach below is interesting. How would you compare your approach to his? Sorry for so many follow-up questions. Like I mentioned, I am a newbie in this world, so I am curious about everything. :)
w3fools.com might be of interest here being that you've given an "authoritative" reference to w3shools.
@AJP thanks for the useful link. I never seen this resource before.
5

Javascript (and jQuery in particular) are used for client-side scripting. As such, you will need to supply the data within the HTML document. You can use jQuery' Metadata plug-in to supply the item ID:

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

and retrieve it via:

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

2 Comments

Acolyte - Thanks for your answer. I am interested in your approach. How popular is the use of jQuery Metadata plug-in? How would this approach to ARTstudio's approach? Do you know any useful resources for me to learn jQuery Metadata plug-in?
I cannot really tell how popular it is, but I would certainly used it to convey additional information per element because the plugin is easy and straightforward to use. ARTStudio' approach is fine as far as there are no nodes with exact same IDs AND when your requirements are to pass the identifier and nothing else. There is not much to learn about this plug-in, but if any, look into documentation. All it does is storing Javascript data in a string and retrieving it with eval().
0

If your item names are unique, then send the item names via Ajax.That way you can avoid Item ID's.

Improve this answer

Comments

0

HTML5 natively supports data attributes that can be easily accessed with 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 code will work.

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

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.