Как получить динамически созданные данные в диалоговом окне по щелчку списка

Question

Как получить динамически созданные данные в диалоговом окне по щелчку списка

Я создаю представление списка динамически, но я понятия не имею, как я получаю данные из выбранного списка, чтобы появиться в диалоговом окне. Я пробовал несколько способов, но все не удалось. Единственное, что у меня получается, - это вызов диалога по клику.

Я хочу отобразить все сообщение во всплывающем диалоговом окне

мой код

<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

jquery-mobile

Источник

user662723 08 май '13 в 10:27

1 ответ

Решение

Другие вопросы по тегам jquery-mobile

user1771795 08 май '13 в 10:45 2013-05-08 10:45 · Accepted Answer · 2013-05-08 10:45

обновленный

На основании вашего комментария, чтобы прочитать любые данные родительского элемента, используйте .closest(),

Просто прочитайте текст <a> и добавьте его в диалог. Я использовал div #msg для демонстрационных целей.

демонстрация

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