jQuery layout plug-in - create layout dynamically

Question

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.

Sure, that should work. However, are you actually adding the content to the page? I'd expect them to need to be part of the dom before you call layout. — user400654
– user400654, Commented Jul 15, 2013 at 17:51
Yes, I'm adding the content to the modal. So I guess I have to create the dialog first, then lookup for #content and call layout() ? — user1791567
– user1791567, Commented Jul 15, 2013 at 17:55
Thanks @cfs. This helped me with the issue: jsfiddle.net/YGT5p/4 — user1791567
– user1791567, Commented Jul 15, 2013 at 19:07

colestrode · Accepted Answer · 2013-07-15 18:04:57Z

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

edited Jul 15, 2013 at 18:04

answered Jul 15, 2013 at 17:57

colestrode

10.7k3 gold badges32 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

user400654 Over a year ago

Note, you could also just do

$('<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()

colestrode Over a year ago

Nice... I wasn't sure what appendTo would be returning; but you're right, I'll update to save the unnecessary lookup

user1791567 Over a year ago

It seems to work.. partially.. bacause now all my layout disappears. $('<div title="Column expression"><div></div></div>').append($expressionEditor).appendTo('body').dialog({ modal: true, buttons: { .... }, open: function (event, ui) { $(this).find('#container').layout(); } });

colestrode Over a year ago

do you have other layouts on the page that are created before this one?

user1791567 Over a year ago

Yes, I do have other layouts. The problem is that I want to show this new layout in a modal dialog.

|

Collectives™ on Stack Overflow

jQuery layout plug-in - create layout dynamically

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related