Jquery Mobile dynamic dialog with listview event not binding

Question

I am trying to create dialog in Jquery mobile with dynamic content and in that I am showing a listview. Now when the user clicks an item in the listview, the dialog should close and selected item should be displayed in a textbox. the dialog box is to be displayed when user click in a textbox.

My problem is on first time the dialog is displayed and listview is displayed. But I am not able to get the selected item.

Second time when the user clicks in the same text box the dialog is not displayed.

The code:

<div id="inlinecontent" style="display:none" 
data-options='{"mode":"blank","headerText":"Select","headerClose":true,"blankContent":true}'>
    <a rel='close' data-role='button' href='#'>Close</a>
</div>


<script type="text/javascript">
document.addEventListener('deviceready', function () {

    $('#addadult').click(function(){
        var adult = document.getElementById('totaladult').textContent;
        alert(adult); 
        var myInteger = parseInt(adult);
        myInteger+=1;
        document.getElementById('totaladult').textContent=myInteger;
    });
    /*      $('#listviewfrom').delegate('li', 'click', function () {
                    $("#txtFrom").val(this.textContent);
                    $("#txtFrom").trigger('refresh');
                    $("#popupMenu" ).popup( "close" )
                    $("#popupMenu ul").hide();

                });    */
                $('#listviewto').delegate('li', 'click', function () {
                    $("#txtTo").val(this.textContent);
                    $("#txtTo").trigger('refresh');
                    $("#popupMenu1" ).popup( "close" )
                    $("#popupMenu1 ul").hide();
                });    


                $('#txtFrom').click(function(){

                    var labels='<ul data-role="listview"  data-theme="c" id="listviewfrom" data-filter="true">';
                    try {
                        BookingCities = getJsonData();
                        $.each(BookingCities["BookingCities"], function(i, val) {
                            labels += '<li data-icon="up"><a href="#" rel="close" onclick="test("'+val.CityName +'")">' + val.CityName + '(' + 

                                val.CityCode + '),' + val.CountryName + ' </a></li>';
                        });
                        labels+='</ul>';
                        $('#inlinecontent ul').listview('refresh');                            
                        $("#inlinecontent").html(labels);     
                        $('#inlinecontent ul').show();
                        $("#inlinecontent").simpledialog2();

                    } 
                    catch (ex) 
                    {

                    }
                });


                $("#txtTo").click(function()
                                  {
                                      var labels='';
                                      BookingCities = getJsonData();
                                      $.each(BookingCities["BookingCities"], function(i, val) 
                                             {
                                                 labels  += '<li data-icon="up"><a href="#">' + val.CityName+'(' +val.CityCode+'),'+ val.CountryName+' </a></li>';
                                             });

                                  });

                navigator.splashscreen.hide();
            }, false);     
</script>

If anyone can help, I shall be thankful

Let me give you few advices. Your code is unreadable, you should fix it, show only what we need to know. Second, you should create a jsFiddle example of this code so we can test in directly. Here's an example of: jsfiddle.net/Gajotres/vds2U — Gajotres
– Gajotres, Commented May 16, 2014 at 16:06
Plus one last advice, you will never get an answer unless you learn to accept given answers. — Gajotres
– Gajotres, Commented May 16, 2014 at 16:09

ezanker · Accepted Answer · 2014-05-17 21:13:18Z

Try adding "blankContentAdopt": true to the SimpleDialog2 options. That should help with the re-lauching with dynamic content:

<div id="inlinecontent" style="display: none" data-options='{"mode":"blank","headerText":"Select","headerClose":true,"blankContent":true, "blankContentAdopt": true}'>

For the script that adds dynamic content, you can remove any existing list $('#inlinecontent ul').remove(); then build the list and prepend it to the content so the close button remains below the list. In my example code I am using an array of cities instead of an object just for demonstration:

$(document).on("click", "#txtFrom", function () {

    $('#inlinecontent ul').remove();
    var labels='<ul data-role="listview" data-theme="c" id="listviewfrom" data-filter="true" >';
    try {
        for (var i=0; i< MyFromCities.length; i++){
            labels += '<li data-icon="up"><a href="#" >' + MyFromCities[i][0] + '(' + MyFromCities[i][2] + '), ' + MyFromCities[i][1] + ' </a></li>';
       }

        labels+='</ul>';

        $("#inlinecontent").prepend(labels).simpledialog2({ width: '75%'});
    } 
    catch (ex) {}
});

A click handler is then added to the listitem anchors where you can get the text and put it in the textbox before closing the popup:

$(document).on("click", ".ui-simpledialog-container #listviewfrom li a", function(){
    //alert($(this).text());
    $("#txtFrom").val($(this).text());
    $.mobile.sdCurrentDialog.close();
});

To make the filter element behave, you might need to add some CSS to remove the negative margins:

.ui-simpledialog-container .ui-listview-filter {
    margin: 0;
}

Here is a DEMO

Collectives™ on Stack Overflow

Jquery Mobile dynamic dialog with listview event not binding

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related