How to get dynamically created data into a dialog box on listview click

Question

I create a list view dynamically, but i have no clue on how i get the data from the selected list to appear in the dialog box. I have tried several ways but all failed. The only thing i have got going correctly is calling the dialog on click.

I want to display the whole message in the pop up dialog box

my code

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

Community · Accepted Answer · 2020-06-20 09:12:55Z

2

updated

Based on your comment, to read any data of the parent element, use .closest().

Just read the text of <a> button and append it to the dialog. I used div #msg for demo purposes.

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

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered May 8, 2013 at 10:45

Omar

31.7k9 gold badges73 silver badges117 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Steven Kinnear Over a year ago

This works great but what if i only wanted the item.message to be passed, could i but that in another <a> but hidden with a class maybe?

Omar Over a year ago

you mean <p>'+ item.message +'</p>?

Steven Kinnear Over a year ago

yes , I wanted to be able to send the message and the id to the dialog(2 variables), then create a delete/read button and action them on close instead of re asking for the data again.

Omar Over a year ago

If data-name what you want, check the demo, I have updated it. Only the first two items.

Omar Over a year ago

@StevenKinnear welcome ;) I've updated my answer accordingly.

Collectives™ on Stack Overflow

How to get dynamically created data into a dialog box on listview click

1 Answer 1

updated

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

updated

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related