CODEWITHSUNDEEP
javascriptjqueryhtmljquery-mobilelocal-storage
MarkZ
MarkZ

Reputation: 280

How to get ID of listview item Clicked. [javascript / jquery / jquery mobile]

I need advice on how to detect which <li> is tap/click by the user, then write the 'ID' of the tap/clicked <li> into Localstorage, then use the saved Localstorage to retrieve data for Detail Page.

I'm new to javascript/jquery, if you can provide some simple example code will be very much appreciated.

I know how to write Localstorage, read Localstorage, get JSON data from server API, generate Loop for Listview with unique ID for each <li>.

What I need is, how to use JS to make <li> clickable (link to Detail Page) and write to Localstorage at the same time.

I have tried:

$('.liClass').click(function() { //block of code to write Localstorage };

But the <li> is not clickable and no key/value written to Localstorage. Not to mention to detect which <li> is clicked (this I have no idea).

Please advice, thank you.

Code update:

//Show restaurant listing - NOTE: This is not first page. Link from other Page.

$('#restaurantList').on("pagebeforecreate", function() {
    $.getJSON("http://mydomain.com/api/restaurant", function( data ) {
        function rstListing(data) {
            if ($.isEmptyObject(data) === true) {
                alert ('JSON return empty');
        } else {
            for (i=0; i<data.length; i++){
                $('#restaurantListing').append('<li id="' + data[i].restaurant_id + '" class="rstList"><img src="http://mydomain.com/file/img/' + data[i].restaurant_logo + '"><h2>' + data[i].name + '</h2><p>' + data[i].city + '</p></li>');
                $('#restaurantListing').listview('refresh');
            }
        }
        }
        rstListing(data);
    }
              );
});

//Listview link to Detail Page

$(document).ready(function(){
  $('.rstList').click(function() { 
     var id = $(this).attr("id"); // Get the ID
      alert(id);
      console.log(id);
  });
});

Also tried:

//Listview link to Detail Page

$('#restaurantList').on("pageload", function() {
  $('.rstList').click(function() { 
     var id = $(this).attr("id"); // Get the ID
      alert(id);
      console.log(id);
  });
});

Upvotes: 0

Views: 7412

Answers (4)

MarkZ
MarkZ

Reputation: 280

I have solved my problem with the example code provided by stackoverflow member here. My previous problem is because I separate the creation of the listview and bind the click listener in two different page event.

After testing the page event sequence, I'm now putting the click listener into the same page event instead of separate to two. Now my code look like this, hope this will help someone bump into the same problem as me:

//Show restaurant listing
$('#restaurantList').on("pagebeforecreate", function() {
    alert('pagebeforecreate event triggered');
    $.getJSON("http://mydomain.com/api/restaurant", function( data ) {
        function rstListing(data) {
            if ($.isEmptyObject(data) === true) {
                alert ('JSON return empty');
        } else {
            for (i=0; i<data.length; i++){
                $('#restaurantListing').append('<li id="' + data[i].restaurant_id + '" class="rstList"><img src="http://mydomain.com/file/img/' + data[i].restaurant_logo + '"><h2>' + data[i].name + '</h2><p>' + data[i].city + '</p></li>');
                $('#restaurantListing').listview('refresh');
            }
        }
        }
        rstListing(data);
        alert('rstListing() executed');
        $('.rstList').click(function() {
            alert($(this).attr("id"));//Get id of clicked li
            localStorage.setItem($(this).attr("id"),$(this).attr("id")); //stored into localStorage
            alert("Data from localStorage "+localStorage.getItem($(this).attr("id"))); // get stored id
        });
    }
              );
});

Upvotes: 0

Kyo
Kyo

Reputation: 964

You will need to use the event delegation to assign the click event since you are building the HTML DOM dynamically via JSON request, thus not being able to locate the 'li' elements at the time of the page load. So, it would look like:

$(document).on("click", ".rstList", function (event) {
    // click event
}

See this link for more details:

jQuery event delegation

Upvotes: 0

Akhlesh
Akhlesh

Reputation: 2399

$('.liclick').click(function() {
   alert($(this).attr("id"));//Get id of clicked li
   localStorage.setItem($(this).attr("id"),$(this).attr("id")); //stored into localStorage
   alert("Data from localStorage "+localStorage.getItem($(this).attr("id"))); // get stored id
});

Working Fiddle

Upvotes: 1

A.M.N.Bandara
A.M.N.Bandara

Reputation: 1508

You don't need to make any <li> element to be clickable by your self, when you add the click event to any element, that will be triggered when the item is clicked.

Your problem will basically be that the element is not loaded when the event is bind to it. So you have to add your code inside document ready event like this.

$(document).ready(function(){
  $('.liClass').click(function() { 
     var id= $(this).attr("id"); // Get the ID
  };
});

Upvotes: 4

Related Questions