CODEWITHSUNDEEP
jqueryjquery-mobile
StackFlower
StackFlower

Reputation: 721

get clicked value from listview

I have created a dynamical listview with jQuery Mobile and I want to get the value of the clicked list item. The reason I want to achieve this is because I need this value to link to another page and show more details about the clicked item.

I already have searched around the internet and I found a solution which doesn't work for me.

My (jQuery Mobile) page looks like this:

<div data-role="page" id="personList">
    <div data-role="header" data-position="fixed">
        <h1>header</h1>
    </div>

    <div data-role="content">
    </div>

    <div data-role="footer" data-position="fixed">
        footer
    </div>
</div>

My function to dynamically add items to the listview looks like this:

(I used HTML5 SQL web storage to store data local on a device)

function showPersons() 
{
  db.transaction (function (transaction)
  {
//get data from table
var sql = "SELECT * FROM person";
transaction.executeSql (sql, undefined, 

//loop through sql result and add results to html variable
function (transaction, result)
{
  var html = "<ul id=" + "personListview" + "data-role=" + "listview" +" data-filter=" + "true" + ">";


  if (result.rows.length) //if there is something found
  {
    for (var i = 0; i < result.rows.length; i++) 
    {
      var row = result.rows.item (i);
      var voorNaam = row.voorNaam;
      var achterNaam = row.achterNaam;
      var email = row.email;

        html += "<li data-theme='e'" + "data-name='test value'>" + "<a href='#'>" +  "<h3>" + voorNaam + " " + achterNaam + "</h3><p>" + email + "</p></a></li>";

    }
  }
  else //if there is nothing found
  {
    html += "<li> No persons found </li>";
  }

  html += "</ul>";

  //Change page
  $("#personList").unbind ().bind ("pagebeforeshow", function ()
  {
    var $content = $("#personList div:jqmData(role=content)");
    $content.html (html);
    var $ul = $content.find ("ul");
    $ul.listview ();
  });

  $.mobile.changePage ($("#personList"));

}, error);});}

As you can see, I added "data-name='test value'" to the "li" tags so I should get this value with the following function:

$('#personListview').children('li').click(function() {
alert($(this).attr('data-name')); });

However, this last function doesn't work. Nothing happens when I click at an "li" item. I would expect I get an alert with the value of "data-name").

PS. even when I have declared this, I doesn't get an alert:

$('#personListview').children('li').click(function() {
    alert('test');

Could someone help me? I am a beginner with Javascript and jQuery(mobile).

Thanks in advance!

Upvotes: 3

Views: 6667

Answers (3)

Piotr Krysiak
Piotr Krysiak

Reputation: 2815

Try to change your click event to something like this (I suggest and assume that your <ul> has a class which is yourclass):

$("#personlist").live('pageinit', function() {   
    $('.yourclass').live('vclick', function(e) {
         alert($(this).attr('data-name').val();
    }  
}

Check also this line in your current code:

alert($(this).attr('data-name').val();

Look at your <li> definition. It should start with <li>:

<li><a href="bmw.html">BMW</a></li>

Your html formatting may not proper. Try to do it as showed in my example:

<li><a class="yourclass" href="#" id="' + id + '" ><h1>' + label + '</h1><p>'+ customer + '</p></a></li>

Try to change your html <li> item, then add event handler:

$("#personlist").live('pageinit', function() {   
    $('.yourclass').live('vclick', function(e) {
        alert($(this).attr('data-name').val();
    }  
}

In case of formatting problems check this out: jQuery Docs.

Upvotes: 0

Baked Inhalf
Baked Inhalf

Reputation: 3735

$("#myListview").on("click", "li", function() { 
     alert( $(this).attr("data-name") ); 
};

Upvotes: 0

Steven Hunt
Steven Hunt

Reputation: 2321

Your code:

"<ul id=" + "personListview" + "data-role...

outputs to:

<ul id=personListviewdata-role...

Your javascript needs to read:

'<ul id="personListview" data-role=....'

Notice that I'm using single quotes at the beginning so I can use double quotes throughout.

Also, I would recommend giving each <ul> its own ID, or using a CSS class on it and then binding the event with $('.myclass').click(function() { ... });

Upvotes: 1

Related Questions