JQuery UI boîte de dialogue modale déclenchement ASP.Net UpdatePanel commande

Question

je un certain nombre de serverside générés Hyperliens

<a id="ctl00_ContentPlaceHolder1_APMySlides_unlinkImage_2428_1" title="Click Here to remove this image from this application." class="APMySlides_unlinkImage" href="#"></a> 
<a id="ctl00_ContentPlaceHolder1_APMySlides_unlinkImage_2428_2" title="Click Here to remove this image from this application." class="APMySlides_unlinkImage" href="#"></a> 
<a id="ctl00_ContentPlaceHolder1_APMySlides_unlinkImage_2428_3" title="Click Here to remove this image from this application." class="APMySlides_unlinkImage" href="#"></a> 
<a id="ctl00_ContentPlaceHolder1_APMySlides_unlinkImage_2424_3" title="Click Here to remove this image from this application." class="APMySlides_unlinkImage" href="#"></a> 

Une section pour déclencher la mise à jour

<asp:HiddenField ID="delhiddenfield" runat="server" /> 
<asp:Button ID="lauchdelete" runat="server" Text="" OnClick="removeLink" CssClass="lauchdelete" style="display:none;" /> 
<div id="deleteconfirm" title="Are you sure?" style="display:none;">Are you sure you want to remove this image from this application?</div> 

un petit peu de JQuery qui appelle une autre fonction quand une clique dessus

var del = '<%=delhiddenfield.ClientID %>'; 
$(function(){ 
    $('.APMySlides_unlinkImage').click(function (event) { triggerdel(event); }); 
}); 
function triggerdel(event) { 
     var caller = event.target || event.srcElement; 
     // get the id vals 
     var idsplit = caller.id.split("_"); 
     if (idsplit.length > 2) { 
      $('#' + del).val(idsplit[idsplit.length - 2] + "_" + idsplit[idsplit.length - 1]); 
      $("#deleteconfirm").dialog({ 
       resizable: false, 
       height: 140, 
       modal: true, 
       buttons: { 
        "Delete": function() { 
         // this section is supposed to trigger the update 
         $('.lauchdelete').click(); 
         $('#' + del).val(''); 
        }, 
        Cancel: function() { 
         $(this).dialog("close"); 
        } 
       } 
      }); 
     } 
    } 

Si je mets un OnClientClick = "alert ('woo lauchdelete cliqué')" dans le bouton launchdelete il se déclenche mais mon code derrière n'appelle pas. Cependant, si je supprime la boîte de dialogue modale comme suit:

function triggerdel(event) { 
     var caller = event.target || event.srcElement; 
     // get the id vals 
     var idsplit = caller.id.split("_"); 
     if (idsplit.length > 2) { 
      $('#' + del).val(idsplit[idsplit.length - 2] + "_" + idsplit[idsplit.length - 1]); 
      $('.lauchdelete').click(); 
      $('#' + del).val(''); 
     } 
    } 

Le code fonctionne correctement et déclenche le code. La seule différence que je peux voir est le contrôle du dialogue, mais pourquoi? Est-il possible de déclencher le contrôle comme prévu, en appuyant sur le bouton de suppression de la boîte de dialogue modale?

Answer 1

Vous devez vous assurer que le bouton de suppression est dans la balise de forme après la boîte de dialogue est ouverte. L'interface utilisateur jQuery aime vider le contenu de la boîte de dialogue à la fin de la balise body, ce qui placerait son contenu en dehors de la balise de formulaire. Par conséquent, si click est appelé sur un élément en dehors de la balise de formulaire, il ne déclenchera pas d'événement de publication.

certaines choses que vous pouvez essayer:

1. inspecté le dom après la boîte de dialogue est ouvert. Le bouton de suppression est-il à l'intérieur ou à l'extérieur de la balise de formulaire? Si c'est à l'extérieur, c'est votre problème. détachez puis reconnectez la boîte de dialogue pour qu'elle se trouve à l'intérieur de la balise de formulaire:

   var $ d = $ ('# deleteconfirm'). detach();

   $ ('format'). Append ($ d);

2. return false du gestionnaire d'événements de suppression

3. wrap "$ ('lauchdelete.') Cliquez sur()." Dans un setTimeout 0:

   setTimeout (function() { $ ('.lauchdelete'). click();}, 0);

4. au lieu d'appeler .click(); appelez __doPostBack directement:

   var $ deleteButton = $ ('. launchDelete');

   var delBtnUniqueNom = $ deleteButton.attr ('nom');

   __doPostBack (delBtnUniqueNom);

Answer 2

Tout semble correct. Pouvez-vous consoler l'objet pour voir s'il le trouve lorsque vous appuyez sur le bouton?

buttons: { 
    "Delete": function() { 
     // What's the output here? 
     console.log($('.lauchdelete')); 
    } 
} 

Answer 3

Vous pouvez obtenir de l'aide de here après avoir utilisé appendTo

code Exemple

$("#deleteconfirm").parent().appendTo($("form:first"));