Question

I am trying to create a sub listview page separate from the typical caged one:

This is what I’m trying to do:

STEP1 – Loops gets all the data and creates the list in the listview:

$(document).ready(function() {

     var data = {"id":[{"id":1,"title":"title1","bodytext":"sometext 1"},{"id":2,"title":"title2","bodytext":"sometext 2"},{"id":3,"title":"title3","bodytext":"sometext 3"}
                   }]

    var output = ''

    $.each(data.id, function(index, value){

       output += '<li><a href="#mypage">'+value.title+'</a></li>';

       $('#mypage').text(value.title); //will this be different for each item?

    });

    $('#mylistview').html(output).listview('refresh'); //Refresh the listview with new added data

});

STEP 2:

The listview now looks like this:

<ul id-"mylistview">
   <li><a href="populate_#mypage_with_data_from_item_1">title1</a></li>
   <li><a href="populate_#mypage_with_data_from_item_2">title2</a></li>
   <li><a href="populate_#mypage_with_data_from_item_3">title3</a></li>
</ul>

STEP 3:

I have a pre-made template:

<div id="mypage">
Data from selected item goes here
</div>

So, if I click on list item 1 mypage will look like this:

<div id="mypage">
Sometext 1
</div>

or if item 2 is clicked:

<div id="mypage">
Sometext 2
</div>

My problem is that no matter which item I click in the listview I always get the data from item 1.

How can I maker it so each item has it’s own data displayed?

Answer 1

$(document).ready(function() {
    var data = {"ids":[
         {"id":1,"title":"title1","bodytext":"sometext 1"},
         {"id":2,"title":"title2","bodytext":"sometext 2"},
         {"id":3,"title":"title3","bodytext":"sometext 3"}]};

    var output = '',
        myPages = $('.mypage'),
        container = $('#mylistview');

    $.each(data.ids, function(index, value){
       output += '<li><a href="#mypage">'+value.title+'</a></li>';
       myPages.eq(index).text(value.bodytext);
    });

    container.html(output);

    container.on('click', 'a', function(e){
        e.preventDefault();
        var links = container.find('a');
        alert(myPages.eq(links.index(this)).text());
    });
}); 

Demo: http://jsfiddle.net/mDnE6/