JQuery Mobile Custom Flipbox set initialization value

Question

I have a custom flipbox which is described in the accepted answer here: JQuery Mobile Custom Flipbox get selected value.

I'm struggling to set the initial value after the page is rendered my 'change-page' function is something like this:

changePage:function (page) {
    page.$el.attr('data-role', 'page');
    page.render();
    $('body').append(page.$el).trigger('create');
    $.mobile.changePage(page.$el, {changeHash:false});

}

As I use Backbone.js to manage the views and then I delegate the navigation to jQM.

I basically need to set the initial value of this input text field ( maybe there's a workaround)

Answer 1

Ok I figured this out myself and I'm willing to share the solution:

first of all the change page function is slightly different:

changePage:function (page) {
    page.$el.attr('data-role', 'page');
    //get rid of everything in the old page.
    page.remove();
    //render the page again
    page.render();
    $('body').append(page.$el).trigger('create');
    $.mobile.changePage(page.$el, {changeHash:false});

}

the remove call is necessary to get rid of every event listener you had in the old rendered HTML.

In every page that needs init parameters you can specify in the render function this:

render: function(){

....

this.$el.on('pageshow',this.initFields);

....

}

initFields: function(){                                       
   // put your jQuery code here (e.g. this.$el.find('foo').val('initValue');                                    
}

please note that this solution as of the jQM documentation is valid up to the 1.5.0 version of jQM, after that the pageshow event will not be triggered anymore.