Clicking a button inside a ajaxified usercontrol using javascript

[saravanan k]

Hi,

I am having a radgrid assosiated with a radajaxmanager and radajaxloadingpanel. I am using usercontrol insert and edit forms. I am having a button inside insert form (usercontrol). On click of that button i want to confirm with the user. So i wrote the script to call a radconfirm onclientclick of that button and if [OK] button is clicked in the confirm box, i am programatically calling the button click from javascript code using buttonObj.click();

My code works well in following cases,
                  1. if i use image button in place of asp:button (or)
                   2. if i remove the radajaxmanager and ajaxpanel from the the parent page.

But not with the normal asp:button. Can you please help me in sorting out the problem.

My script to call radconfirm,

<script type="text/javascript">
        var buttonObj;
        var confirmValue = false;

        function UpdateConfirm(btn) {
            if (!confirmValue) {
                buttonObj= btn;
                var confirmString = "Do you wish to update?.";
                radconfirm(confirmString, UpdateConfirmCallBackFn, 300, 120, "", "Confirm Update");
                return false;
            }
        }

    function UpdateConfirmCallBackFn(arg) {
        if (arg) {
            confirmValue= true;
            buttonObj.click();
        }
   }

My button inside the usercontrol insert form,

<asp:Button ID="btnUpdate" runat="server" Text="Update"
        ValidationGroup="grp" OnClick="btn_Click" OnClientClick="return UpdateConfirm(this);" />

My RadAjaxManager Code in the parent grid page,

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Default">
            Loading...
        </telerik:RadAjaxLoadingPanel>
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel1">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="grid1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="grid1" />
                                            </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>

Regards,
Saravanan K

[Veli]

Hi saravanan,

Try the following OnClientClick definition instead:

<asp:Button ID="btnUpdate" runat="server" Text="Update"
        OnClick="btn_Click" OnClientClick="if(!UpdateConfirm(this)) return false;" />

And you have to modify the UpdateConfirm() function to always return either true or false:

function UpdateConfirm(btn)
{
    if (!confirmValue)
    {
        buttonObj = btn;
        var confirmString = "Do you wish to update?.";
        radconfirm(confirmString, UpdateConfirmCallBackFn, 300, 120, "", "Confirm Update");
        return false;
    }
    else
    {
        confirmValue = false;
        return true;
    }
}

This should be working OK now. The reason it doesn't work with your version is because the AJAX manager replaces submit buttons (<input type="submit">) with push buttons (<input type="button" onclick="__doPostBack(...)">). So, what happens when you attach a return someMethod() type of function call to onclick is:

<input type="button" onclick="return UpdateConfirm(this); __doPostBack(...)" />

You can note that the above method call will return just before __doPostBack() no matter the return value. So, __doPostBack() is never executed. Modifying the way we call UpdateConfirm() to the above version generates an <input> of the form:

<input type="button" onclick="if(!UpdateConfirm(this)) return false;__doPostBack(...)" />

The above script will return only if UpdateConfirm() returns false. So, you need to return true to have __doPostBack() reached. Hence the requirement to explicitly return true from your code when you have passed the confirmation.

The above scenario does not happen with ImageButtons or LinkButtons because they are not modified.

Regards,
Veli
the Telerik team