Question

I have a list of items that is dynamically pulled from a web service.
It looks like this:

https://i.stack.imgur.com/VfXih.png

What I want to happen, is I want the list item that is clicked, to somehow be declared as a variable….and the information for the clicked item, to be passed onto another page. I have no idea how to go about doing this, and was hoping someone here can point me in the right direction.

So far I have been able to come up with this, but the variable ‘someData’ keeps coming back undefined.

$('#dogs ul').click(function(e) {
var someData = jQuery(this).data('<li>');
alert(someData);
});

}

Here is the code that brings all the information together into the listview:

$(data).find('NewDataSet').each(function(i) {
    var listView = $('<ul data-role="listview" data-inset="true" data-split-theme="b">').data('role', 'listview');

    $(data).find('Table').each(function() {
        var title = $(this).find('ShortDesc').text();
        var description = $(this).find('LongDesc').text();
        var thumbnail = $(this).find('ThumbURL').text();
        var listItem = $('<li/>');
        $('<a href="#"><img id="bla" src="' + thumbnail + '"><div id="desc"><h4>' + title + '</h4> <p> <br/>' + description + '</p></div>').appendTo(listItem);
        $(listItem).appendTo(listView);
    });

    $(listView).appendTo('#dogs');
});


$('#dogs ul').listview();

If anyone could point me in the right direction, or show me what I’m doing wrong it’d be greatly appreciated.

Thanks!

Answer 1

I think you’re pretty close. You can store the data on each li element as they are created using jQuery.data().

$(data).find('Table').each(function() {

    //...

    var tableData = $(this); // 'this', in your example, refers to the Table data
    var listItem = $('<li/>').data('TableData', tableData);
});

To get it back out and pass it along to another page, you can handle the click and post the data to another page. You can also append the data in the querystring if that’s easier.

$('#dogs ul li').click(function(e) {
    e.stopPropagation();
    var tableData = $(this).data('TableData');
    $.mobile.changePage("anotherpage.php", {
        type: "post",
        data: $(tableData).serialize() // I'm not sure of your data format, so serialize() this may not work
    });
});