Question

has anyone successfully used the jQuery ui.layout plugin to load jQuery mobile inside the panes?

I am developing a desktop application that will run on 21″ touch screens with no keyboard; in addition, certain functions will be available for the client to use over mobile.

I am using just php, jqm and jQuery, and would like to use ui.layout because of it’s extensive flexibility, but when I try to dynamically load jqm pages into a pane, all the styling gets stripped.

I have to build some pretty complex real-time data dashboards, so being able to use ui.layout would greatly help me accomplish this task.

Here is the URL to a test page I put together. I am trying to load one mobile page into the left and one into the right. themachine.hopto.org:8080/~av2ma/test/index_test.html

Thank you in advance for your time.

Answer 1

You may not want to use page() method for an element as page may go into a infinite loop. You can use trigger(“create”) instead. With that, style of “west_content” would come back.

But center_content would not because clone does not copy necessary mobile class yet when DOM is ready. $(document).ready is fired when DOM is ready but not when all viewable elements are loaded. For the latter, you should use $(window).load event. Following code will fix your styling problem.

$(document).ready(function () {

       myLayout = $('body').layout({
        name: 'myLayout'
        ,west__size: '25%' 
        ,west__autoResize: true
        });
});
$(window).load(function () {
     center_content = $("#west_content").clone();
    center_content.attr("id", "center_content");

    $("#center").html(center_content);
    //you don't need this any more center_content.trigger("create");

});