portlet and dialog
portlet and dialog
Dear All,
How can i know parent element (or i can say, which portlet ?) of the
dialog box being called ?
----cut-------
$("#maincontent .column .portlet-header .ui-icon-wrench").click(function() {
---------cut-------
<!-- The HTML -- automatically generated -->
<div id="gambarDuaSatu" class="portlet ui-widget ui-widget-content
ui-helper-clearfix ui-corner-all" style="opacity: 1;">
<div class="portlet-header ui-widget-header
ui-corner-all"><span class="ui-icon ui-icon-plusthick"/><span
class="ui-icon ui-icon-wrench"/><span class="ui-icon
ui-icon-close"/><span class=""/>Sebaran Belanja Litbang Menurut
Institusi</div>
<div class="portlet-content"><object width="320"
height="180" data="/swf/open-flash-chart.swf"
type="application/x-shockwave-flash" style="vertical-align: text-top;"
name="chart-gambarDuaSatu" id="chart-gambarDuaSatu"><param
value="data-file=/chart/gambarDuaSatu"
name="flashvars"/></object></div>
</div>
<div id="gambarTigaSatu" class="portlet ui-widget ui-widget-content
ui-helper-clearfix ui-corner-all" style="opacity: 1;">
<div class="portlet-header ui-widget-header
ui-corner-all"><span class="ui-icon ui-icon-plusthick"/><span
class="ui-icon ui-icon-wrench"/><span class="ui-icon
ui-icon-close"/><span class=""/>SDM yang Terlibat Kegiatan Penelitian
dan Pengabdian Masyarakat (Valid)</div>
<div class="portlet-content"><object width="320"
height="180" data="/swf/open-flash-chart.swf"
type="application/x-shockwave-flash" style="vertical-align: text-top;"
name="chart-gambarTigaSatu" id="chart-gambarTigaSatu"><param
value="data-file=/chart/gambarTigaSatu"
name="flashvars"/></object></div>
</div>
---cut------
$(function() {
var param ; //additional param to the a portlet ; later
var title = ""; //title for prototyping only
$("#maincontent .column").sortable({
connectWith: ['#maincontent .column'],
opacity: 0.6,
scroll: false,
handle : ".portlet-header",
receive: function(event, ui) {
var id = $(ui.item).attr('id');
var chartId = 'chart-'+id ;
$("#"+id+" > .portlet-content").flash({
data: '/swf/open-flash-chart.swf',
id: chartId,
name: 'chart-'+id,
expressInstall: true ,
flashvars: {
'data-file': '/chart/'+id
},
})
$("#"+id).find("span").removeClass("ui-icon ui-icon-arrow-4-diag");
$("#"+id).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-close"></span>')
.prepend('<span class="ui-icon ui-icon-wrench"></span>')
.prepend('<span class="ui-icon ui-icon-plusthick"></span>')
.end()
.find(".portlet-content");
$("#maincontent .column .portlet-header
.ui-icon-plusthick").click(function() {
$(this).toggleClass("ui-icon-minusthick");
$(this).parents(".portlet:first").find(".portlet-content").toggle();
});
$("#maincontent .column .portlet-header
.ui-icon-wrench").click(function() {
$("#dialog").css("visibility","visible");
//dialog
//alert($(this).parent('div').attr('id'));
$("#dialog").dialog({
bgiframe: true,
autoOpen: false,
height: 400,
width:300,
modal: true,
show: "blind",
hide: "blind",
buttons: {
'Update Chart': function() {
title = $("#title").val();
url = "/chart/"+id+"?title="+title+'&id='+id ;
$.getJSON(url,function(data) { jsonData = data ;
reloadJsonData() }) ;
function reloadJsonData() {
data = JSON.stringify(jsonData) ;
tmp = findSWF(chartId);
tmp.load(data);
}
$(this).dialog('close');
},
Cancel: function() {
$(this).dialog('close');
}
},
close: function() {
//allFields.val('').removeClass('ui-state-error');
}
});
$('#dialog').dialog('open');
});
$("#maincontent .column .portlet-header
.ui-icon-close").click(function() {
$(this).parents(".portlet:first").remove();
});
//resize();
},
start: function(event, ui) {
},
stop: function(event, ui) {
// Here's the trick:
$("#maincontent .column").each(function() {
//alert($(this).sortable("toArray"));
//$(this).resizable();
})
}
})
$("#maincontent .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-close"></span>')
.prepend('<span class="ui-icon ui-icon-plusthick"></span>')
.end()
.find(".portlet-content");
$("#maincontent .column .portlet-header .ui-icon").click(function() {
$(this).toggleClass("ui-icon-minusthick");
$(this).parents(".portlet:first").find(".portlet-content").toggle();
});
$("#maincontent .column .portlet-header .ui-icon-close").click(function() {
$(this).parents(".portlet:first").remove();
});
$("#maincontent .column").disableSelection();
});
function findSWF(movieName) {
if (navigator.appName.indexOf("Microsoft")!= -1) {
return window[movieName];
} else {
return document[movieName];
}
}
----cut-------
Regards,
Wildan
---
OpenThink Labs
www.tobethink.com
Aligning IT and Education