CODEWITHSUNDEEP
jquerylistviewjquery-mobile
Marc Intes
Marc Intes

Reputation: 737

Getting the value of a clicked listview item

I have here a sample code of listview that contains items and it redirects to another page after clicking one item, but i want to get the value of the item I clicked in the listview when redirecting to the other page. I am guessing that this needs a function to be triggered in order to get the value but I do not know where do I start.

Here is my code:

<div id="ContentPage" data-role="page" >

    <div data-role="content">
        <ul id="viewlist" data-role="listview" data-filter="true" data-filter-placeholder="Contents" data-inset="true">
            <li><a href="#EditPage">apples</li>
            <li><a href="#EditPage">cats</li>
            <li><a href="#EditPage">bears</li>
            <li><a href="#EditPage">cat</li>
            <li><a href="#EditPage">dog</li>
            <li><a href="#EditPage">tiger</li>
            <li><a href="#EditPage">chicken</li>
        </ul>
    </div>

</div>


<div id="EditPage" data-role="page" >

    <div data-role="header" data-position="fixed">
        <a href="#ContentPage" data-role="button" data-icon="back">BACK</a>
    </div>

    <div data-role="content">
            //i want to display the item i clicked from the listview here
    </div>

</div>

I am stuck with this problem right now and a little confused. Any help or advice will be gladly accepted. Thanks in advance.

Upvotes: 1

Views: 1291

Answers (2)

Issac Balaji
Issac Balaji

Reputation: 1441

<title></title>

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>



     <script type="text/javascript">


       var jsonCategory = '{"Categories":[{"category_id":"1", "car_name":"BMW"},{"category_id":"2", "car_name":"Chevrolet"},{"category_id":"3", "car_name":"Toyota"}]}';

                        var json_parsed = $.parseJSON(jsonCategory);

                        for (var u = 0; u < json_parsed.Categories.length; u++){
                            var cars= json_parsed.Categories[u];


         $('#categoryList').append('<li  data-categoryId = "'+cars.car_name+'"> <a href="#" >' + cars.car_name+ '</a>' );

            }
$('#categoryList').delegate('li', 'click', function() {
    var x = $(this).data('categoryid');
    alert(x);
});

                </script>                    


            </ul>


    </div>

Upvotes: 0

Pranav C Balan
Pranav C Balan

Reputation: 115282

You can use click() to handle the click event

$('#viewlist li').click(function(e){
   e.preventDefault();
   alert($(this).text());
});

Fiddle Demo

Use e.preventDefault() for prevent browser default action on click event.

Upvotes: 2

Related Questions