jquery UI - exemple simple, qu'est-ce que je fais mal?

Question

J'essaye de mettre du code d'interface utilisateur jquery dans une application asp.net existante, et pourrait utiliser un coup de main ...

J'ai un bouton, quand un utilisateur clique dessus, je veux faire apparaître une interface utilisateur jquery dialogue avec deux boutons de confirmation go/nogo.

Cela fonctionne sauf, lorsque je clique sur le bouton, il ouvre et se ferme immédiatement ... en tant que nouvel utilisateur jquery, je suis sûr que je manque juste quelque chose de simple ...

Voici le javascript pour ouvrir la boîte de dialogue:

<script type="text/javascript" > 

    $(function() { 
    // Cancel Event Dialog Box 
    $('#CancelDialog').dialog({ 
     autoOpen: false, 
     width: 500, 
     buttons: { 
      "Cancel This Event": function() {$(this).dialog("close");}, 
      "Do Not Cancel": function() {$(this).dialog("close");} 
     } 
    }); 

}); 
</script> 

et voici le code qui l'appelle:

<asp:Button id="btnCancelMeeting" Text="Cancel Event" runat="server" /> 
<script language="javascript" type="text/javascript"> 
    $(document).ready(function() { 
    $('#CancelDialog').dialog(); 
    $('#btnCancelMeeting').click(function() {$('#CancelDialog').dialog('open'); }); 
     }); 
</script> 

<div id="CancelDialog" title="Cancel and Event or Meeting"><p>Cancel this event.</p></div> 

Pour récapituler: je clique sur le bouton, je reçois le dialogue avec les deux boutons et un message que je veux, b Mais il se referme tout seul une seconde plus tard ... Qu'est-ce que je fais de mal? OK, maintenant je pense que je vois ce qui se passe ... quand je clique sur le bouton, la boîte de dialogue apparaît comme désiré, mais la page est rechargée à nouveau du serveur ... ce qui réinitialise le page entière, y compris l'effacement de la boîte de dialogue.

donc ce que je veux vraiment arriver, est mimer ce comportement:

<asp:Button id="btnDelete" Text="Delete Event" runat="server" OnClientClick='javascript:return confirm(&quot;Are you sure you would like to permanently delete this event/meeting? This action cannot be undone.&quot;)' OnClick="btnDelete_Click" /> 

où le clic génère un événement côté client, et seulement si « OK » est choisi, fait la force de la page un reload. Quelqu'un peut-il donner la syntaxe pour suspendre cette boîte de dialogue queryUI de l'événement OnClientClick?

Answer 1

donc vous voulez attraper l'événement avant qu'il ne déclenche le serveur, non?

d'abord, vous devez prendre l'événement clic, utilisez ce bouton comme un bouton normal uniquement, changer le bouton courant:

<asp:Button id="btnShowDialog" Text="Delete Event" runat="server" OnClientClick="$('#myDialog').dialog('open');" /> 

ou pour cela, vous pouvez utiliser un lien normal ou html bouton, au lieu d'utiliser le serveur pour le créer

<input type="button" value"Delete Event" onclick="$('#myDialog').dialog('open');" /> 

cela ouvrira la boîte de dialogue:

maintenant, ce que vous avez besoin est de placer le bouton qui déclenche l'événement du serveur dans le dia connectez-vous!

que vous pouvez accomplir en passant la sauvegarde javascript que vous pouvez trouver la barre d'état du navigateur lorsque vous cliquez sur le bouton, en d'autres termes, faire un retour en utilisant javascript seulement - Vous pouvez trouver le bon code changer ButtonButton et souris dessus.

changer le:

"Cancel This Event": function() {$(this).dialog("close");} 

à:

"Cancel This Event": function() { 
    __doPostBack('btnDeleteEvent', ''); 
} 

cela fera la même chose qu'un btnDeleteEvent fait, vous avez besoin d'avoir un LinkButton appelé ce nom réel effectuer le clic behavior (make text = "" donc ça n'apparait pas dans la page).

<asp:LinkButton ID="btnDeleteEvent" runat="server" Text="" onclick="btnDeleteEvent_Click" /> 

se rappeler d'avoir dans le fichier code-behind l'événement à cuire jusqu'à

protected void btnDeleteEvent_Click(object sender, EventArgs e) 
{ 
    // do something 
} 

Mise à jour

ajouté: link to the complete source

Answer 2

Retirez le

$('#CancelDialog').dialog(); 

après

$(document).ready(function() { 

et essayer.

Prendre 2. Il est possible que le comportement par défaut de 'button' en cours de soumission soit ce qui le pousse à recharger la page. Pouvez-vous essayer d'ajouter type = 'button' au bouton afin qu'il ne soit pas par défaut à soumettre?

Answer 3

Je ne sais pas jquery beaucoup mieux que vous le faites, mais je pense que pour faire ce que vous voulez, vous devez faire le bouton d'annulation de réunion cliquez sur return false:

$('#btnCancelMeeting').click(function() {$('#CancelDialog').dialog('open'); return false; }); 

Ensuite, faire le « Annuler cet événement » bouton lancer la cancel avec le serveur:

"Cancel This Event": function() { CallFunctionThatReallyCancelsTheEvent(); $(this).dialog("close");}, 

Answer 4

Vous n'avez pas besoin le premier bit de JavaScript car il sera fait par la seconde de toute façon (je pense que la lutte contre sur le système est à l'origine de la fermeture). Votre deuxième morceau de JavaScript devrait être dans un bloc de script dans l'en-tête de la page et devrait ressembler à ceci.

<script> 
    $(document).ready(function() { 
    $("#btnCancelMeeting").click(function() { 
     $("#CancelDialog").dialog({ 
      autoOpen: true, 
      width: 500, 
      buttons: { 
      "Cancel This Event": function() { $(this).dialog("close"); }, 
      "Do Not Cancel": function() { $(this).dialog("close"); } 
      } 
      }); 
     }); 
    }); 
</script> 

Je suis un peu inquiet au sujet du fait que se trouve sur un bouton ASP.NET comme je soupçonne que le ferait un postback (sauf si vous avez activé que hors - si ma mémoire est bonne il y a une propriété qui contrôle que) et cela aussi pourrait causer des problèmes.

Une version de travail est disponible à: test.html sample - J'ai utilisé un bouton normal plutôt qu'un ASP.NET parce que je voulais juste obtenir la bonne fonctionnalité.

Answer 5

Je ne suis pas au courant du côté serveur .NET, mais si ce problème se produisait dans une installation côté client jQuery, cela devrait être ajouté à la fonction de gestion de clic:

function(event){ 
    event.preventDefault(); 
    event.stopPropagation(); 
    $(this).dialog("open"); 
}

EDIT: Désolé, ce serait sur l'appel de dialogue ouvert, pas les gestionnaires de fermeture.