Question

I successful used jQuery UI.Layout Plug-in in some test pages, but I failed when I tried to integrate layouts in an AJAX website.

When I load a page that uses layouts everything is Ok the first time, but the second time I try to load the same page layout plugin don’t work. Simplifying I’ve noted that the problem is not AJAX, else the layout plugin. This is the simplest example I’ve found:

function m() {
    $("body").html('xxx');
}

function m2() {
    $("body").html('<div class="ui-layout-west">west</div><div class="ui-layout-east">east</div><div id="mainContent"></div>')
    outerLayout = $("body").layout( layoutSettings_Outer );
}

$(document).ready( function() {
    m2();

    setTimeout("m()", 3000);
    setTimeout("m2()", 5000);
});

When the document is loaded, the layout is ok. After 3 seconds the layout disapears (as expected), and 2 seconds later the original page is back, but every DIV works as if the layout plugin is not loaded.

Answer 1

I’ll answer my own question:

outerLayout.destroy() resolves the problem. It must be called if you unload any layout DIV. In this case, it is enough to call destroy() just before $(“body”).html(‘xxx’); (first line in m() function).