1 Replies - 219 Views - Last Post: 12 June 2019 - 10:17 AM

#1 eyfrans   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 8
  • Joined: 29-March 19

How to select a particular <li> item and get its ID via js/jqu

Posted 12 June 2019 - 02:48 AM

Hey everyone!

I'm facing a problem and I don't seem to be able to find a solution, so I'm hoping any of you could help me.

I need to implement a dynamic list in my site which automatically updates on key strokes of they keyboard (that part works fine) through an ajax code interacting with my servlet. No problems whatsoever there

I send my items (user.name user.surname user.id) through a json and need to implement a dynamic list.
Again I can print the list just fine.

Here comes the problem though. I need to implement an that handler whenever one of the list items is clicked copies its text in an input box of the same page.

How can I accomplish this?

So far I've been able to implement a click listener but whenever I go to copy its content in the input box it copies the ENTIRE list, which is not what I want.

I have tried adding an unique id to each <li> item but I am still missing something, like how to detect that particular item was clicked and not another or the entire list.

Hope I was clear enough in my description of the problem, if not feel free to ask. Also, code snippets below

html
<input type="text" id="author" name="author"><input type="submit" name="addAuthor" value="+" id="add_button">
<div class="compose_article_input" id="div-utenti">
<ul id="authorPick">                                           
</ul>
</div>



js/jquery
function createElement(user){
        var nome = $("<b>").html(user.name);
        var cognome = $("<b>").html(user.surname);
        var id = $("<b>").html(user.id);
    return $("<li>").attr({"href": "#", "id" : "id_" + user.id}).append(user.name + ", " + user.surname + " " + "(" + user.id + ")");
}

function stateSuccess(data){
    var authorId = $("#authorPick");
    $(authorId).empty();
    for(var instance in data){
        $(authorId).append(createElement(data[instance]));
    }
}

function stateFailure(data, state){
    console.log(state);
}

$(document).ready(function() {
    $("#author").keyup(function(event){ 
       $.ajax({
          url: "suggest.json", 
          data: {cmd: "author",
                 toSearch: event.target.value
          },
          dataType: 'json',
          success: function(data, state){stateSuccess(data);},
          error: function(data, state){stateFailure(data, state);}
       });
    });
    
    $("#authorPick").click(function () {
        console.log("click");    
        //$("#author").val("something");
    });
    
});




Is This A Good Question/Topic? 0
  • +

Replies To: How to select a particular <li> item and get its ID via js/jqu

#2 ArtificialSoldier   User is offline

  • D.I.C Lover
  • member icon

Reputation: 2334
  • View blog
  • Posts: 7,111
  • Joined: 15-January 14

Re: How to select a particular <li> item and get its ID via js/jqu

Posted 12 June 2019 - 10:17 AM

Your click handler is on the entire list. The easiest way is to put the click handler on each li element.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1