Elemento en el que se hizo clic en la vista de lista de Jquery Mobile: pasar el parámetro a otra página

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

Gracias de antemano.

preguntado el 31 de enero de 12 a las 16:01

If you're still having issues with this, please feel free to check out my plug-in which allows for clean URL navigation with parameters -

3 Respuestas

Documentos jQM:

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>

Respondido el 31 de enero de 12 a las 20:01

If you are new to jQuery and jQuery Mobile, please search google for documentation about it before going out and make an app using these libraries - Aki

@aki any developer always try to understand all this and then he ask for help.don't be so rude. - Alok Chandra

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!

Respondido el 31 de enero de 12 a las 21:01

Thanks but it is now clear for me. How can i implement your solution to my code. I'm really confused. - Erhan H.

The method described upper is to populate a list with JSON entries through a variable. You can addapt the code very well to your needs. I commented the code to help you more. - Aki

live event has been deprecated, use 'on',

exmple: $("#detailedIMAGE").on("pagebeforeshow", function (e, data){ // code });

Respondido 14 Oct 13, 21:10

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.