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

0 Answers 361 Views
Input
Josh
Top achievements
Rank 1
Josh asked on 16 Jul 2022, 11:51 PM

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
Telerik team
commented on 20 Jul 2022, 01:14 PM

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
Top achievements
Rank 1
commented on 21 Jul 2022, 01:40 AM

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
Telerik team
commented on 25 Jul 2022, 12:12 PM

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:

 

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

 

No answers yet. Maybe you can help?

Tags
Input
Asked by
Josh
Top achievements
Rank 1
Share this question
or