Reputation: 441
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?
Upvotes: 1
Views: 3935
Reputation: 441
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");
Upvotes: 0
Reputation: 9661
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");
Upvotes: 1