jQuery Mobile / Handlebars - Opening a panel hides the data-role=content div

2
votes

I'm trying to use Handlebars with jQuery mobile. I'm using jQuery 1.9.1, jQueryMobile 1.4, Handlebars 1.1.2.

<div data-role="page" id="attach-template">

    <div data-role="panel" id="mypanel">
           <div data-role="header">
                    <h1>Title</h1>
                </div><!-- /header -->
                <nav>
                    <ul>
                        <li><a href="index.html">Home</a></li>
                        <li><a href="promotions.html">Promotions</a></li>
                        <li><a href="events.html">Events</a></li>
                    </ul>
                </nav>
          </div>

        <script id="content-template" type="text/x-handlebars-template">



          <div data-role="header">
                <a href="#mypanel" data-icon="gear">M</a>
                <h1>{{title}}</h1>
            </div>

            <div data-role="content" id="listview-content">
            HELLO!

        </div><!-- /content -->

            <div data-role="footer">
                <h4>Page Footer</h4>
            </div>

        </script>

    </div><!-- /page -->

The trouble is that when I load the page, pull the data in, compile the templates and attach them to the data-role="page", it displays fine, but when I click on the open panel button, the data-role="content" disappears. Looking in chrome dev tools, it looks like jQM doesn't move or append this div like it does with header and footer.

Any suggestions why it's just this div that does this and not all of them?

I've also tried calling the following after handlebars.append but doesn't do anything : 

$("#listview-content").trigger('create');
$('#mypanel').trigger('updatelayout');
$('body').trigger('create');
$('body').trigger('pagecreate');
1
jqueryjquery-mobilehandlebars.js
are you appending data to panel or page? your html is somehow vague. – Omar
Yes that's right. I'm appending everything in that handlebars template, to #attach-template, once i $get the data from the server, and compile the template. So the final HTML would look exactly how I've pasted it, just without the <script> tags – jnsandrew
Try $("page_id").enhancewithin(); after appending items. – Omar
Forgot to mention, wrap content div in div with class ui-panel-wrapper. – Omar
Thanks Omar! Wrapping everything (inc. header and footer) in <div class=ui-panel-wrapper> worked. There were a few glitches when only wrapping around the content div. Didn't notice .enhancewithin(); do anything so left it out. – jnsandrew

1 Answers

2
votes

When using an internal or external panel, wrap content div in a div with ui-panel-wrapper class to avoid reloading content div when opening the panel for the first time.

<div class="ui-panel-wrapper">
  <div class="ui-content">
  </div>
</div>