Проблема с портлетом и диалоговым окном jQuery

Question

Я создаю сортируемый элемент и прикрепляю событие щелчка к каждому портлету, чтобы открыть диалоговое окно, но когда я открываю (перетаскиваю еще портлет на главную панель мониторинга) и нажимаю ссылку настройки (в заголовке портлета), появляется предупреждение() (я настраиваю для тестирования) всегда срабатывает для каждого портлета на главной панели управления, почему это происходит?

Ниже приведен код, который я использую для настройки элемента сортируемого приема Wich из другой сортируемой (вы можете увидеть элементы с левой стороны).

Вы можете увидеть скриншот по этому URL: 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];
        }
    }

Обновлять :

Спасибо, Кайл, за ответ,

После повторного изучения моего кода и попытки предложенных вами изменений я думаю, что основная проблема заключается в том, как мы можем сообщить диалоговому окну его родительский элемент (из какого портлета он произошел).В приведенном выше коде после того, как я нажимаю кнопку обновления, затронутый портлет всегда является первым портлетом, который я помещаю в основную область... надеюсь, мое объяснение достаточно ясно для вас... спасибо!

Кстати, вот разметка одного портлета:

<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 добавляется автоматически, он для тестирования только на данный момент, я стараюсь пересечь DOM и получить идентификатор элемента объекта оттуда.Элемент объекта также сгенерировал автоматически с использованием swfobject, вы можете увидеть код выше.(Кстати, комментарий к ответу ограничен 300 символами, поэтому я публикую здесь)

С наилучшими пожеланиями,

Вильдан

Answer 1

Я не совсем уверен, что полностью понимаю вашу проблему, но я думаю, что вы пытаетесь сказать, что когда вы перетаскиваете портлет, он должен привязывать прослушиватель событий щелчка к кнопке «Настройка» (гаечный ключ) на вашем компьютере. портлет, чтобы при нажатии на него появлялось диалоговое окно.И вы говорите, что когда вы нажимаете на этот гаечный ключ, всплывает диалоговое окно для все ваши портлеты, а не только тот, внутри которого вы нажали кнопку.

Если это так, возможно, вы привязываете этот гаечный ключ несколько раз, и при щелчке по нему он будет действовать так, как если бы он щелкал более одного раза.Единственная рекомендация, которую я могу вам дать, заключается в том, что вместо использования метода «щелчка» используйте метод «привязки».

Это то, что я имею в виду...Не делайте этого:

$("#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
});

Если это не поможет, дайте мне знать, и я посмотрю, смогу ли я помочь вам дальше.

ОБНОВЛЯТЬ:Хорошо, думаю, теперь я смогу понять вашу проблему...При нажатии на этот ключ открывается диалоговое окно, в котором вам разрешено вносить изменения в определенный портлет.Но вы не знаете, как сообщить диалоговому окну, на какой портлет оно должно влиять при обновлении.

Итак, на этой ноте вы можете сделать что-то вроде этого:

 $("#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');
});

на ваш

Answer 2

ну, я думаю, ответ прост: просто используйте $(this), чтобы дескриптор события запускался только для этого конкретного портлета... это была моя проблема в моем опыте работы с JQuery...