1

I'm using jQuery UI Layout Plug-in (http://layout.jquery-dev.net/). I need to load a layout on a modal window depending on certain parameters. So on-event I do something like:

$('<div id="container"><div class="ui-layout-west"> <div class="left-panel"><div class="fuelux">Somthing here</div> </div> </div> <div class="ui-layout-center">Something else here </div></div>').layout();

I have no idea why it does not build the layout. Does the plug-in support something like that?..

Help is appreciated.

cfs
  • 10,610
  • 3
  • 30
  • 43
user1791567
  • 1,388
  • 1
  • 16
  • 29

1 Answers1

1

You'll need to add your HTML to the DOM first, then initialize the layout. In the example below, I'm adding the container to the body, but you could add it to any element in the DOM:

$('<div id="container"><div class="ui-layout-west"> <div class="left-panel"><div class="fuelux">Somthing here</div> </div> </div> <div class="ui-layout-center">Something else here </div></div>').appendTo('body').layout();

Working Demo

cfs
  • 10,610
  • 3
  • 30
  • 43
  • Note, you could also just do `$('
    Somthing here
    Something else here
    ').appendTo('body').layout()`     – Kevin B Jul 15 '13 at 17:59
  • Nice... I wasn't sure what appendTo would be returning; but you're right, I'll update to save the unnecessary lookup – cfs Jul 15 '13 at 18:01
  • It seems to work.. partially.. bacause now all my layout disappears. $('
    ').append($expressionEditor).appendTo('body').dialog({ modal: true, buttons: { .... }, open: function (event, ui) { $(this).find('#container').layout(); } });     – user1791567 Jul 15 '13 at 18:08
  • do you have other layouts on the page that are created before this one? – cfs Jul 15 '13 at 18:09
  • Yes, I do have other layouts. The problem is that I want to show this new layout in a modal dialog. – user1791567 Jul 15 '13 at 18:11
  • Hmm... I'm able to add another layout dynamically after creating a layout: http://jsfiddle.net/YGT5p/2/ Could you post a jsFiddle that replicates what you're seeing? – cfs Jul 15 '13 at 18:17
  • Sure, let me modify yours adding the dialog call.. Thanks! – user1791567 Jul 15 '13 at 18:21
  • Here is. http://jsfiddle.net/YGT5p/3/ When you pause it in the open event before the layout call you can see that the content of the dialog is displayed. Once the layout is called the content kinda disappears. – user1791567 Jul 15 '13 at 18:31
  • The layout is being rendered but the height is 0. You'll need to explicitly set a height for `.container2` and then you will see it: http://jsfiddle.net/YGT5p/4/ – cfs Jul 15 '13 at 18:48