Проблема с портлетом и диалоговым окном в jQuery - PullRequest
Новая
       36

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

2 голосов
/ 30 марта 2009

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

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

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

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

Wildan

Ответы [ 2 ]

1 голос
/ 30 марта 2009

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

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

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

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

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

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

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

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

на ваш

0 голосов
/ 12 апреля 2009

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

...