Prevent Postback after opening jQuery dialog box

Question

Page:

<body>
 <form id="frmLogin" runat="server">  
  <asp:Button ID="btnClick" OnClientClick="openConfirmDialog();" OnClick="PopulateLabel"  runat="server"/>
  <div id="divDialog"></div>
  <asp:Label ID="lblText" runat="server"></asp:Label>
 </form>
</body>

JS

<script type="text/javascript">
 $(document).ready(function() {
 $("#divDialog").dialog({autoOpen: false,
                     buttons: { "Ok": function()
                                      { 
                                         $(this).dialog("close");
                                      },
                                "Cancel": function()
                                      { 
                                          $(this).dialog("close");
                                      }
                              } 
                   });
 });

 function openConfirmDialog()
 {
  $("#divDialog").dialog("open");
 }

C#

protected void Page_Load(object sender, EventArgs e)
 {
    lblText.Text = "";
 }

protected void PopulateLabel(object sender, EventArgs e)
 {
    lblText.Text = "Hello";
 }

This code opens me a dialog box with Ok and Cancel button but it do not wait for user activity and post the page immediately and the label gets populated. I need to call the c# function based on user activity. If user clicks "Ok" label should get populated and if user clicks "Cancel" it should not call the c# function. How do I achieve this?

Frédéric Hamidi · Answer 1 · 2010-12-08T10:12:24.333

4

First, to prevent the page from immediately posting back to the server, you need to cancel the default behavior of the click event by returning false from your handler:

<asp:Button ID="btnClick" runat="server" OnClick="PopulateLabel"
    OnClientClick="openConfirmDialog(); return false;" />

Next, you need to perform the postback yourself when your Ok button is clicked:

$("#divDialog").dialog({
    autoOpen: false,
    buttons: {
        "Ok": function() { 
            $(this).dialog("close");
            __doPostBack("btnClick", "");
        },
        "Cancel": function() { 
            $(this).dialog("close");
        }
    }
});

Note that the first argument to __doPostBack() is the name of the control (its UniqueID in ASP.NET terminology). Since the button is a direct child of the <form> element, we can hardcode its id in the __doPostBack() call, but things will get more complicated if it resides in a container hierarchy. In that case, you can use ClientScript.GetPostBackEventReference() to generate the appropriate call to __doPostBack().

EDIT: Since your page does not contain any postback-enabled control, __doPostBack() won't be defined on the client side. To work around that problem, you can use a LinkButton control instead of a Button control.

edited Dec 08 '10 at 10:12

answered Dec 08 '10 at 07:47

Frédéric Hamidi

258,201
41
486
479

__doPostBack("btnClick", ""); is not calling my c# function – Gopi Dec 08 '10 at 07:53
@Sri Kumar, what's the `name` attribute of your button (in the rendered page source)? – Frédéric Hamidi Dec 08 '10 at 07:56
btnClick is my button ID and btnClick is the name – Gopi Dec 08 '10 at 08:43
@Sri Kumar, then that should work, your `PopulateLabel()` function should be called on postback. Are you doing something special in the `RaisePostBackEvent()` method of your page? – Frédéric Hamidi Dec 08 '10 at 08:47
I get this error in Error Console "__doPostBack is not defined" and I read this http://stackoverflow.com/questions/3480362/dopostback-is-not-defined but I do not understand what control has to be added? – Gopi Dec 08 '10 at 09:27
Can you do `RegisterRequiresPostback(btnClick);` during your page's `PreRender` phase and check if that fixes the issue? – Frédéric Hamidi Dec 08 '10 at 09:34
Added Page.RegisterRequiresPostBack(btnClick); in Pageload and Error : Page.RegisterRequiresPostBack can only be called on controls that implement IPostBackDataHandler – Gopi Dec 08 '10 at 10:03
That's it, you need to use a postback-aware control, like a `LinkButton` instead of your `Button` control, and `__doPostback()` will be defined. – Frédéric Hamidi Dec 08 '10 at 10:09
Problem here I cannot go for a link. It will be a button :( – Gopi Dec 08 '10 at 10:12
Then you might want to add a hidden `LinkButton` to your page, something like `` – Frédéric Hamidi Dec 08 '10 at 10:14
I tried to have another button with visibility as false and used to trigger $("btnHiddenClick").click(); its click event but this also fails as the jQuery is not trigger its respective event – Gopi Dec 08 '10 at 10:19

score 0 · Accepted Answer · answered Dec 11 '10 at 08:16

0

Added another button and used the jQuery click() event to trigger new button's click event which will in turn trigger the respective event handler in C#

answered Dec 11 '10 at 08:16

Gopi

5,656
22
80
146

Prevent Postback after opening jQuery dialog box

2 Answers2