jQuery-Portlet und Dialogfeld Problem

Question

I sortierbar Element erstellen und fügen Sie auf jedem Portlet ein auf Sie auf Ereignisdialogfeld zu öffnen, aber wenn ich öffne (drag mehr Portlet Haupt Armaturenbrett), und klicken Sie auf den Setup-Link (auf der Kopfzeile des Portlets) die alert () (i-Setup für Testzwecke) immer für jedes Portlet auf dem Haupt Armaturenbrett Feuer, warum ist das passiert?

Unten ist der Code i Setup verwenden die sortierbare wich von einem anderen Empfangselement sortierbar (Sie die Elemente auf der linken Seite sehen).

Sie können einige Screen auf dieser URL finden Sie unter: http://wildanm.wordpress.com/2009/03/25/ofc-reloading-problem-on-jquery-sortable-elements/

, wenn Sie den HTML-Markup müssen auch ich werde nach später ..

Btw, ich bin neu in jQuery ..

Danke!

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

Danke Kyle für die Antwort,

Nach meinem Code erneut untersuchen und versuchen, die Änderung, die Sie vorschlagen, ich denke, das Hauptproblem ist, wie wir können wir das Dialogfeld sein Elternelement sagen (was seinen von Portlet kommen). Auf dem obigen Code, nachdem ich die Update-Button klicken, beeinflusst das Portlet ist immer das erste Portlet, das ich zu den wichtigsten Bereich fallen .., ich meine Erklärung hoffe für Sie klar genug ist .. Dank!

Btw, hier ist das Markup eines einzelnen Portlets:

<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>

Der ui-Symbol-Schlüssel-ID automatisch hinzugefügt wird, ist es für die Prüfung nur für jetzt, ich versuche, den dom, und erhalten die ID des Objektelementes überqueren von dort. Das Objektelement auch automatisch mit swfobject erzeugt, kann u siehe oben zu codieren .. (Btw, der Kommentar auf der Antwort ist auf 300 Zeichen, so dass ich hier posten)

Mit freundlichen Grüßen

Wildan

Answer 1

Ich bin nicht wirklich sicher, ob ich das Problem vollständig verstehen, aber das, was ich glaube, Sie versuchen, zu sagen, dass, wenn Sie einen Portlet ziehen, es sollte einen Klick-Ereignis-Listener auf die ‚Setup‘ (Schraubenschlüssel) zu verbindlich Taste auf Ihrem Portlet so dass, wenn es erscheint ein Dialog angeklickt wird. Und Sie sagen, dass, wenn Sie an diesem Schraubenschlüssel klicken, erscheint ein Dialog für alle Ihre Portlets und nicht nur die, die Sie auf die Schaltfläche geklickt innerhalb von.

Wenn das der Fall ist, kann es sein, dass Sie das Schraubenschlüssel mehrfach verbindlich sind, so dass, wenn seine geklickt haben, als wenn seine geklickt mehr als einmal wirken. Die einzige Empfehlung, die ich für Sie habe, ist, dass anstelle der Verwendung der ‚Klick‘ Methode, um die ‚bind‘ Methode verwenden.

Das ist, was ich meine ... Tu das nicht:

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

Tun Sie dies statt und sehen, ob es einen Unterschied macht:

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

Wenn das nicht hilft, lassen Sie mich wissen und ich werde sehen, ob ich Ihnen weiter helfen kann.

UPDATE: Okay, so dass ich denke, ich könnte dein Problem verstehen jetzt ... Wenn der Schraubenschlüssel angeklickt wird, bringt es einen Dialog und in diesem Dialog werden Sie erlaubt, Änderungen an ein bestimmtes Portlet zu machen. Aber Sie wissen nicht, wie das Dialogfeld wissen zu lassen, was Portlet soll es auf Updates werden zu beeinflussen.

Also, in diesem Sinne, können Sie etwas tun:

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

Ihr

Answer 2

Nun, ich denke, die Antwort ist einfach, benutzen Sie einfach den $ (this), so dass die Ereignisbehandlung nur für diese spezielle portlet..it ausgelöst werden war mein Problem in meiner JQuery Erfahrung ..