dialogue de confirmation modale jQuery UI à asp.net: comment empêcher déclencheur événement OnClick

Question

Je tente d'utiliser dialogue de confirmation de jQuery UI.

je suis tombé sur ce problème: comment déclencher correctement la boîte de dialogue et en même temps empêcher déclencheur événement OnClick spécifié au bouton jusqu'à ce que l'utilisateur clique sur Oui ou Non boutons de dialogue?

Dans l'exemple ci-dessous sont deux façons comment la confirmation popup. Lower fonctionne bien. C'est une boîte de dialogue de confirmation JavaScript classique. Lorsque je tente d'utiliser la boîte de dialogue jQuery UI, il affiche une boîte de dialogue, mais permet d'exécuter l'événement affecté à OnClick (ici en utilisant la commande, mais je suppose qu'il n'y a pas de différence. Espérons que je ne me trompe pas.). La pièce est tirée du ASP.NET Repeater control btw.

<li> 
    <asp:LinkButton ID="lbtnRenew" runat="server" Text="Renew" CssClass="ContextMenuItem" 
    CommandName="Renew" CommandArgument="<%# Container.ItemIndex %>" 
    OnClientClick="javascript: openModalDiv('dialogRenew');" /></li> 
<li> 
    <asp:LinkButton ID="lbtnRemove" runat="server" Text="Remove" CssClass="ContextMenuItem" 
    CommandName="Remove" CommandArgument="<%# Container.ItemIndex %>" 
    OnClientClick="return confirm('Are you sure that you want to delete package?');" /></li> 

Ceci est le code JavaScript je à ce jour:

function openModalDiv(divname) { 
    $('#' + divname).dialog({ 
    bgiframe: true, 
    resizable: false, 
    modal: true, 
    overlay: { 
    backgroundColor: '#000', 
    opacity: 0.5 
    }, 
    buttons: { 
    Ok: function() { 
     $(this).dialog('close');return true; 
    }, 
    Cancel: function() { 
     $(this).dialog('close');return false; 
    } 
    } 
    }); 
} 

je manque quelque chose, mais je ne sais pas quoi. Comment puis-je résoudre ce problème?

Merci pour toute astuce.

P.S. Si vous avez besoin d'ajouter des informations supplémentaires faites le moi savoir.

Answer 1

Vous devez configurer votre boîte de dialogue modale, puis attacher un gestionnaire d'événements onclick dans le gestionnaire document.ready . En outre, depuis que vous utilisez des contrôles serveur asp.net, l'identifiant généré dans le code HTML contiendra le conteneur de dénomination de sorte que vous ne serez pas en mesure de choisir l'aide du sélecteur #lbtnRenew mentionné ci-dessus. L'ID généré sera quelque chose comme ctl00 _... lbtnRenew. Vous pouvez utiliser des sélecteurs de jquery alternatifs pour obtenir la dernière partie de l'ID ou le nom comme suit

$(function() { 
    // configure modal dialog 
$('#dialogRenew').dialog({ 
    bgiframe: true, 
    resizable: false, 
    modal: true, 
    autoOpen: false, 
    overlay: { 
    backgroundColor: '#000', 
    opacity: 0.5 
    }, 
    buttons: { 
    Ok: function() { 
     $(this).dialog('close');return true; 
    }, 
    Cancel: function() { 
     $(this).dialog('close');return false; 
    } 
    } 
    }); 

// attach onclick event handler to open dialog 
// $= selector for elements with attribute ending in text 
$("submit[name$=lbtnRenew]").click(function(event) { 
     event.preventDefault(); 
     $('#dialogRenew').dialog('open'); 
    }); 
}); 

vous pouvez supprimer le javascript en ligne OnClientClick pour votre linkbutton

Answer 2

Retirez le OnClientClick et utiliser jQuery pour ajouter l'événement, vous pouvez utiliser preventDefault ...

$("#lbtnRenew").click(function(e) { 
e.preventDefault(); //stops OnClick event 
//jscript code here 
});