jQuery portlet et problème de boîte de dialogue

Question

Je crée l'élément triables et associez un clic événement sur chaque portlet pour ouvrir la boîte de dialogue, mais quand je l'ouvre (glisser plus portlet sur le tableau de bord principal), et cliquez sur le lien de configuration (sur l'en-tête du portlet) la alert () (configuration i pour des fins de test) toujours le feu pour chaque portlet sur le tableau de bord principal, pourquoi cela est arrivé?

Voici le code que j'utiliser pour configurer le triables Wich recevoir d'un autre élément sortable (vous pouvez voir les éléments sur le côté gauche).

Vous pouvez voir screenshoot sur cette url: http://wildanm.wordpress.com/2009/03/25/ofc-reloading-problem-on-jquery-sortable-elements/

si vous avez besoin le balisage HTML i affichera également plus tard ..

BTW, je suis nouveau dans jQuery ..

Merci!

$(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];
        }
    }

Mise à jour:

Merci pour la réponse Kyle,

Après avoir réexaminé mon code et essayer le changement que vous proposez, je pense que la question principale est de savoir comment nous pouvons nous dire la boîte de dialogue de son élément parent (qui portlet son viennent). Sur le code ci-dessus, après que je clique sur le bouton de mise à jour, le portlet affecté est toujours le premier portlet que je laisse tomber à la zone principale .., j'espère que mon explication est assez clair pour vous .., merci!

BTW, voici le balisage d'un seul 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>

L'id ui-icône-clé est automatiquement ajoutée, il est seulement pour les tests pour l'instant, j'essaie pour traverser le Royaume, et obtenir l'ID de l'élément d'objet à partir de là. L'élément d'objet également généré automatiquement en utilisant swfobject, u peut voir à code ci-dessus .. (BTW, le commentaire sur la réponse est limitée à 300 char, donc je poste ici)

Cordialement,

Wildan

Answer 1

Je ne suis pas vraiment compris que je totalement votre problème, mais ce que je pense que vous essayez de dire est que lorsque vous faites glisser un portlet, il est censé lier un écouteur d'événements, cliquez sur le « setup » (clé) bouton sur votre portlet de sorte que lorsque l'on clique dessus une boîte de dialogue apparaît. Et, vous dites que lorsque vous cliquez sur cette clé, une boîte de dialogue apparaît pour tous portlets et non pas seulement celui que vous avez cliqué sur le bouton à l'intérieur de.

Si tel est le cas, il se peut que vous liez que la clé plusieurs fois de sorte que lorsque sa clique dessus, il agira comme si son cliqué plus d'une fois. La seule recommandation que je vous porte est qu'au lieu d'utiliser la méthode « cliquez sur » utiliser la méthode « bind ».

Ce que je veux dire ... Ne fais pas ceci:

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

Pour ce faire, au lieu et voir si cela fait une différence:

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

Si cela ne fonctionne pas, laissez-moi savoir et je verrai si je peux vous aider.

Mise à jour: Ok, donc je pense que je pourrais comprendre votre problème maintenant ... Quand cette clé se cliqué, il ouvre une boîte de dialogue et dans cette boîte de dialogue vous permet de modifier un certain portlet. Mais, vous ne savez pas comment laisser la boîte de dialogue savoir ce que portlet devrait avoir une incidence sur la mise à jour.

Alors, sur cette note, vous pouvez faire quelque chose comme ceci:

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

à votre

Answer 2

Eh bien, je pense que la réponse est simple, il suffit d'utiliser le $ (ce) de telle sorte que la poignée d'événement ne sera déclenché pour cette portlet..it spécifique était mon problème dans mon expérience JQuery ..