Boîte de dialogue jQuery UI affichée à l'aide d'un bouton ASP.NET

J'essaie d'afficher une boîte de dialogue modale lorsque l'utilisateur clique sur un bouton ASP.Net. Ceci est ma page:Boîte de dialogue jQuery UI affichée à l'aide d'un bouton ASP.NET

<html xmlns="http://www.w3.org/1999/xhtml" > 
<head runat="server"> 
    <title></title> 
    <script src="js/jquery-1.2.6.min.js" type="text/javascript"></script> 
    <script src="js/jquery-ui-1.6.custom.min.js" type="text/javascript"></script> 
    <script type="text/javascript"> 
     $(function() { 

      $("#dialog").dialog({ 
       bgiframe: true, 
       autoOpen: false, 
       height: 300, 
       modal: true, 
       buttons: { 
        'Ok': function() { 
         $(this).dialog('close'); 
        }, 
        Cancel: function() { 
         $(this).dialog('close'); 
        } 
       }, 
       close: function() { 
        ; 
       } 
      }); 
     }); 
     function ShowDialog() { 
      $('#dialog').dialog('open'); 
     } 
    </script> 
</head> 
<body> 
    <form id="form1" runat="server"> 
    <div> 
     <asp:Button ID="TreeNew" runat="server" Text="New" OnClientClick="ShowDialog();"/> 
     <asp:Label ID="Message" runat="server"></asp:Label> 
     <div id="dialog" title="Select content type"> 
      <p id="validateTips">All form fields are required.</p> 
      <asp:RadioButtonList ID="ContentTypeList" runat="server"> 
       <asp:ListItem Value="1">Text</asp:ListItem> 
       <asp:ListItem Value="2">Image</asp:ListItem> 
       <asp:ListItem Value="3">Audio</asp:ListItem> 
       <asp:ListItem Value="4">Video</asp:ListItem> 
     </asp:RadioButtonList> 
     </div> 
    </div> 
    </form> 
</body> 
</html>

Lorsque je clique sur le bouton TreeNew apparaît pop-up modal mais inmediately la page ne postback.

Que se passe-t-il?

Source

2010-02-23 VansFannel

Pourquoi ne pas utiliser un bouton standard HTML? –

Parce que cette boîte de dialogue n'est pas toujours affichée. Je dois faire une publication avec le bouton. – VansFannel

Lors de l'ajout d'un return false; va résoudre votre problème (comme le suggère par d'autres réponses), je pense que la meilleure chose à faire est d'utiliser un bouton HTML standard. Il n'y a aucune raison d'utiliser un contrôle ASP.NET dans ce cas puisque vous n'avez pas l'intention de publier.

Si vous insistez pour utiliser un bouton ASP.NET, définissez au moins UseSubmitBehavior="False" de sorte que le bouton soit rendu comme <input type="button"/> au lieu de <input type="submit"/>.

Source

2010-02-23 19:50:51

Essayez

OnClientClick="return ShowDialog();"

function ShowDialog() { 
      $('#dialog').dialog('open'); 
      return false; 
     }

Cela empêchera la publication.

Source

2010-02-23 19:47:26 ctrlShiftBryan

Non, cela ne fonctionne pas. Le code html généré affiche le bouton en tant que bouton d'envoi. – VansFannel

Vous ne renvoyez pas de données fausses à partir de votre OnClientClick. Lorsque vous ne renvoyez pas explicitement false, "true" dans cette situation est supposé. Une valeur de retour de true à partir de votre OnClientClick indique qu'il est bon de faire une publication. Essayez de changer OnClientClick à ce qui suit (en ajoutant "return false" après votre appel à ShowDialog())

OnClientClick="ShowDialog();return false;"

Source

2010-02-23 19:47:45

oh j'aime le tien mieux que le mien :) – ctrlShiftBryan

Cet article peut-être d'une certaine valeur pour vous: using-jquery-modal-dialog-confirmation-with-an-asp-net-server-control.

Espérons que cela aide certains.

Source

2010-02-23 19:47:46 Chris

Votre OnClientClick a besoin d'return false comme ceci:

OnClientClick="ShowDialog(); return false;"

Boutons par défaut postback mais return false empêche le comportement par défaut

Source

2010-02-23 19:48:07

Utilisation preventDefault() Fonction jQuery pour empêcher le bouton postback

Essayez ceci:

function ShowDialog(evt) { 
      evt.preventDefault(); 
      $('#dialog').dialog('open'); 
     }

Source

2011-03-30 11:45:43

Boîte de dialogue jQuery UI affichée à l'aide d'un bouton ASP.NET

Répondre

Questions connexes