jQuery How to add a portlet

Question

How do I add an jQuery UI Portlet to an existing set of Portlets?

(Check: http://jqueryui.com/demos/sortable/portlets.html)

How to add a portlet after loading?

In my personal project I implemented portlets: http://www.soliman.nl/test/jqueryui/ui_2.php and I would like to make a button to append a portlet. I tried appending it to .column, but the CSS is not loaded(of course), when you .addClass, all other portlets are affected too. There must be a simple way...but how?

Answer 1

Currently, you're doing

$(".portlet").addClass("ui-widget ui-widget-content ui-helper-clearfix ui-corner-all")
.find(".portlet-header")
.addClass("ui-widget-header ui-corner-all")
.prepend('<span class="ui-icon ui-icon-minusthick"></span>')
.end()
.find(".portlet-content"); 

What if you get rid of the $(".portlet") and keep using the $(".addspace") you had before the replaceWith, like this?

$('.addspace').replaceWith(html)
.addClass("ui-widget ui-widget-content ui-helper-clearfix ui-corner-all")
.find(".portlet-header")
.addClass("ui-widget-header ui-corner-all")
.prepend('<span class="ui-icon ui-icon-minusthick"></span>')
.end()
.find(".portlet-content"); 

Answer 2

After creating a few portlets, add last div with class addspace.

Then create a function with .replaceWith and a .addClass.

$('.addspace').replaceWith(html);

Example of returned HTML:

<div class="portlet" id="portletname"> <!-- make sure portletname is unique -->
<div class="portlet-header">test</div>
<div class="portlet-content">test</div>
</div>

<!-- New addspace (replaceWith replaces the old one)  -->
<div class="addspace" >
</div

Add portlet class to div by id:

$('#portletname')
      .addClass("ui-widget ui-widget-content ui-helper-clearfix ui-corner-all")
      .find(".portlet-header")
      .addClass("ui-widget-header ui-corner-all")
      .prepend('<span class="ui-icon ui-icon-minusthick"></span>')
      .end()
      .find(".portlet-content");