2013-05-08 38 views
2

我創建了一個動態列表視圖,但我不知道如何從選定列表中獲取數據以顯示在對話框中。我嘗試了幾種方法,但都失敗了。我唯一正確的做法是在點擊時調用對話框。如何將動態創建的數據導入到listview對話框中單擊

我想在彈出的對話框中

我的代碼

<body> 
    <div data-role="page" id="messages"> 
      <div data-theme="a" data-role="header"> 
      <a data-role="button" href="index.html" data-transition="slide" 
       data-icon="arrow-l" data-iconpos="left" class="ui-btn-left"> 
        Back 
       </a> 
      <a href="#" onclick="window.location.reload()" data-icon="back" data-iconpos="notext">Refresh</a> 
       <h3> 
        Alerts 
       </h3> 
      </div> 
      <div data-role="content">   
      <script type="text/javascript"> 
          $(document).on("pagebeforeshow", "#messages", function() { 
          var uid = $.cookies.get('uid'); 
          if(uid == null){ 
           $.mobile.changePage("account-login.html", { transition: "slide"});} 
            $(function(){ 
           $.getJSON("ajaxResponder.php?method=messages",function(data){ 

              var htmlString =""; 

               $.each(data.messages,function(index,item){ 
               htmlString +='<li data-name='+item.msgid+'><a href="#">'+ 
                   '<h3 class="topic">'+item.subject+'</h3>' + 
                   '<p>From: '+item.sender+'</p>' + 
                   '<p>Date: '+item.added+'</p>' + 
                   '<p>'+ item.message +'</p></a></li>' ; 

               }); 

               $('#list').html(htmlString); 
               $('#list').listview('refresh'); 
              }); 
          }); 
          });  
         </script> 
       <ul id="list" data-role="listview" data-theme="d"></ul> 
     </div> 
     <script> 
$('#list').on('click', 'li', function() { 
    $.mobile.changePage("#dialog", { 
     role: "dialog" 
    }); 
    });  
     </script> 
</div> 
<div data-role="page" data-rel="dialog" id="dialog" data-theme="c" data-close-btn="right"> 
    <div data-role="header" data-position="fixed" data-theme="b"> 
     <h1>New values added!</h1> 

    </div> 
    hello 
<!-- display item.message here --> 
    </ul> 
</div>  

</body> 
</html> 

回答

2

更新

基於您的評論,閱讀父元素的任何數據,利用顯示整個消息.closest()


只讀取<a>按鈕的文本並將其附加到對話框中。我使用div #msg進行演示。

Demo

$('#list').on('click', 'li a', function() { 
var text = $(this).closest('li').attr('data-name'); 
$('#msg').empty(); 
$('#msg').append(text); 
$.mobile.changePage("#dialog", { 
    role: "dialog" 
}); 
}); 
+0

這個偉大的工程,但如果我只希望item.message傳遞,可我卻在另一個但一類可能隱藏? – 2013-05-08 10:53:27

+0

是的,我希望能夠將消息和ID發送到對話框(2個變量),然後創建一個刪除/讀取按鈕並在關閉時執行它們,而不是再次請求數據。 – 2013-05-08 11:02:36

相關問題