jQuery portlet e problema caixa de diálogo
-
22-08-2019 - |
Pergunta
Eu crio elemento classificáveis ??e anexar um evento on-clique em cada portlet para a caixa de diálogo aberta, mas quando eu abrir (arrastar mais portlet para o painel principal), e clique no link de configuração (no cabeçalho do portlet) a alert () (configuração i para testar propósito) sempre fogo para cada portlet no painel principal, porque é que isto aconteceu?
Abaixo está o código que eu uso para configurar o classificáveis ??wich receber elemento de outro classificáveis ??(você pode ver os elementos do lado esquerdo).
Você pode ver alguns screenshoot neste url: http://wildanm.wordpress.com/2009/03/25/ofc-reloading-problem-on-jquery-sortable-elements/
Se você precisa a marcação HTML vou postar também mais tarde ..
Btw, eu sou novo em jQuery ..
Obrigado!
$(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];
}
}
Update:
Graças Kyle para a resposta,
Depois de re-examinar o meu código e tentar a mudança que você propor, eu acho que a questão principal é como nós podemos dizer a caixa de diálogo o seu elemento pai (que PORTLET sua vêm). No código acima, depois que eu clique no botão de atualização, o portlet afetada é sempre o primeiro portlet que eu cair para a área principal .., eu espero que a minha explicação é clara o suficiente para você .. obrigado!
Aliás, aqui está a marcação de um único 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>
O id ui-icon-chave é adicionada automaticamente, é para testar apenas para agora, eu tento para atravessar o dom, e obter o id do elemento objeto de lá. O elemento objeto Também gerado automaticamente usando swfobject, u pode ver o código acima .. (Btw, o comentário sobre a resposta é limitada a 300 char, então eu postar aqui)
Atenciosamente,
Wildan
Solução
Eu não tenho certeza eu entendo totalmente o seu problema, mas, o que eu acho que você está tentando dizer é que, quando você arrasta um portlet, que é suposto ser obrigatório um ouvinte de evento click para o 'setup' (chave) botão em seu portlet de modo que quando é clicado aparece uma janela. E, você está dizendo que quando você clica sobre essa chave, aparece uma janela para todas seus portlets e não apenas o que você clicou no botão dentro de.
Se for esse o caso, pode ser que você está ligando essa chave várias vezes de modo que quando seu clicado, ele vai agir como se o seu clicado mais de uma vez. A única recomendação que eu tenho para você é que em vez de usar o 'clique' uso do método do método 'bind'.
Isto é o que eu quero dizer ... Não faça isso:
$("#maincontent .column .portlet-header .ui-icon-wrench").click(function() {
// do stuff here
});
Fazer isso em vez e ver se ele faz alguma diferença:
$("#maincontent .column .portlet-header .ui-icon-wrench").unbind('click').bind('click',function() {
// do stuff here
});
Se isso não ajuda, deixe-me saber e eu vou ver se eu posso ajudá-lo.
UPDATE: Ok, então eu acho que eu poderia entender o seu problema agora ... Quando essa chave se clicado, ele exibe uma caixa de diálogo e em que o diálogo que estão autorizados a fazer alterações em um determinado portlet. Mas, você não sabe como deixar a caixa de diálogo saber o que portlet deve estar afetando na atualização.
Então, nessa nota, você pode fazer algo como isto:
$("#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');
});
com
Outras dicas
Bem, eu acho que a resposta é simples, basta usar o $ (this) para que o identificador de evento só será acionado para que portlet..it específica era o meu problema na minha experiência JQuery ..