مسج مدخل مربع الحوار المشكلة

Question

لقد خلق للفرز عنصر ونعلق على الأحداث انقر على كل مدخل لفتح مربع الحوار ولكن عندما فتح (السحب أكثر المدخل إلى لوحة التحكم الرئيسية) ثم انقر فوق الإعداد الرابط (على رأس المدخل) التنبيه() (ط الإعداد لاختبار الغرض) دائما النار على كل مدخل على لوحة القيادة الرئيسية, لماذا يحدث هذا ؟

أدناه هو رمز يمكنني استخدام لإعداد للفرز اللي تبونه تتلقى عنصر من آخر للفرز (يمكنك أن ترى العناصر على الجانب الأيسر).

يمكنك أن ترى بعض سكرينشوت على هذا الرابط : http://wildanm.wordpress.com/2009/03/25/ofc-reloading-problem-on-jquery-sortable-elements/

إذا كنت بحاجة إلى HTML أنا سيتم نشر أيضا في وقت لاحق ..

راجع للشغل, أنا جديدة في مسج ..

وذلك بفضل!

$(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-وجع id يضاف تلقائيا إنه من أجل الاختبار فقط الآن وأنا أحاول لاجتياز دوم والحصول على معرف كائن عنصر من هناك.الكائن العنصر كما تتولد تلقائيا باستخدام swfobject ، يو يمكن أن نرى إلى رمز أعلاه ..(راجع للشغل, تعليق على الجواب يقتصر على 300 شار ، لذلك أنا هنا آخر)

أطيب التحيات ،

Wildan

Answer 1

أنا لست متأكدا من أنني أفهم تماما مشكلتك لكن ما أعتقد كنت أحاول أن أقوله هو أنه عندما تقوم بسحب المدخل يفترض أن تكون ملزمة الحدث انقر فوق المستمع إلى 'الإعداد' (وجع) زر على جهاز المدخل بحيث عند النقر فوق مربع حوار للملوثات العضوية الثابتة.و أنت تقول أنه عند الضغط على مفتاح الحوار ينبثق عن كل للمداخل الخاصة بك وليس فقط النقر على زر الداخل.

إذا كان هذا هو الحال ، قد يكون من أن كنت ملزمة أن وجع عدة مرات بحيث عند النقر عليها ، كما تعمل إذا نقروا أكثر من مرة.التوصية الوحيدة لدي بالنسبة لك هو أنه بدلا من استخدام 'انقر فوق' طريقة استخدام 'ربط' الأسلوب.

هذا هو ما أعنيه...لا تفعل هذا:

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

إلى

Answer 2

حسنا أعتقد أن الجواب بسيط, مجرد استخدام $(this) حيث أن التعامل مع الحدث فقط يمكن تشغيلها عن ذلك المدخل..كانت مشكلتي في مسج تجربة..