popup does not want to appear (jquery mobile, phone gap)

Question

I use version 2.9 of cordova and version 1.3.2 of jquery.mobile. I test my phone gap application on a tablet using eclipse.

I dynamically initialize the div where I want to insert the content of my popup:

var panelDetailArticle = $(''
+'<div data-role="popup" id="popupBasic">'
+'<div data-role="content" data-theme="d" class="ui-corner-bottom ui-content" id="popupContenuBasic">'
+'</div></div>');

$(panelDetailArticle).appendTo("body").trigger('create');

then I click on a button I filled the popup:

  $(".detail_article").click(function(){

            var familleIndex = $(this).parent().find('input[type=hidden]:eq(0)').val();
            var articleIndex = $(this).parent().find('input[type=hidden]:eq(1)').val();

            var article = ListFamille[familleIndex].ListArticles[articleIndex];
            $("#popupContenuBasic").html(''
                       +'<h4 style="margin-bottom: 16px;"> Détails article </h4>'
                       +'<ul  data-role="listview" data-inset="false">'
                       +'<li style="text-align:center;"><p class="parag">' 
                       +'<br/>Desingation : '+article.Designation
                       +'<br/>CAB : '+article.CAB
                       +'<br/>Prix Unitaire HT : '+article.PrixUnitaireHT
                       +'<br/>Prix Unitaire TTC : '+article.PrixUnitaireTTC
                       +'<br/>Quantité Disponible : '+article.QuantiteDisponible
                       +'<br/>Imange : '
                       +'<br/> <a href="#" id="Close-PopUp" data-role="button" data-theme="b" >Fermer</a>'
                       +'</li>'
                       +'</ul>');


;

               $("#popupBasic").popup();
                $("#popupBasic").popup("open"); 

            $('#popupBasic').trigger('create');


           });

and I try to open this popup;

me an error appear in the logcat from eclipse:

  E/Web Console(5572): Uncaught TypeError: Cannot read property 'jQuery19104939002424944192' of undefined at file:///android_asset/www/js/API/jquery.mobile-1.3.2.min.js:6473

can help me please .

Answer 1

What if you try getting rid of the following line:

$('#popupBasic').trigger('create');

It looks like 'create' is triggered when you you call the following line anyway:

$("#popupBasic").popup();

See http://api.jquerymobile.com/popup/#event-create

Yeah, in JSFiddle I see that error but it goes away if I comment out that line. Here's the fiddle: http://jsfiddle.net/cAtUE/

Omar is right: The popup needs to be added to a page div. You can even use the trigger create as you like. Here's a new fiddle: http://jsfiddle.net/bUgDe/

Alternatively, instead of using the trigger('create') you could 'refresh' the widgets individually, like so:

$('#popupContenuBasic ul[data-role="listview"]').listview().listview('refresh');
$('#popupContenuBasic a[data-role="button"]').button().button("refresh");

Here's a new fiddle: http://jsfiddle.net/bEkxj/ where I also changed the anchor button to a button. You may actually want to stay away from the create method altogether. According to the changelog for jQuery Mobile 1.4.0 ( http://jquerymobile.com/changelog/1.4.0/ ):

Deprecated calling create to enhance a container or widget $.fn.enhanceWithin() will now be the method to enhance containers

Answer 2

Popup div should be added/appended to page div in jQuery Mobile 1.3.2, hence, you have two options:

$.mobile.activePage.append(panelDetailArticle);

or

$("#page_ID").append(panelDetailArticle);

Then, create it and open it.

$("#popup_ID").popup().trigger("create").popup("open");

Demo