0

データベースからレコードを削除するときに表示されるUIの削除ダイアログに問題があります。画像をクリックすると、たとえばユーザーが「oui」を押した場合など、確認ダイアログボックスが表示されます。レコードを削除した後にテーブルを更新する必要があるため、その目的で.load（ "url"）を使用します。問題は、 .load（）を使用した後にダイアログボックスを開くことができないことです。これが私のコードです（それはjavascriptです）：

(function(a){a(document).ready(function(c)
{
//avec ce variable je recupere l'identificateur que je dois utilisé pour la suppresion et 
//l'edition de jour ferié
var id;
a("#da-ex-dialog-div").dialog(
{autoOpen:false,
title:"Confirmation de suppression",
modal:true,
width:"340",
resizable: false,
buttons:[{text:"Oui",click:function(){a.ajax({type: "POST", cache: false,url:"/Pointagesgtt/deletejourferie?id="+id,success:function(){ a(".da-panel-content").load("/Pointagesgtt/listejourferie .da-table");alert("reusii");}});a(this).dialog("close");}},{text:"Non",click:function(){a(this).dialog("close");}}]
});
a("#da-ex-dialog-form-div").dialog(
{autoOpen:false,
title:"Edition jour férié",
modal:true,
width:"640",
buttons:[{text:"Valider",click:function(){a(this).find("form#da-ex-dialog-form-val").submit();}}]
}).find("#da-ex-dialog-dp").datepicker({dateFormat:"dd/mm/yy"}).end().find("form").validate({rules:{"jourferie.date":{required:true,date:true},"jourferie.occasion":{required:true},"jourferie.nombrejours":{required:true,digits:true,max:40}},invalidHandler:function(f,d){var g=d.numberOfInvalids();if(g){var e=g==1?"Vous avez manqué 1 champ.  Il a été mis en évidence":"Vous avez manqué "+g+" champs. Ils ont été mis en évidence";a("#da-validate-error").html(e).show();}else{a("#da-validate-error").hide();}}});a(".da-ex-dialog-modal").bind("click",function(d){a("#da-ex-dialog-div").dialog("option",{modal:true}).dialog("open");d.preventDefault();/* la recuperation de ligne selectionné*/ id=a(this).closest("tr").attr("id");});a(".da-ex-dialog-form").bind("click",function(d){a("#da-ex-dialog-form-div").dialog("option",{modal:true}).dialog("open");d.preventDefault();});
});

}

)(jQuery);

私のJSPページフラグメントの場合：

<!-- Main Content Wrapper -->
                <div id="da-content-wrap" class="clearfix">

                    <!-- Content Area -->
                    <div id="da-content-area">

                     <div class="grid_4">
                            <div class="da-panel collapsible">
                                <div class="da-panel-header">
                                    <span class="da-panel-title">
                                        <img src="images/icons/black/16/list.png" alt="" />
                                        Les Jours Fériés
                                    </span>

                                </div>
                                <div class="da-panel-content">
                                    <table class="da-table">
                                        <thead>
                                            <tr>

                                                <th>Date</th>
                                                <th>Occasion</th>
                                                <th>Nombrejours</th>

                                                <th></th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                        <s:iterator value="listejourferie" var="jourferie">
                                            <tr id="<s:property value="jourferieId"/>">

                                                <td><s:property value="date"/></td>
                                                <td><s:property value="occasion"/></td>
                                                <td><s:property value="nombrejours"/></td>

                                                <td class="da-icon-column">

                                                    <a  href="#"><img class="da-ex-dialog-form" src="images/icons/color/pencil.png" /></a>
                                                    <a  href="#"><img class="da-ex-dialog-modal" src="images/icons/color/cross.png" /></a>
                                                </td>
                                            </tr>

                                          </s:iterator>  
                                        </tbody>
                                    </table>
                                </div>

                              <!-- Confirmation dialog --> 

         <div id="da-ex-dialog-div" style="display:none;">
                 <p>Cet élément sera définitivement supprimé et ne peut pas être récupéré. Etes-vous sûr?</p> 
         </div> 

                              <!--End confirmation dialog  -->

                              <!-- Edit form dialog -->

                               <div id="da-ex-dialog-form-div" class="no-padding">
                                        <form id="da-ex-dialog-form-val" class="da-form">
                                            <div id="da-validate-error" class="da-message error" style="display:none;"></div>
                                            <div class="da-form-inline">
                                               <div class="da-form-row">
                                                    <label>Date<span class="required">*</span></label>
                                                    <div class="da-form-item small">
                                                     <s:textfield id="da-ex-dialog-dp" name="jourferie.date"  readonly="true"/>
                                                    </div>
                                                </div>


                                                <div class="da-form-row">
                                                <label>Nombre de jours<span class="required">*</span></label>
                                                <div class="da-form-item small">
                                                    <s:textfield name="jourferie.nombrejours" />
                                                </div>
                                               </div>

                                               <div class="da-form-row">
                                                <label>Occasion<span class="required">*</span></label>
                                                <div class="da-form-item">
                                                    <s:textfield  name="jourferie.occasion" />
                                                </div>
                                               </div>

                                            </div>
                                        </form>
                                    </div>                                   
                              <!-- End edit dialog -->  
                            </div>
                        </div>                                                  
                    </div>                        
                </div>                    
            </div>                
        </div>

        <!-- Footer -->
        <div id="da-footer">
            <div class="da-container clearfix">
                <p>Copyright 2012. CandySoft. Tous droits réservés.
            </div>
        </div>            
    </div>

どんな助けでもありがたいです。

4

1 に答える 1

0

これは、ダイアログの表示に使用される要素を読み込んでいるために発生している可能性があります。解決策は、.live1.7以下のjQueryを使用している場合に使用するか、そうでonない場合に委任することです。

// jQuery < 1.7
a(".da-ex-dialog-modal").live("click",function(d){
    a("#da-ex-dialog-div").dialog("option",{modal:true}).dialog("open");
    d.preventDefault();
});

// jQuery >= 1.7
// You can use `document` or a parent elements that you doesn't load it with AJAX
// to delegate the event
a("#da-content-area").on("click", ".da-ex-dialog-modal", function(d){
    a("#da-ex-dialog-div").dialog("option",{modal:true}).dialog("open");
    d.preventDefault();
});
于 2012-09-07T19:08:17.490 に答える