radAlert on asp:button click and open popup after clicking ok error

[Josh]

Hello

I have a asp:button with event "onClientClick" calling radAlert. The idea being if no checkbox from a list is selected, then I show error message saying no checkbox selected. If something is checked, then I show an alert warning side effects of performing this action to users.

Using normal windows alert my code worked fine. I changed it to radAlert and I get the following error when button click method returns true. any ideas why? Thanks

Please note I have included script manager tag in site master and noticed that skinManager made no difference.

Telerik.Web.UI is version 2020.3.915.45

error:

Uncaught TypeError: Cannot read properties of null (reading 'click')
    at Sys.UI.DomEvent._removeHandler (ScriptResource.axd?d=l-HRKS2UdUh-FV8pLZQt_8PO1KoV-nv3gFy0dGRtji95LKfVBi92Y5fapUBBxhFsoFd78m3hPynnuWeinQLEFSTurV2yHCVYQ4Yb8UUeyxc0W4nob0uNxUaSqn5y-HKGhZWdur9WRfeM3AuWWX3uN_SRx5d9J5ymT9svRP3TrhY1&t=49337fe8:5:58766)
    at Sys.UI.DomEvent.removeHandler (ScriptResource.axd?d=l-HRKS2UdUh-FV8pLZQt_8PO1KoV-nv3gFy0dGRtji95LKfVBi92Y5fapUBBxhFsoFd78m3hPynnuWeinQLEFSTurV2yHCVYQ4Yb8UUeyxc0W4nob0uNxUaSqn5y-HKGhZWdur9WRfeM3AuWWX3uN_SRx5d9J5ymT9svRP3TrhY1&t=49337fe8:5:58674)
    at ......

my code:

The asp:button looks like this:

                              <asp:Button Text="Baseline Permissions" runat="server" ID="btnRemapTitlesToRoles" OnClientClick="return hasTitlesSelectedForRemap();" OnClick="btnRemapTitlesToRoles_Click" CssClass="btn" /> 

the code that's called looks like this:

 <script type="text/javascript">

        (function (global, undefined) {
            var demo = {};

            global.$dialogsDemo = demo;

            Sys.Application.add_load(function () {
                //attach a handler to radio buttons to update global variable holding image url
                $telerik.$('input:radio').bind('click', function () {
                    demo.imgUrl = $telerik.$(this).val();
                });
            });

            global.alertCallBackFn = alertCallBackFn;

            function alertCallBackFn(arg) {
                // empty place holders
                return true;
            }
        })(window);
// this is the method called by asp:button
        function hasTitlesSelectedForRemap() {
            var isAnyTitleChecked = $('#' + '<%= titlesGridView.ClientID %>' + ' input:checkbox').is(":checked");
            var message = '';
            var title = '';
            if (!isAnyTitleChecked) {
                message = 'Please select titles first';
                title = 'selection missing';
            }
            else {
                message = 'Baselining permissions will reset permissions for all users of selected titles. Please proceed with caution.';
                title = 'Remap warning';
            }
            radalert(message, 330, 180, title, alertCallBackFn, $dialogsDemo.imgUrl);

            return isAnyTitleChecked;
        }

        function selectAllRolesForTitles(sender) {
            var isChecked = sender.checked;
            $('#' + '<%= titlesGridView.ClientID %>' + ' input:checkbox').each(function () {
                $(this).prop("checked", isChecked);
            });
        }

        
    </script>

 

[Doncho]

Hi Josh,

I am afraid I was not able to replicate the same issue on my side.

By reviewing the code I would assume that the form submission should happen only when there is a checked checkbox, and after the alert has been accepted by the user.

If this is the case, please let me suggest a solution with a RadButton as it exposes a cancelable client-clicking event which makes conditional submission convenient. Here is a sample code you can test:

<form id="form1" runat="server">
    <asp:ScriptManager runat="server" ID="ScriptManager1"></asp:ScriptManager>

    <telerik:RadWindowManager runat="server" ID="RadWindowManager1"></telerik:RadWindowManager>

    <div class="container">
        <asp:CheckBox Text="CheckBox1" runat="server" />
        <asp:CheckBox Text="CheckBox2" runat="server" />
        <asp:CheckBox Text="CheckBox3" runat="server" />
        <asp:CheckBox Text="CheckBox4" runat="server" />
        <asp:CheckBox Text="CheckBox5" runat="server" />
        <asp:CheckBox Text="CheckBox6" runat="server" />
    </div>

        <telerik:RadButton RenderMode="Lightweight" ID="RadButton1" runat="server" Text="Baseline Permissions" OnClientClicking="clientClicking"
            OnClick="RadButton1_Click1">
        </telerik:RadButton>

    <script>
        var $ = $telerik.$;
        var shouldSubmit = false;

        function clientClicking(sender, args) {
            var isAnyTitleChecked = $('.container input:checkbox').is(":checked");

            var callBackFunction = function (shouldSubmit) {
                if (shouldSubmit && isAnyTitleChecked) {
                    //initiate the original postback again
                    sender.click();
                    if (Telerik.Web.Browser.ff) { //work around a FireFox issue with form submission, see http://www.telerik.com/support/kb/aspnet-ajax/window/details/form-will-not-submit-after-radconfirm-in-firefox
                        sender.get_element().click();
                    }
                }
            };

            var message = '';
            var title = '';
            if (!isAnyTitleChecked) {
                message = 'Please select titles first';
                title = 'selection missing';
            }
            else {
                message = 'Baselining permissions will reset permissions for all users of selected titles. Please proceed with caution.';
                title = 'Remap warning';
            }
            radalert(message, 330, 180, title, callBackFunction, null);
            //always prevent the original postback so the RadAlert can work, it will be initiated again with code in the callback function
            args.set_cancel(true);
        }
    </script>
</form>

[Josh]

Oddly I am getting the same error even with your code. My code is inside updatePanel. Would that possibly cause this issue? if yes, how do I handle that?

[Attila Antal]

Hi Josh, 

To be able to tell you more, we would need to see the complete code/setup. Only that will help us understand how things are configured and allow us to try and replicate the issue for debugging.

Nevertheless, I advise moving any Scripts out of the UpdatePanels. 

Example:

<%--ScriptManager for loading the scripts--%>

<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
    <Scripts>
        <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
        <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
        <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
    </Scripts>
</telerik:RadScriptManager>


<%--ScriptBlock for keeping the Scripts--%>

<telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
    <script>
        /*Your Scripts here*/
    </script>
</telerik:RadScriptBlock>

<%--UpdatePanels and AJAX Components below--%>

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>

        <%--Controls here--%>

    </ContentTemplate>
</asp:UpdatePanel>

<telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" Height="200px" Width="300px">
    <%--Controls here--%>
</telerik:RadAjaxPanel>

 

Also, I suggest that you try and inspect the Console tab of the Browser's DevTools to see if there are any JavaScript or other Errors.

For tips and tricks, you can check out the following Blog Posts:

• Debugging Your Application on Client-Side
• Improve Your Debugging Skills with Chrome DevTools

 

Please share the code snippets that will help us replicate the issue and we'll check this for you.