jquery mobile dynamic html from ajax not formatting with mustache

Question

I am using mustache templating engine with jquery mobile. I cannot figure out why my html is not formatting correctly with jqm. Here is my html/script:

  <body>
    <div id="john" data-role="page">
      <div id="header" data-role="header"></div>
      <div id="content" data-role="content"></div>
      <div id="footer" data-role="footer"></div>
    </div>
    <script>
        var data = {
            technique : "Knee Slide Pass",
            steps : ["Step 1", "Step 2", "Step 3"],
            msg : "Hard Works Pays Off"
        };
        $.get('template.html', function(templates) {
            var header = $(templates).filter('#tpl-header').html();
            var content = $(templates).filter('#tpl-content').html();
            var footer = $(templates).filter('#tpl-footer').html();
            $('#header').html(Mustache.to_html(header, data));
            $('#content').html(Mustache.to_html(content, data));
            $('#footer').html(Mustache.to_html(footer, data));
            //$('#footer').html(Mustache.to_html(footer, data)).trigger('create');
            //$this.trigger('create').trigger('refresh').page();

        });
    </script>
  </body>

Here is my template.html:

<div id="tpl-header">
  <h1>{{technique}}</h1>
</div>

<div id="tpl-content">
  <ul id="loader">
    {{#steps}}
    <li>
      {{.}}
    </li>
    {{/steps}}
  </ul>
</div>
<div id="tpl-footer">
  <h1>{{msg}}</h1>
</div>

The resulting web page does have a header and footer with content. However, the header is very big and to the left(same with footer). If i just hard code the header and footer in html, it works. But when jqm updates the html, it doesn't get formatted correctly. I have read to add .trigger('create') but doesn't work. Can anyone please help, I have been working on this for way too long. Thanks in advance!

John

Can you show the HTML it's creating? – Popnoodles Feb 05 '13 at 19:16 — Popnoodles, Feb 05 '13 at 19:16

score 1 · Answer 1 · answered Feb 06 '13 at 20:11

thanks everyone for your help and suggestions. I finally figured out what to do from various sources on google and answers here. I had to create an empty div right before my script (By the way, i found out jqm doesnt run the script in header on subsequent pages, only on main page). I labeled this empty div "id=content", then in script call destroy, then page():

<body>
    <div data-role="page" data-add-back-btn=true>
      <div id="content"></div>
      <script>
        var data = {
            technique : "Knee Slide Pass",
            steps : ["Step 11", "Step 22", "Step 3"]
        };

        $.get('template.html', function(template) {
            var content = $(template).filter('#tpl').html();
            $('#content').html(Mustache.to_html(content, data));
            $("div[data-role=page]").page("destroy").page();
        },"text");
      </script>
    </div>
  </body>

Also, the above worked only in my browser and not in android application (just blank page in webview) until I added the ,"text"); as part of the get method.

This is my first time using jqm and developing my droid app. Sorry if this should have been something i should have known. Lots to learn ... :>

John

score 0 · Answer 2 · edited May 23 '17 at 12:18

This is definitely a "page refreshing" issue. Remember that jQM actually does its own "parsing" of the page on page-load, which is how everything is prettified initially. So, when you add DOM nodes or content, you have to make sure to let jQM know.

Here's a related question: jQuery Mobile Page refresh mechanism

I'd try playing with this line:

$this.trigger('create').trigger('refresh').page();

->

$.mobile.activePage.trigger('create')

or something along those lines.

Ideally, what you'd do is actually already have a page in the DOM, simply inject your new content in to it, then call $.mobile.changePage("#pageId"); on it.

jquery mobile dynamic html from ajax not formatting with mustache

2 Answers2