我创建可排序元素,并在每个portlet上附加一个on-click事件以打开对话框,但是当我打开时(将更多portlet拖动到主仪表板),然后单击setup链接(在portlet的标题上)alert() (我为测试目的而设置)总是在主仪表板上的每个portlet触发,为什么会发生这种情况?
下面是我用来从另一个设置可排序的wich接收元素的代码
可排序的(您可以在左侧看到元素)。
您可以在以下网址上看到一些屏幕截图:http://wildanm.wordpress.com/2009/03/25/ofc-reloading-problem-on-jquery-sortable-elements/
如果您需要HTML标记,我也会在以后发布..
顺便说一句,我是jQuery的新手..
谢谢!
$(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,
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];
}
}
更新:
感谢Kyle的回答,
重新检查我的代码并尝试您提出的更改之后,我认为主要问题是我们如何才能告诉对话框其父元素(他来自哪个portlet)。在上面的代码中,单击更新按钮后,受影响的portlet始终是我放到主要区域的第一个portlet ..,我希望我的解释对您足够清楚..,谢谢!
顺便说一句,这是单个portlet的标记:
<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" id="setup-gambarTigaSatu"/>
<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>
ui-icon-wrench ID是自动添加的,目前仅用于测试,我尝试
遍历dom,并从那里获取对象元素的ID。对象元素
也可以使用swfobject自动生成,请参见上面的代码。
(顺便说一句,对答案的评论仅限于300个字符,因此我在此处发布)
最好的祝福,
维尔丹
最佳答案
我不确定我是否完全理解您的问题,但是,我认为您想说的是,当您拖动Portlet时,应该将click事件监听器绑定到您的“设置”(扳手)按钮上portlet,以便在单击时弹出一个对话框。而且,您说的是,当您单击该扳手时,将弹出一个对话框供您查看所有的portlet,而不仅仅是单击其中的按钮的对话框。
如果是这种情况,则可能是您多次绑定该扳手,以便在单击该扳手时,其作用就好像单击了多次一样。我对您的唯一建议是,不要使用“单击”方法,而应使用“绑定”方法。
这就是我的意思...不要这样做:
$("#maincontent .column .portlet-header .ui-icon-wrench").click(function() {
// do stuff here
});
改为这样做,看看是否有任何区别:
$("#maincontent .column .portlet-header .ui-icon-wrench").unbind('click').bind('click',function() {
// do stuff here
});
如果那没有帮助,请告诉我,我会看看是否能进一步帮助您。
更新:
好的,所以我想我现在可以理解您的问题...单击该扳手时,它会弹出一个对话框,您可以在该对话框中对某个portlet进行更改。但是,您不知道如何让对话框知道更新时应该影响哪个portlet。
因此,请注意,您可以执行以下操作:
$("#maincontent .column .portlet-header .ui-icon-wrench").unbind('click').bind('click',function() {
var portlet_to_edit = $(this).parents('.portlet').attr('id');
$("#dialog").css("visibility","visible");
$('#dialog').data('my_app.portlet_to_edit',portlet_to_edit);
$("#dialog").dialog({
// some of your stuff here...
buttons: {
'Update Chart': function() {
var portlet_to_edit_id = $(this).data('my_app.portlet_to_edit');
var portlet_to_edit = $('#'+portlet_to_edit_id);
// Do stuff with 'portlet_to_edit', for instance:
portlet_to_edit.find('.portlet-content').remove();
// ... or whatever you wanted to do...
},
// the rest of your buttons and stuff
}
});
$('#dialog').dialog('open');
});
给你
关于jquery - jQuery Portlet和对话框问题,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/696220/