jquery mobile footer does not render properly with dynamic content

Question

Folks I am using backbonejs (0.9) with latest jquery mobile (1.3). I am using WebSql for storing local data. When the home page loads, I do a query from the local database and use jquery Deferred to render the content after the query is successful. Unfortunately, the jquery mobile footer does not get "enhanced".

My Haml template for the view is simple and looks as follows:

%div{'data-role' => 'header'}
  %div{'data-role' => 'navbar', 'data-iconpos' => 'top'}
    %ul
      %li
        %a.ui-btn-active.ui-state-persist{'href' =>''}ATAB
      %li 
        %a{'href' =>'#btab'}BTAB
%div{'data-role' => 'content'}

%div{'data-role' => 'footer', 'data-position' => 'fixed'}
  %a{'data-icon' => 'plus', 'href' => '#a_link'}A link

My Backbonejs view looks as follows (I use coffeescript). Router already has templates cached in router.templates and txnsLoadedPromise gets "resolved" once the db records from websql are loaded:

window.HomeView = class HomeView extends Backbone.View

  initialize: (options) ->
    @template = Handlebars.compile(router.templates['/home/home'])

  render: () ->
    txnsLoadedPromise.then(
      @renderDynamic
    )
    return this

  renderDynamic: () =>
    if (transactions.length > 0)
      #generate content dynamically here and put in result
      result = {}
      $(@el).html(@template(result))
      $('[data-role="header"]').trigger('create')
      $('[data-role="footer"]').trigger('create')

This is how my view looks:

I have tried to use "refresh" instead of create in the trigger call for footer but it does not work. Strangely enough, the header refresh works properly. Also, if I remove the dynamic nature of the page (meaning render the view directly instead of when the promise is resolved, then it works fine (which is expected.)

Just for completeness, Following is my router code (portions of it that are relevant)

window.MyRouter = class MyRouter extends Backbone.Router

  routes: 
    "": "home"

  initialize: (options) ->
    #code for preloading view templates

  templates: {}

  home: () ->

    PageUtil.changePage new HomeView({templateKey: '/home/home'})

And the changePage method in PageUtil class:

window.PageUtil = class PageUtil

  @changePage: (view, overrideOptions={}, role='page') ->
    defaultOptions={transition: 'slide', reverse: false}
    options = $.extend(defaultOptions, overrideOptions)
    view.render();
    $('body').append($(view.el));
    if window.curentView
      console.log 'removing view: ', currentView
      window.currentView.remove()
      window.currentView = view
    $.mobile.changePage(view.$el, options);

Any ideas?

Answer 1

There's a problem in your code.

First trigger('create') will work only on content part, use trigger('pagecreate') to enhance header + content + footer.

Read more about it in my other ARTICLE. Or find it HERE.

There you will find a working example of dynamically added footer content.

If you are adding dynamic navbar element then even trigger('pagecreate') wont help you. But there's a working solution:

$('#index').live('pagebeforeshow',function(e,data){    
    navbarHandler.addNewNavBarElement('navbar-test','el4','Page Four');
});


var navbarHandler = {
    addNewNavBarElement:function(navBarID, newElementID, newElementText) {
        var navbar = $("#" + navBarID);

        var li = $("<li></li>");        
        var a  = $("<a></a>");
        a.attr("id", newElementID).text(newElementText);
        li.append(a);

        navbar = navbarHandler.clearNavBarStyle(navbar);

        navbar.navbar("destroy");
        li.appendTo($("#" + navBarID + " ul"));
        navbar.navbar();
    },
    clearNavBarStyle:function(navbar){
        navbar.find("*").andSelf().each(function(){
            $(this).removeClass(function(i, cn){
                var matches = cn.match (/ui-[\w\-]+/g) || [];
                return (matches.join (' '));
            });
            if ($(this).attr("class") == "") {
                $(this).removeAttr("class");
            }
        });
        return navbar;   
    }
}