Jquery Mobile Listview Clicked Item - 將參數傳遞給另一頁

Question

我有一個index.html頁面。此頁面還包含很多像#home，#list #contacts等頁面。

#list部分我動態地從我的網頁獲取數據並生成listview。我想，當用戶單擊任何列表項的，重定向到#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> 

而下面的代碼是我的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)火災。但列出所有圖像在列表視圖中列出的網址不是我選擇的。

我該如何解決這個問題

在此先感謝。

Answer 1

JQM文件：

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

這只是引用了文檔，但如果你讀的頁面應該給你如何做到這一點的想法。

應用程序使用與包含散列告訴 應用什麼類別的項目，以顯示網址鏈接：

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

Answer 2

好了，這是我的路，而且運作非常良好。

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

這個工作對我來說就像一個魅力，我使用很頻繁！

Answer 3

現場活動已被棄用， '在' 使用，

exmple：$（ 「＃detailedIMAGE」）上（ 「pagebeforeshow」 功能（即數據）{//代碼}）;