I’m trying to create a list of so called portlets, dynamically. Portlets can be added by clicking a button, which open a dialog with 3 input fields, after that you confirm and a new portlet turns up on the page. These portlets have a minus-icon which can be used to toggle the text-part of the portlet. This works on the portlets that are added via html at page load, but the dynamically added portlets don’t seem to have this functionality “bound to them”.
So I’m wondering how to add this functionality to the dynamically added portlets. I also realize that my jQuery code doesn’t look very optimal, but I’ve mostly been copy-pasting stuff cause I’m new to this.
EDIT: i should add this link: http://jqueryui.com/sortable/#portlets – that’s where I got most of my code from and you can test the minus-icon-functionality.
jQuery:
$(function() {
var title = $( "#title" ),
content = $( "#content" ), column = $( "#column" );
$( "#dialog-form" ).dialog({
autoOpen: false,
height: 300,
width: 350,
modal: true,
buttons: {
"Add content": function() {
if(column.val()=='col1'){
$( "#col1" ).append($('<div class="portlet ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">' +
'<div class="portlet-header ui-widget-header ui-corner-all">' +
'<span class="ui-icon ui-icon-minusthick"></span>' + title.val() + '</div>' +
'<div class="portlet-content">' + content.val() + '</div></div>'))
$( this ).dialog( "close" );
}
else if(column.val()=='col2'){
$( "#col2" ).append($('<div class="portlet ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">' +
'<div class="portlet-header ui-widget-header ui-corner-all">' +
'<span class="ui-icon ui-icon-minusthick"></span>' + title.val() + '</div>' +
'<div class="portlet-content">' + content.val() + '</div></div>'))
$( this ).dialog( "close" );
}
else if(column.val()=='col3'){
$( "#col3" ).append($('<div class="portlet ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">' +
'<div class="portlet-header ui-widget-header ui-corner-all">' +
'<span class="ui-icon ui-icon-minusthick"></span>' + title.val() + '</div>' +
'<div class="portlet-content">' + content.val() + '</div></div>'))
$( this ).dialog( "close" );
}
else if(column.val()=='col4'){
$( "#col4" ).append($('<div class="portlet ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">' +
'<div class="portlet-header ui-widget-header ui-corner-all">' +
'<span class="ui-icon ui-icon-minusthick"></span>' + title.val() + '</div>' +
'<div class="portlet-content">' + content.val() + '</div></div>'))
$( this ).dialog( "close" );
}
else{
$( "#tempcol" ).append($('<div class="portlet ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">' +
'<div class="portlet-header ui-widget-header ui-corner-all">' +
'<span class="ui-icon ui-icon-minusthick"></span>' + title.val() + '</div>' +
'<div class="portlet-content">' + content.val() + '</div></div>'))
$( this ).dialog( "close" );
}
},
Cancel: function() {
$( this ).dialog( "close" );
}
},
close: function() {
}
});
$( "#add-content" )
.button()
.click(function() {
$( "#dialog-form" ).dialog( "open" );
});
$( ".column" ).sortable({
connectWith: ".column"
});
$( ".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" );
$( ".portlet-header .ui-icon" ).click(function() {
$( this ).toggleClass( "ui-icon-minusthick" ).toggleClass( "ui-icon-plusthick" );
$( this ).parents( ".portlet:first" ).find( ".portlet-content" ).toggle();
});
$( ".column" ).disableSelection();
});
html:
<body>
<div id="centered">
<div id="inset">
<h1>title</h1>
<div id="linear" style="padding: 20px"></div>
</div>
<div id="dialog-form" title="Create portlet">
<form>
<fieldset>
<label for="title">Title</label>
<input type="text" name="title" id="title" class="text ui-widget-content ui-corner-all" />
<label for="content">Content</label>
<input type="text" name="content" id="content" value="" class="text ui-widget-content ui-corner-all" />
<label for="column">Column</label>
<select name="column" id="column" class="ui-spinner-down ui-widget-content ui-corner-all">
<option value="col1">left sidebar</option>
<option value="col2">main</option>
<option value="col3">bottom left</option>
<option value="col4">bottom right</option>
</select>
<!--<input type="text" name="column" id="column" value="" class="text ui-widget-content ui-corner-all" />-->
</fieldset>
</form>
</div>
<button id="add-content" >Add Content</button>
<button id="test" onclick="test()">test</button>
<div id="preview">
<table>
<tbody>
<tr>
<!--sidebar-->
<td>
<div id="col1" class="column">
</div>
</td>
<!--sidebar end-->
<td>
<table>
<tbody>
<!--main-->
<tr>
<div id="col2" class="column">
<div class="portlet">
<div class="portlet-header">News</div>
<div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
</div>
</tr>
<!--main end-->
<!--bottom colums-->
<tr>
<td style="border-left: 0px; border-bottom: 0px">
<div id="col3" class="column">
</div>
</td>
<td style="border-right: 0px; border-bottom: 0px">
<div id="col4" class="column">
</div>
</td>
</tr>
<!--bottom colums end-->
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
Try this for dynamic elements
instead of