CODEWITHSUNDEEP
javascriptlistviewjquery-mobiledynamic
Klaus Kaiser
Klaus Kaiser

Reputation: 45

Creating a ListView with JQuery mobile doesn't work correctly II

Sorry to bother you again, but ran into another problem with that ListView. The answer of Gajotres (look here) worked of course, but indeed my code ist a bit more complex: the ListView I mentioned is in a dynamically created popup. And there "new" refresh does not help. My code:

   var HlpStr =  'Wählen Sie die Checklist, die Sie laden wollen, durch Anklicken aus. '
            + '\n\nDer Download wird über die Schaltfläche "Checkliste laden" gestartet.' 
            + '\n\n Sie müssen mit dem Internet verbunden sein, um die Registrierung auszuführen!';

var html = "";
html += '<div data-role=header  data-theme="d">';
html +=   '<h1>Market-Value Checkliste laden</h1>';   
html += '</div>';

html += '<div data-role=content>';
html +=    '<p>' +  HlpStr + '</p>'; 
html +=    '<p> </p>'; 
html +=    "<ul id='ChecklistListex' data-role=listview data-theme='d' data-divider-theme='d' data-inset=true>";
html +=       '<li id="listDividerAktuelleChecklistx" data-role=list-divider>yyy Checklist</li>';
html +=       "<li id='LoadChecklistx'> <a> Checkliste laden </a></li>";
html +=    "</ul>"
html +=    '<p> </p>'; 
html +=    '<a id=BTNChecklisteLaden data-role="button" data-inline="true" data-mini="true" >Checkliste laden</a>';      
html +=    '<a id=BTNChecklisteLadenAbbrechen data-role="button" data-inline="true" data-mini="true" >abbrechen</a>';      
html += '</div>';

    var $popUp = $('<div align="center" />').popup({
        id : "DialogChecklistLaden",
        dismissible : false,
        theme : "b",
        positionTo : "window",
        tolerance : "30,40",
        overlayTheme : "b",
        transition : "pop",
        "data-add-back-btn": "true"
    }).bind("popupafterclose", 
       function() {
                    //remove the popup when closing
           $(this).remove();
    });
    $(html).appendTo($popUp);    
    $popUp.popup("open").trigger("create");

And here is what i get: see picture here http://www.market-value.de/downloads/ul.jpg

What I have to du to get it working?

Upvotes: 2

Views: 128

Answers (1)

Gajotres
Gajotres

Reputation: 57309

Let me talk about your question. Before showing popup you should append it to page content. Mainly because trigger('create') is used on content DIV and no point on using it on anything else. In this case popup needs to be a part of a page for trigger('create') to work correctly. While trigger('create') can work outside content div using it on a data-role="content" is a safe move.

Working example: http://jsfiddle.net/Gajotres/WC6ud/

$(document).on('pagebeforeshow', '#index', function(){ 
    var html = "";
    html += '<div data-role=header  data-theme="d">';
    html +=   '<h1>Market-Value Checkliste laden</h1>';   
    html += '</div>';

    html += '<div data-role=content>';
    html +=    '<p>Meh</p>'; 
    html +=    '<p> </p>'; 
    html +=    "<ul id='ChecklistListex' data-role=listview data-theme='d' data-divider-theme='d' data-inset=true>";
    html +=       '<li id="listDividerAktuelleChecklistx" data-role=list-divider>yyy Checklist</li>';
    html +=       "<li id='LoadChecklistx'> <a> Checkliste laden </a></li>";
    html +=    "</ul>"
    html +=    '<p> </p>'; 
    html +=    '<a id=BTNChecklisteLaden data-role="button" data-inline="true" data-mini="true" >Checkliste laden</a>';      
    html +=    '<a id=BTNChecklisteLadenAbbrechen data-role="button" data-inline="true" data-mini="true" >abbrechen</a>';      
    html += '</div>';

    var $popUp = $('<div align="center" />').popup({
        id : "DialogChecklistLaden",
        dismissible : false,
        theme : "b",
        positionTo : "window",
        tolerance : "30,40",
        overlayTheme : "b",
        transition : "pop",
        "data-add-back-btn": "true"
    }).bind("popupafterclose", 
            function() {
                //remove the popup when closing
                $(this).remove();
            });
    $(html).appendTo($popUp);    
    $popUp.appendTo('#DivChecklistListe');
    $('#DivChecklistListe').trigger('create');
    $('#DialogChecklistLaden').popup("open");
});

Upvotes: 2

Related Questions