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

Question

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?

Gajotres · Accepted Answer · 2013-07-19 17:08:32Z

2

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

edited Jul 19, 2013 at 17:08

answered Jul 19, 2013 at 15:42

Gajotres

57.3k16 gold badges106 silver badges132 bronze badges

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

1 Comment

Klaus Kaiser Over a year ago

No, no, you are right about accepting the answer. I'm myself activ in a Delphi forum and I apriciate it. I looked for, but didn't find anything to do so. As I know now, I was to fast... This time I immediately saw the "checker". And now for my problem: does this mean that I have to "anchor" the popup in a "div" in my main html (#DivChecklistListe in this case)?

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related