Gestire il bottone di conferma lato client con JQuery

Gestire il bottone di conferma lato client con JQuery

Lo scopo è quello di attivare un pop-up di conferma alla pressione di un bottone e di interrompere il post qualora l'esito della conferma sia negativo, il tutto lato client e con l'aiuto di JQuery. Vediamo i passi necessari :

Aggiungere JQuery alla pagina

<script type="text/javascript" src="http://ajax.googlepics.com/ajax/libs/jquery/1.4.1/jquery.js"></script>

Aggiungere il bottone

<asp:Button ID="btnTest" runat="server" Text="Leggi" OnClick="btnTest_OnClick" />

Al bottone è stato aggiunto anche l'evento server "btnTest_OnClick" sul quale è possibile aggiungere un break-point e vedere così il corretto funzionamento della soluzione.

protected void btnTest_OnClick(objct sender, EventArgs e)
{
aggiungere qui codice e break-point
}

A questo punto non resta che inserire nella pagina la logica "lato client" che si occuperà di intercettare l'evento click del bottone, visualizzare un pop-up in cui mostra un messaggio e i bottoni Ok e Annulla.
Se verrà premuto il bottone annulla non dovrà essere generato il post e quindi non dovrà essere eseguito il codice "lato server", ossia la routine btnTest_OnClick().
In questo esempio aprirò un breve messaggio che notifica questa scelta.
Se invece verrà premuto il bottone Ok verrà eseguito il post e quindi il codice "lato server".

    <script type="text/javascript">
        function Bivio(event) {

            if (!confirm('Vuoi procedere ?'))
            {
                event.preventDefault();
                alert('Non ne ha nessuna intenzione');
            }
        }

        $(function () {
            $("[id$=btnTest]").click(function (event) {
                Bivio(event);
            });
        });

    </script>

Oppure è possibile attaccare l'evento click anche nel seguente modo :

$("#bottone").on("click", function (event) { ...... });

Torna su
Categoria

JQuery - Javascript (4)


Autore

Marco Cecchetti


Data pubblicazione.

21/08/2012



Recensioni

Articolo non ancora recensito