Question

I create sortable element and attach an on-click event on every portlet to open dialog box, but when i open (drag more portlet to the main dashboard), and click the setup link (on the header of the portlet) the alert() (i setup for testing purpose) always fire for every portlet on the main dashboard, why is this happen ?

Below is the code i use to setup the sortable wich receive element from another sortable (you can see the elements on the left side).

You can see some screenshoot on this url : http://wildanm.wordpress.com/2009/03/25/ofc-reloading-problem-on-jquery-sortable-elements/

if you need the HTML markup i will post also later ..

Btw, i’m new in jQuery ..

Thanks!

$(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 :

Thanks Kyle for the answer,

After re-examining my code and try the change you propose, i think the main issue is how we can we tell the dialog box his parent element (which portlet his come from). On the code above, after i click the update button, the portlet affected is always the first portlet that i drop to the main area .., i hope my explanation is clear enough for you .., thanks !

Btw, here is the markup of a single 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> 

The ui-icon-wrench id is added automatically, it’s for testing only for now, i try to traverse the dom, and get the id of the object element from there. The object element also generated automatically using swfobject, u can see to code above .. (Btw, the comment on the answer is limited to 300 char, so I post here)

Best Regards,

Wildan

Answer 1

I’m not really sure I totally understand your problem, but, what I think you are trying to say is that when you drag a portlet, it’s supposed to be binding a click event listener to the ‘setup’ (wrench) button on your portlet so that when it’s clicked a dialog pops up. And, you are saying that when you click on that wrench, a dialog pops up for all your portlets and not just the one you clicked the button inside of.

If that’s the case, it may be that you are binding that wrench multiple times so that when its clicked, it will act as if its clicked more than once. The only recommendation I have for you is that instead of using the ‘click’ method use the ‘bind’ method.

This is what I mean… Don’t do this:

$('#maincontent .column .portlet-header  .ui-icon-wrench').click(function() {     // do stuff here }); 

Do this instead and see if it makes any difference:

$('#maincontent .column .portlet-header  .ui-icon-wrench').unbind('click').bind('click',function() {     // do stuff here }); 

If that doesn’t help, let me know and I will see if I can help you further.

UPDATE: Okay, so I think I might understand your problem now… When that wrench gets clicked, it brings up a dialog and in that dialog you are allowed to make changes to a certain portlet. But, you don’t know how to let the dialog box know what portlet it should be affecting on update.

So, on that note, you can do something like this:

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

to your