CODEWITHSUNDEEP
c#asp.netjquery-ui
chuck
chuck

Reputation: 141

Use jQuery alert and confirmation popup on same ASP button?

I have a situation where I need both alert and confirmation popup on same ASP button. I need alert for validation, once user enters all the necessary info i need confirmation popup to send email or submit another entry.

I am already using jQuery dialog popup for both alert and confirmation, but no idea how to combine them on same button.

//My Confirmation code

<script type="text/javascript">
    jQuery(function() {
        var dlg = jQuery("#dialog").dialog({

            draggable: false,
            autoOpen: false,
            minHeight: 10,
            minwidth: 10,
            zIndex: 99999

        });
        $('#<%=btnStart.ClientID%>').click(function() {
            $('#dialog').dialog('open');
        });
        $(".ui-dialog-titlebar").hide();
        $(".ui-dialog-titlebar-close").hide();
       dlg.parent().appendTo(jQuery("form:first"));
    });
<asp:Button  id="btnStart" runat="server" Text="btnStart"  onclick="btnStart_Click" />
<div id="dialog" style="text-align: center; display: none;font-size:14px;">
    <table>
        <tr>
            <td colspan="2">
                <asp:Label Text="Do you want to exclude these dates?" runat="server" ID="lbl"></asp:Label>
            </td>
        </tr>
        <tr>
            <td>
                <asp:Button ID="btnOk" runat="server" Text="Yes" OnClick="btnOK_Click" Style="width: 60px;" />
            </td>
            <td>
                <asp:Button ID="Button1" runat="server" Text="No" OnClick="btnCancel1_Click" Width="60px" />
            </td>
        </tr>
    </table>
</div>

//My Alert Popup

    $(document).ready(function() {
   $('#<%=btnStart.ClientID%>').click(function() {
        alert("Correct it!");
    });

    });

This is .net web application.

Upvotes: 1

Views: 2548

Answers (2)

MaxPRafferty
MaxPRafferty

Reputation: 4987

Not sure how dead set you are on using the jQuery .click event, but you can call multiple functions directly on your button using the onClientClick property, like so:

<asp:button runat="server" text="submit" OnClientClick="alert('fn1');alert('fn2');" onclick="ServerSubmitLogicMethod" />

Edit 1: to clarify, you can just run scripts directly in events, without even bothering to define an anonymous function (implicitly created around everything in the onclick event) In production I would pull all this logic into a function like submit(), but you can do something like this:

<asp:button runat="server" text="submit" OnClientClick="if(formIsValid()){alert('confirmed!');}" onclick="ServerSubmitLogicMethod" />

where

function formIsValid()
{
//some validation logic ultimately leading to a Boolean return//
return true;
}

that said, there is no reason you cant just put your validation alert into a validates() function call along with your confirm logic in your code the way you have it now, like so:

    jQuery(function() {
        var dlg = jQuery("#dialog").dialog({

            draggable: false,
            autoOpen: false,
            minHeight: 10,
            minwidth: 10,
            zIndex: 99999

        });
        $('#<%=btnStart.ClientID%>').click(function() {
            if(validates())
            {           
              $('#dialog').dialog('open');
            }
        });
        $(".ui-dialog-titlebar").hide();
        $(".ui-dialog-titlebar-close").hide();
       dlg.parent().appendTo(jQuery("form:first"));
    });

function validates(){
//...validation logic...//
alert("Correct it!");
return false;
}

Upvotes: 1

Hanlet Esca&#241;o
Hanlet Esca&#241;o

Reputation: 17380

If you are using the Dialog plugin from jqueryUI you can use the close event:

From their website:

Close Event

This event is triggered when the dialog is closed.

Code examples

Supply a callback function to handle the close event as an init option.

$( ".selector" ).dialog({
   close: function(event, ui) { ... }
});
//Bind to the close event by type: dialogclose.
$( ".selector" ).bind( "dialogclose", function(event, ui) {
  ...
});

That will trigger after the popup is closed.

Edit: You would not have this in the same button, but first you open one of the dialogs, and then upon closing this dialog you call the other, so it works as a callback function.

Upvotes: 0

Related Questions