Question

I have a <ul> with each <li> having an id like <li id='entry24'>. When one is clicked, I need to query the server for that entries information, by sending a get request to /query/getEntry/id=24.

Using this code:

for(var entry = 0; entry < entryIds.length; entry++) {
    $("#entry" + entryIds[entry]).click(function() {
        $.get(
            "/query/getEntry",
            {id: entryIds[entry]},
            getEntryCallback,
            "html"
        )
    });
}

I found that every request was sending the same id – the id of the last entry. After some research, I modified my code to this:

for(var entry = 0; entry < entryIds.length; entry++) {
    var entryId = entryIds[entry];
    $("#entry" + entryId).click(function(event) {
        $.get(
            "/query/getEntry",
            {id: event.target.id.replace("entry", "")},
            getEntryCallback,
            "html"
        )
    });
}

which works better (each <li> sends the correct id). However, looking at the Firebug console I can see requests being made with each click, but about 75% of the time they show /query/getEntry/id= in red.. meaning the id wasn’t actually sent and I didn’t get the results I was expecting.

I can confirm that every <li> DOES have an appropriate id field.

Any help/advice MUCH appreciated!

Answer 1

Try this,

$('ul li').click(function(){
    entryid = $(this).attr('title');
    $.get(
        "/query/getEntry",
        {id: entryid.replace("entry", "")},
        getEntryCallback,
        "html"
    )
});

For your html, define the entry id in a title attribute for all <li>s in your <ul>

This should work if am not wrong since the AJAX function is called only when an <li> is clicked and the title attribute is unique to each <li> resulting in a unique id each time.