JQuery Mobile - ListView - Get the selected item

Question

I have looked at other questions on this and so far I haven't been able to solve the issue that I've got:

HTML :

        <script type="text/html" id="searchPickPlaceTemplate">
                 <div class="searchpickwhere_box">
                     <ul data-role="listview" data-inset="true"></ul>
                 </div>
         </script>
         <div id="searchPickPlace"></div>

I have created a jsfiddle here : http://jsfiddle.net/antaeusa/TLGY7/2/ Since I am dynamically adding items to the listview. I have also given each item an id to easily identify what item has been clicked, so that I can pass that value to another page.

Solution 1

You had some errors in your javascript and html files.

In Jquery Mobile when defining a listview you must include data-role="listview" to the definition of a ul, that way jquerymobile will understand that you want a listview and not a "normal" list.

<ul data-role="listview">
  <!-- List Elements -->
</ul>

The second error you had was that there is no data-name attribute defined on the html, and you were trying to get it with javascript.

$('#searchPickPlace ul').children('li').bind('touchstart mousedown', function(e) {
    alert('Selected Name=' + $(this).attr('data-name'));
});

This obviously won't work if the selected element does not have defined that attribute. So you must define it on the html, like this:

<div id="searchPickPlace">
    <ul data-role="listview">
        <li data-name="Remuera"><!-- List element content --></li>
        <li data-name="Posonby"><!-- List element content --></li>
    </ul>
</div>​

I modified your code and here is the full solution to your problem, hope it helps:

http://jsfiddle.net/TLGY7/12/

Note: If you're going to dynamically add more elements to the listview you must call the $('.selector').listview('refresh'); method on every element added. Here's the link to the docs:

http://jquerymobile.com/demos/1.2.0/docs/lists/lists-methods.html

Solution 2

I know i am too late for the answer but might be helpful to other developers.Even i found this link when i was looking for same query and finally i have found some grate and easy solution.

In here i have use with static array but same thing i have use with dynamic array so you can easily check that difference.

I have use custom list view and retrieving data from HTML 5 database (Phone Gap). So Mobile developer can write code as bellow,

function DB_QuerySuccess(tx, results) {
    console.log("Returned rows = " + results.rows.length);
    var com_id_array = []; // init array     
    var com_name_array = []; // init array
    var com_img_array = []; // init array

    //this will return user_id if user exist else return "no user"
    if (!results.rowsAffected)
    {
        for (var index = 0; index < results.rows.length; index++) 
        {
            var item = results.rows.item(index);
            var com_id = item.com_id; // company id
            var com_name = item.com_name; // company name
            var com_photo = item.com_photo; // company name
            com_id_array.push(com_id);
            com_name_array.push(com_name);
            com_img_array.push(com_photo);

              $('#ls_com_list').append('<li><img id="com_img" src="'+ com_img_array[index] +'" width="100px" height="100px"/><h3>'+com_name_array[index]+'</h3><p>'+com_id_array[index]+'</p><div align="right"><img src="img/add_icon.png" width="20px" height="20px"/><img src="img/icon-action-close.png" width="20px" height="20px" onclick=\'alert("i am at "+"'+ [index]+'"+" position")\'/></div></li>').listview('refresh');
        }
    }

}

So, when you click on Right side button Alert will pop up and show current index.

I think Web developer can also same thing.

I hope this will help you guys.

• Live Demo : Custom List View
• Get Code