Jquery Mobile Listview Clicked Item - 別のページにパラメータを渡す

Question

私はindex.htmlページを持っています。また、このページには、#home、#list #contactsなどのページがたくさん含まれています。

#listの部分には、私のWebページから動的にデータを取得し、リストビューを生成します。私は#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のです、ここで

ユーザーがリスト項目のいずれかをクリックすると、#imageDetailページにリダイレクトし、ページに画像のURLを渡す、ということと、ショーの画像たいです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は選択されていません。私は

事前のおかげで、この問題を修正するにはどうすればよい

。

Answer 1

jQMドキュメント：

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

これは単にドキュメントを引用されていますが、ページを読めば、それはあなたにこれを実現する方法についてのアイデアを与える必要があります。

アプリケーションがディスプレイにどのようなカテゴリのアイテム アプリケーションを伝えるハッシュを含む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> 

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"、機能（E、データ）{//コード}）;