Postback is null when adding JavaScript method to 'OnClientClicked' of RadButton

[Amy]

Hi!  I'm running into an issue when adding a JavaScript method to the 'OnClientClicked' of a RadButton.  I receive a JavaScript error "this._postbacksettings is null" and the button click event handler in the code behind never fires.

There is no validation on the aspx page, and the button is contained within a RadPane.  The button has even been Ajaxed to see if that would resolve the error, but did not make a difference.

Essentially I'm trying to disable the button and change it's text once a user clicks on it so they cannot click more than once while the 'click' event handler for the button in the code behind is completing.

Here is the JavaScript code and the aspx for the button:

function DisableSubmitBtn() {
                btnSubmit = $find('<% =btnItemSubmit.ClientId %>');
                btnSubmit.set_text("Submitting");
                btnSubmit.set_enabled(false);
}


<telerik:RadButton ID="btnItemSubmit" runat="server" Skin="Sunset" Text="Submit"
        Width="98%" OnClientClicked="DisableSubmitBtn">
        <Icon PrimaryIconCssClass="rbOk" PrimaryIconLeft="4" PrimaryIconTop="4" />
</telerik:RadButton>

I have similar logic working on another page without any problem.  Though on the other page there is validation and in the Javascript I have an 'If' clause that checks if the page is valid before disabling the button and changing it's text.

Could someone help me understand why this is happening, and what I may need to do to fix the JavaScript error?

Thanks!

[Princy]

Hello Amy,

I cannot recreate the same issue at my end. Since you are disabling the button, the postBack wont happen. So one suggestion is to use setTimeOut() to execute the code. The following code worked as expected at my end.

C#:

protected void btnItemSubmit_Click(object sender, EventArgs e)
   {
       Response.Write("Submitted");
   }

Javascript:

<script type="text/javascript">

  function DisableSubmitBtn()
   {

        btnSubmit = $find("<% =btnItemSubmit.ClientID%>");

        btnSubmit.set_text("Submitting");

        btnSubmit.set_enabled(false);

        setTimeout(' btnSubmit.set_enabled(false);', 5000); //set time delay

}

</script>

Thanks,
Princy.

[Pero]

Hi Amy,

What version of RadControls for ASP.NET Ajax are you using? There was a similar problem in some of the previous versions, and the problem is fixed in the latest official version.
I examined your code and noticed the following things:

• Two parameters are passed to the handler method of the clicked client-side event - the button, and event arguments parameter. Basically you don't need to look for the button's client-side event:
  

  function DisableSubmitBtn(btnSubmit, args)
  {
    btnSubmit.set_text("Submitting");
    btnSubmit.set_enabled(false);
  }

• You must set UseSubmitBehavior="false" to the RadButton, as explained in the description of the following online example: Single-click demo.
  

Greetings,
Pero
the Telerik team

[Amy]

Princy,

Thank you for your suggestion.  Unfortunately when I tried it, I did see the button text change to 'Submitting' and become greyed out, but then the page simply reloaded with the button text still saying 'Submitted' and re-enabled.  So the 'click' event in the code behind still did not execute...though i didn't get the 'this.__ispostback is null' javascript error message.  :-)

When the user clicks the 'submit' button, data is inserted into a database and then the user is redirected to another page.  I'm attempting to disable the button to prevent users from trying to submit the page twice.

Here's the javascript code I have on another page where this functionality does work:

function DisableSecSubmitBtn() {
                var isPageValid = Page_ClientValidate();
                if (isPageValid) {
                    btnSubmit = $find('<% =btnSecSubmit.ClientId %>');
                    btnSubmit.set_text("Submitting");
                    btnSubmit.set_enabled(false);
                }
                else {
                    return;
                }
            }

On the page where this logic does work there is validation so the check to see if the page is valid doesn't cause any errors/issues.  However if I try to have that same check on the page I cannot get working, I receive the error "Page_ClientValidate is not defined".

Any other thoughts or ideas?

Thank you again, as always, for your help!

[Pero]

Hi Amy,

The Click event handler is not executed because the RadButton.UseSubmitBehavior property is not set to false. As I said in my previous reply you must set this property to false in order for the event handler to be executed correctly.

If the DisableSecSubmitBtn method is executed OnClientClicked event of the RadButton, the RadButton.CausesValidation property is not set to false, and the RadButton.ValidationGroup is not set, then there is no need to manually call the Page_ClientValidate method, because RadButton automatically calls it. Instead you should directly check if the page is valid using the Page_IsValid global variable.

Another thing I also mentioned in my previous reply, the RadButton control sends additional arguments to the client method handling the OnClientClicked event, and there is no need to explicitly $find the RadButton control. It is send as an event sender.

Regards,
Pero
the Telerik team