CODEWITHSUNDEEP
jquery-mobile
Louis
Louis

Reputation: 2608

apply jquery mobile style to the content of my dynamically created panel

I am trying to create the same panel for several pages of my html/css/js app with jquery mobile using the solution here . But unfortuantely, it is like for the content of the panel, the jquery mobile style is not aplied....instead of this, it just plain old html.

How can I apply jquery mobile style to the content of the panel? Is there some kind of refresh command for this?

Here is my panel:

$(document).on('pagebeforeshow', '#welcome-page', function(){                
  $('<div>').attr({'id':'mypanel','data-role':'panel','data-position':'right','data-display':'overlay'}).appendTo($(this));
  $('<a>').attr({'href':'mailto:?subject=subject of the email&body=whatever body body','target':'_blank'}).html('Send').appendTo('#mypanel');
  $('<a>').attr({'id':'test-btn','data-role':'button'}).html('Click me').appendTo('#mypanel');
  $('<a>').attr({'href':'#welcome-page','data-inline':'true','data-icon':'delete','data-theme':'c','data-role':'button','data-rel':'close'}).html('Close').appendTo('#mypanel');        
  $.mobile.activePage.find('#mypanel').panel();
  $(document).on('click', '#open-panel', function(){   
    $.mobile.activePage.find('#mypanel').panel("open");       
  });
  //LISTENERS:
  //$("#mypanel").panel("close");
});

Here's the page:

<div id="welcome-page" data-role="page">    
    <!--<div data-role="panel" id="mypanel">
    </div>-->                   
<header data-role="header"> 
</header>
<div id="content" data-role="content">              
</div>
<footer data-role="footer">
</footer>

Thanks

Upvotes: 1

Views: 711

Answers (1)

Gajotres
Gajotres

Reputation: 57309

I have made an original post so let me show you a different way, instead of using pagebeforeshow event you can use pagebeforecreate. It is important because at that point content is still not styled. Any dynamically added content will be automatically styled so you don't need to worry about that.

$(document).on('pagebeforecreate', '#welcome-page', function(){                
    $('<div>').attr({'id':'mypanel','data-role':'panel','data-position':'right','data-display':'overlay'}).appendTo($(this));
    $('<a>').attr({'href':'mailto:?subject=subject of the email&body=whatever body body','target':'_blank'}).html('Send').appendTo('#mypanel');
    $('<a>').attr({'id':'test-btn','data-role':'button'}).html('Click me').appendTo('#mypanel');
    $('<a>').attr({'href':'#welcome-page','data-inline':'true','data-icon':'delete','data-theme':'c','data-role':'button','data-rel':'close'}).html('Close').appendTo('#mypanel');        
    $(document).on('click', '#open-panel', function(){   
    $.mobile.activePage.find('#mypanel').panel("open");       
    });
    //LISTENERS:
    //$("#mypanel").panel("close");
});

Working example made on a basis of my original answer: http://jsfiddle.net/Gajotres/pZzrk/60/

Upvotes: 2

Related Questions