SimpleModal, aucune réponse du bouton ASP.NET

Question

J'ai le code suivant.

$(document).ready(function() { 
     $('#btnOpen').click(function(e) { 
      $('#content').modal({ 
       onOpen: function(dialog) { 
        dialog.overlay.fadeIn('slow', function() { 
         dialog.data.hide(); 
         dialog.container.fadeIn('slow', function() { 
          dialog.data.slideDown('slow'); 

         }); 
        }); 
       }, 
       onClose: function(dialog) { 
        dialog.data.fadeOut('slow', function() { 
         dialog.container.slideUp('slow', function() { 
          dialog.overlay.fadeOut('slow', function() { 
           $.modal.close(); // must call this! 
          }); 
         }); 
        }); 
       } 
      }); 

     }); 
     $('#btnClose').click(function(e) { 
      $.modal.close(); 
     }); 

Si j'utilise <a hrf ="#" id="btnOpen">Open</a>, cela fonctionne parfaitement. Si je remplace le avec un ASP.net Button,
<asp:Button ID="btnOpen" runat="server" Text="Open" />, rien ne s'est passé ... Toute aide s'il vous plaît?

Answer 1

Voici les codes de travail:

$('#<%= btnOpen.ClientID %>').click(function(e) { 
      e.preventDefault(); 
      $('#content').modal({ 
       onOpen: function(dialog) { 
        dialog.overlay.fadeIn('slow', function() { 
         dialog.data.hide(); 
         dialog.container.fadeIn('slow', function() { 
          dialog.data.slideDown('slow'); 

         }); 
        }); 
       }, 
       onClose: function(dialog) { 
        dialog.data.fadeOut('slow', function() { 
         dialog.container.slideUp('slow', function() { 
          dialog.overlay.fadeOut('slow', function() { 
           $.modal.close(); // must call this! 
          }); 
         }); 
        }); 
       } 
      }); 

     }); 

Seuls deux changements 1: J'avais changé le nom ('#<%= btnOpen.ClientID %>').click(...); 2: J'ai ajouté un e.preventDefault();

Cependant, pas postback du asp le bouton est autorisé

Answer 2

ASP.Net générera automatiquement des ID uniques pour les contrôles côté serveur basés sur les conteneurs des contrôles. Par conséquent, le code HTML généré n'a pas réellement un élément #btnOpen.

Vous devez utiliser l'ID client généré de ASP.Net, comme ceci:

$('#<%= btnOpen.ClientID %>').click(...); 

Alternativement, dans ASP.Net 4.0, vous pouvez définir pour empêcher ASP.Net de générer un identifiant unique ClientIDMode property de la commande:

<asp:Button ID="btnOpen" runat="server" Text="Open" ClientIDMode="Static" /> 

Answer 3

le problème est que les contrôles ASP.Net ajouter le nom du conteneur parent à leur carte d'identité, donc si vous faites une source vue HTML sur la page générée vous verrez que l'ID du bouton n'est pas btnOpen mais parentContainerID_btnOpen.

Si vous utilisez ASP.Net 4, le bouton ne peut pas ajouter le nom du contrôle parent en définissant une option, sinon vous devez modifier le code javascript pour utiliser le bon ID.