CODEWITHSUNDEEP
jquery-mobilebackbone.js
Chad Johnson
Chad Johnson

Reputation: 21895

Why is my dynamically-added content not rendering with jQuery Mobile?

I'm using jQuery Mobile + Backbone + RequireJS. After successful login I do the following:

require(['app/view/main'], function(MainView) {
  var mainView = new MainView();
  $('body').html(mainView.render().el);
});

and render() looks like

render: function() {
  this.$el.html(this.template);
  return this;
}

Upon doing so, my page is blank. Inspecting the body, I do see the following HTML inside the body:

<div data-role="page" id="main">
  <div data-role="header" data-position="inline">
      <h1>Accounts</h1>
  </div>
  <div data-role="content">
    hello
  </div>
</div>

I've also tried doing this inside render():

this.$el.html(this.template).trigger('create');

as well as

this.$el.html(this.template).page();

but the page is still blank. Any ideas why?

If I simply put the HTML inside the body and load the page, it displays fine, like a normal jQuery Mobile app would.

Upvotes: 0

Views: 327

Answers (1)

andleer
andleer

Reputation: 22578

Are you waiting until after pageinit to trigger / create your page?

$(document).bind('pageinit', function() {
    // trigger
});

Also, jQM may be interpreting your markup as a single page template and then by injecting a data-role='page' element, you are marking up a multiple page document (with only a single page). Try leaving the <div data-role='page'> element in your default markup and then dynamically add the header, content and footer. jQM should then correctly interprete the markup and enhance it accordingly.

Upvotes: 1

Related Questions