jquery - jQuery ポートレットとダイアログボックスの問題

Question

並べ替え可能な要素を作成し、すべてのポートレットにオンクリックイベントを添付してダイアログボックスを開きますが、(ポートレットをメインダッシュボードにさらにドラッグして) 開くと (ポートレットのヘッダーにある) セットアップリンクをクリックすると、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 id が自動的に追加されます。これは今のところテスト用です。dom をトラバースして、そこから object 要素の id を取得しようとしています。object 要素も swfobject を使用して自動的に生成されます。上記のコードを見ることができます.. (ところで、回答のコメントは 300 文字に制限されているため、ここに投稿します)

よろしくお願いします、

ワイルダン

score 1 · Accepted Answer

あなたの問題を完全に理解しているかどうかはよくわかりませんが、あなたが言おうとしていると思うのは、ポートレットをドラッグすると、クリックイベントリスナーがあなたのクリックするとダイアログが表示されるようにします。そして、そのレンチをクリックすると、内部のボタンをクリックしたポートレットだけでなく、すべてのポートレットのダイアログがポップアップするということです。

その場合は、そのレンチを複数回バインドして、クリックすると、複数回クリックされたように動作する可能性があります。唯一の推奨事項は、「クリック」メソッドを使用する代わりに「バインド」メソッドを使用することです。

これが私が言いたいことです...これをしないでください：

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

あなたに

jquery - jQuery ポートレットとダイアログ ボックスの問題

2 に答える 2

Related

Reference

jquery - jQuery ポートレットとダイアログボックスの問題