Jquery Mobile ListView Clicked Item - передать параметр на другую страницу - PullRequest
Новая
       14

Jquery Mobile ListView Clicked Item - передать параметр на другую страницу

2 голосов
/ 31 января 2012

У меня есть страница index.html.Также эта страница содержит много страниц, таких как #home, #list #contacts и т. Д.

в #list части я динамически получаю данные с моей веб-страницы и генерирую просмотр списка.Я хочу, чтобы, когда пользователь щелкнул любой из элементов списка, перенаправил на страницу #imageDetail и передал URL-адрес изображения на страницу и показал изображение

, вот часть страницы #imageDetail 

    <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>

И нижеcode - это мой javascript-код для динамического получения данных json. 

    <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>

Проблема в том, что после изменения страницы alert(brewername) срабатывает.Но перечислите все изображения URL-адреса, перечисленные в просмотре списка, а не мои выбранные.

Как я могу исправить эту проблему

Заранее спасибо.

Ответы [ 3 ]

1 голос
/ 31 января 2012

Ну, это мой путь, и он работает очень хорошо.

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;
}

Это работает для меня как шарм, и я использую его очень часто!

1 голос
/ 31 января 2012

jQM Документы:

Это просто цитирование документов, но если вы прочитаете страницу, это должно дать вам представление о том, как этого добиться..

Приложение использует ссылки с URL-адресами, которые содержат хэш, который сообщает приложению, какие элементы категории отображать: 

<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>
0 голосов
/ 14 октября 2013

прямое событие устарело, используйте 'on',

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

...