Question

I am using jquery portlets in my web application. http://jqueryui.com/demos/sortable/#portlets

What I want to do is make a Edit-Box appear between the Portlet header and Portlet Content once user clicks on the ‘Settings’ icon present on every Portlet-Header.
I can achieve this by having separate Edit-box for every individual Portlet.
But my question is how do I achieve this when I have a common ‘Edit-Box’ that is shared between all the Portlets present on my web-page.
How do I make this edit box appear between the ‘Header & Content’ Part after user clicks on the ‘Settings’ icon of that particular portlet ?

Answer 1

You can actually create an edit box on the fly, I mean when you click on the setting button.
Now after you have edited the text box and applied the settings the you can simply remove the edit box from there.

$(".settings").click(function() {
$("<input/>").attr("class", "editbox")
  .attr("value", "")
  .appendTo($("yourPortletSelector"));

});

$(".applySettings").click(function {
    //do all your work
    $(".editbox").remove();
});