CODEWITHSUNDEEP
jquery-mobile
balazs
balazs

Reputation: 5788

adding dynamically popup with enhanced content

I'm trying to dynamically add a popup to my page, whith nice JQM content (buttons, etc). The popup is added, but no styles applied.

Here's the code (it's not so long, so I copied here):

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>  </head>
  <body>
    <div id='page' data-role='page'>

      <div data-role='header'>
        <h1> Header </h1>
      </div>

      <div data-role='content'>
        <p>Code sample</p>
        <a id='add' data-role='button'> Add popup </a>
        <a href='#popup' data-role='button' data-rel='popup'> Show dynamic popup </a>
        <a href='#popup2' data-role='button' data-rel='popup'> Show static popup </a>

      </div>
      <div id="popup2" data-role='popup'>
        <div data-role="header"> 
          <h1>Popup Header</h1> 
        </div>
        <div data-role="content"> 
          <p>Some content</p> 
        </div>
      </div>

    </div>
    <script>
      $(document).ready( function(){
        $('#add').bind( 'click', function(ev){
          var
            page = $('#page');
          var 
              popup = $('<div id="popup" data-role="popup"></div>').appendTo( page )
            , header = $('<div data-role="header"> <h1>Popup Header</h1> </div>').appendTo( popup )
            , content = $('<div data-role="content"> <p>Some content</p> </div>').appendTo( popup );
          popup.popup();
        });
      });
    </script>
  </body>
</html>

there's a JsBin version, to play around with it.

So if I click to the Show static popup it displays the header nicely, but If I click Add popup, than show this newly added popup with Show dynamic popup the content of the popup looks differently.(using chrome)

So the question is: How can I enchanced the dynamically added popup content?

Upvotes: 2

Views: 13169

Answers (2)

Felipez
Felipez

Reputation: 468

I found the solution, you can insert the popup in the same level as content, for ex.

<div data-role="page" >
  <div data-role="content" ></div>
  <div data-role="popup"></div>
</div>

Well with this way the popup function is good, but when you insert code for example from ajax request you have to insert the popup in the page and recall the method popup of the component.

ex .js file in the ajax call (the response is only the code of popup):

$('#page').append(response).trigger('create');

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

Remember that when you declare some popup in the principal page and it is not the same level as content. JQM automatically puts the popup in this place and it doesn't generate a problem.

Upvotes: 6

imwill
imwill

Reputation: 598

You have to repaint the dynamically added content. To do this add page.page('destroy').page(); after popup.popup();.

working example: http://jsbin.com/orehuv/3/

Upvotes: 1

Related Questions