Jquery Mobile Listview Clicked Item - Pass parameter to another page

Question

I've a index.html page. Also this page contains lots of page like #home, #list #contacts etc.

in #list part i dynamically get data from my webpage and generate listview. I want that, when user click any of list item, redirect to #imageDetail page and pass image URL to page and show image

here is the #imageDetail page part

    <div data-role="page"  id="detailedIMAGE" data-theme="a">
      <div data-role="header" data-theme="b" data-position="fixed">
        <h1>Image Detail</h1>
        </div>
            <div data-role="content">       
            <img id="imageDetayURL" name="imageDetayURL" src="glyphish-icons/158-wrench-2.png"/>
            <input type="text" disabled="disabled" id="brewername" name="brewername" />
            </div>
        </div>  
    </div>

And below code is my javascript code to get json data dynamically.

    <script>
    $('#last5').live("click", function() {
        $.ajax({
            url: "http://mysqlservice.com/getdata.json",
            dataType: 'jsonp',
            success: function(json_results){
                $("#imageListDetay").html('');
                console.log(json_results);
                $('#imageListDetay').append('<ul data-role="listview" id="tweetul" data-theme="c"></ul>');
                listItems = $('#imageListDetay').find('ul');
                $.each(json_results.results, function(key) {
                    html = '<h3>'+json_results.results[key].screen_name+'</h3><span id="detailed_image">'+json_results.results[key].resim_url+'</span><img WIDTH=200 HEIGHT=100 src="http://mywebpage.org/upload/'+json_results.results[key].resim_url+'" /><p class="ui-li-bside"><img WIDTH=8 HEIGHT=13 src="images/07-map-marker.png"/> '+json_results.results[key].adres_data+'</p>';
                    listItems.append('<li><a  name="imageDetayGoster" href="#detailedIMAGE">'+html+'</a></li>');
               });
                $('#imageListDetay ul').listview();
            },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                //error
            }
        });
    })


    $("#detailedIMAGE").live("pagebeforeshow", function (e, data) { 
         var brewername = $('#detailed_image',data.prevPage).text();
         $('#brewername').val(brewername);  
         $('#imageDetayURL').attr('src', 'http://mobil.harmankaya.org/'+brewername);
         alert(brewername);
     });
    </script>

The problem is after page change alert(brewername) fires. But list all image urls that listed in listview not my selected.

How can i fixed this issue

Thanks in advance.

Solution 1

Well, this is my way and works very good.

HTML

<div data-role="page" id="myPage">
<div data-role="content" id="myContent">
    <ul data-role="listview" data-inset="true/false/whatever" id="myList"></ul>
</div>
</div>

Javascript

$("#myPage").live("pageshow",function(event){
       // get your id from LINK and parse it to a variable
    var json_list_callback = getUrlVars()[id];

       // verify the URL id
    if (json_list_callback === '') {json_list_callback === ''} //or what value you want

       // define your path to JSON file generated by the ID declared upper
    var json_URL = 'http://your.path.to.json.file.php.json?id=' + json_list_callback;

       // get the JSON data defined earlier and append to your LIST
    $.getJSON(json_URL,function(data){
        var entries = data;
        //populate our list with our json data
        $.each(entries,function(index,entry){
                // i use dummy data here, you can have whatever you want in youre json
            $("#myList").append(
               '<li>' +
                        // remember that this "page.html?id=' + entry.json_id + '" will be the link where getUrlVars will get the id declared earlier in function
                  '<a href="page.html?id=' + entry.json_id + '">' + entry.json_title + '<\/a>' +
               '<\/li>'
            );
        });
          //must refresh listview for layout to render
        $("#myList").listview("refresh");
    });
});
    //this function gets from URL the id, category, whatever you declare like this: getUrlVars()['id'] or getUrlVars()['category'] after last symbol of "?"
    // you can define your own symbol with this function
function getUrlVars() {
var vars = [],
    hash;
var hashes = window.location.href.slice(window.location.href.lastIndexOf('?') + 1).split('&');
for (var i = 0; i < hashes.length; i++) {
    hash = hashes[i].split('=');
    vars.push(hash[0]);
    vars[hash[0]] = hash[1];
}
return vars;
}

This works for me like a charm and i'm using it very often!

Solution 2

jQM Docs:

• http://jquerymobile.com/test/docs/pages/page-dynamic.html

This is just quoting the docs but if you read the page it should give you an idea on how to accomplish this.

The application uses links with urls that contain a hash that tells the application what category items to display:

<h2>Select a Category Below:</h2>
<ul data-role="listview" data-inset="true">
    <li><a href="#category-items?category=animals">Animals</a></li>
    <li><a href="#category-items?category=colors">Colors</a></li>
    <li><a href="#category-items?category=vehicles">Vehicles</a></li>
</ul>