Question

I’m having an issue with my delete UI dialog shown when deleting a record from a database. When I click an image a confirmation dialog box should be shown, for example if the user hit “oui.” I have to refresh the table after deleting the record, so I use .load(“url”) for that purpose.
The problem is that the dialog box can’t be opened after using .load()!
Here’s my code (it’s 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);

for my JSP page fragment:

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

Any help will be appreciated.

Answer 1

This may be happening because you are loading the elements that are used to show the dialog. The solution would be to use .live if you are using jQuery bellow 1.7 or delegate with on if not:

// 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();
});