2

リスト ビューを動的に作成しますが、選択したリストからデータを取得してダイアログ ボックスに表示する方法がわかりません。いくつかの方法を試しましたが、すべて失敗しました。私が正しく行った唯一のことは、クリック時にダイアログを呼び出すことです。

ポップアップダイアログボックスにメッセージ全体を表示したい

私のコード

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

1 に答える 1

2

更新しました

コメントに基づいて、親要素のデータを読み取るには、を使用します.closest()。

ボタンのテキストを読み取って<a>、ダイアログに追加するだけです。#msgデモ目的でdiv を使用しました。

デモ

$('#list').on('click', 'li a', function () {
 var text = $(this).closest('li').attr('data-name');
 $('#msg').empty();
 $('#msg').append(text);
 $.mobile.changePage("#dialog", {
    role: "dialog"
 });
});
于 2013-05-08T10:45:40.293 に答える