Share via

double clicking when UpdateProgress is shown

Benjamin Chew 41 Reputation points
2021-12-15T02:16:26.42+00:00

on my page, there is an update panel and update progress. Inside the update panel, there is a bootstrap tab content.

whenever the update panel is doing an async postback and the updateprogress is shown, if the user were to double click on the overlay, after the overlay is hidden, no matter which tab there are in previously they would be brought to the first tab.

when I tested on other page, it seems that double clicking when the updatepanel is loading, will cause the jquery code to somehow break

how can I prevent this?

below is my code to load the jquery code after update panel finish loading 

    var prm = Sys.WebForms.PageRequestManager.getInstance();
    if (prm != null) {
        prm.add_endRequest(function (sender, e) {
            if (sender._postBackSettings.panelsToUpdate != null) {
                InitComponent();
            }
        });
    };
ASP.NET
ASP.NET
A set of technologies in the .NET Framework for building web applications and XML web services.
3,417 questions
0 comments

2 answers

Sort by: Most helpful
Most helpful Newest Oldest
  1. Lan Huang-MSFT 28,841 Reputation points Microsoft Vendor
    2021-12-15T06:57:44.643+00:00

    Hi @Benjamin Chew ,
    add_endRequest is used to call this function after the button click event returns. This is a recursive call. You should write what you want to do after the button click event returns.
    Edit:
    157795-demo.png 

     <sc ript type="text/javasc ript">  
            $(function () {  
                SetTabs();  
            });  
            var prm = Sys.WebForms.PageRequestManager.getInstance();  
            if (prm != null) {  
                prm.add_endRequest(function (sender, e) {  
                    if (sender._postBackSettings.panelsToUpdate != null) {  
                        SetTabs();  
                    }  
                });  
            };  
            function SetTabs() {  
                var tabName = $("[id*=TabName]").val() != "" ? $("[id*=TabName]").val() : "personal";  
                $('#Tabs a[href="#' + tabName + '"]').tab('show');  
                $("#Tabs a").click(function () {  
                    $("[id*=TabName]").val($(this).attr("href").replace("#", ""));  
                });  
            };  
        </scr ipt>  

 protected void Page_Load(object sender, EventArgs e)  
        {  
            if (this.IsPostBack)  
            {  
                TabName.Value = Request.Form[TabName.UniqueID];  
            }  
        }

    157805-demo.gif
    Best regards,
    Lan Huang

    If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
    Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

  2. Benjamin Chew 41 Reputation points
    2021-12-15T09:25:30.047+00:00

    hi @Lan Huang-MSFT , sorry for the misleading function name.

    inside my InitComponent, are adding event listeners and initialize of jquery datatable. below is my InitComponent() 

    function InitComponent() {  
        $(".option_list").hide();  
        $(".checkbox_option").hide();  
        $('#<%= btnSubmitColumn.ClientID%>').click(function (e) {  
            $("#addColumnModal").modal('hide');  
        });  
  
  
        var end = $("#ddlColumnDataType option:selected").text();  
        if (end != '') {  
            if (optionControl.indexOf(end) != -1) {  
                $(".option_list").show();  
                $(".checkbox_option").hide();  
  
            }  
            else if (end == "Single Checkbox") {  
                $(".checkbox_option").show();  
                $(".option_list").hide();  
            }  
            else {  
                $(".option_list").hide();  
                $(".checkbox_option").hide();  
  
            }  
        }  
  
  
  
        $("#<%= txtColumnIdentifier.ClientID%>").on("input", function () {  
            $(this).val($(this).val().replace(/ /g, ""));  
        })  
        $("#ddlColumnDataType").change(function () {  
  
            var end = $("#ddlColumnDataType option:selected").text();  
            if (optionControl.indexOf(end) != -1) {  
                $('#<%=btnRetrieve.ClientID%>').trigger('click');  
                $(".option_list").show();  
                $(".checkbox_option").hide();  
  
            }  
            else if (end == "Single Checkbox") {  
                $(".checkbox_option").show();  
                $(".option_list").hide();  
            }  
            else {  
                $(".option_list").hide();  
                $(".checkbox_option").hide();  
            }  
        });  
  
  
  
        $("input").attr("autocomplete", "off");  
  
        fDatePickerStartEndRange("#txtAcceptResponseStartDate", "#txtAcceptResponseEndDate");  
        fDatePickerStartEndRange("#txtEmailCreatedStartDate", "#txtEmailCreatedEndDate")  
        $("#acceptResponseStartDateIcon").click(function () { $("#txtAcceptResponseStartDate").datepicker("show"); });  
        $("#acceptResponseEndDateIcon").click(function () { $("#txtAcceptResponseEndDate").datepicker("show"); });  
        $("#emailCreatedStartDateIcon").click(function () { $("#txtEmailCreatedStartDate").datepicker("show"); });  
        $("#emailCreatedEndDateIcon").click(function () { $("#txtEmailCreatedEndDate").datepicker("show"); });  
  
        if ($("#ddlAcceptResponse option:selected").text() == "Yes") {  
            $('#acceptChangeDates').show();  
        } else {  
            $('#acceptChangeDates').hide();  
        }  
  
        $('#ddlAcceptResponse').on('change', function () {  
            if (this.value == 0) {  
                $('#acceptChangeDates').show();  
            } else {  
                $('#acceptChangeDates').hide();  
            }  
        });  
  
  
        $('#<%= ddlColumnDataType.ClientID%>').change(function (e) {  
            fDropDownColumnDataTypeUpdate();  
        });  
  
        if ($("#<%= hfSaveDataSuccess.ClientID%>").val() == "") {  
            $("#<%= lblSaveDataSuccess.ClientID%>").hide();  
        }  
  
        $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {  
            console.log("tab shown event");  
            var tabTarget = $(e.target).attr("ID");  
            $("#<%=hdfMasterListTab.ClientID%>").val("0");  
            if (tabTarget == "<%= formSettingTab.ClientID%>") {  
                $("#<%=hfCurrentTabLevel.ClientID%>").val("0");  
                $(".previousTabLink").hide();  
                $(".nextTabLink").show();  
            } else if (tabTarget == "<%= level1Tab.ClientID%>") {  
                $("#<%=hfCurrentTabLevel.ClientID%>").val("1");  
                $("#level1-primary-scroll1 div").width($("#level1-primary-scroll2 table").width());  
                $(".previousTabLink").show();  
                $(".nextTabLink").show();  
            } else if (tabTarget == "<%= level2Tab.ClientID%>") {  
                $("#level2-primary-scroll1 div").width($("#level2-primary-scroll2 table").width());  
                $("#<%=hfCurrentTabLevel.ClientID%>").val("2");  
                $(".previousTabLink").show();  
                $(".nextTabLink").show();  
            } else if (tabTarget == "<%= level3Tab.ClientID%>") {  
                $("#level3-primary-scroll1 div").width($("#level3-primary-scroll2 table").width());  
                $("#<%=hfCurrentTabLevel.ClientID%>").val("3");  
                $(".previousTabLink").show();  
                $(".nextTabLink").show();  
            } else if (tabTarget == "<%= level4Tab.ClientID%>") {  
                $("#level4-primary-scroll1 div").width($("#level4-primary-scroll2 table").width());  
                $("#<%=hfCurrentTabLevel.ClientID%>").val("4");  
                $(".previousTabLink").show();  
                if (!$("#<%= masterListTab.ClientID %>").is(":visible")) {  
                    $(".nextTabLink").hide();  
                } else {  
                    $(".nextTabLink").show();  
                }  
            } else if (tabTarget == "<%= masterListTab.ClientID%>") {  
                $("#primary-scroll1 div").width($("#primary-scroll2 table").width());  
                $("#secondary-scroll1 div").width($("#secondary-scroll2 table").width());  
                $("#<%=hfCurrentTabLevel.ClientID%>").val("5");  
                $(".previousTabLink").show();  
                $(".nextTabLink").show();  
                try {  
                    if ($('#<%= gvLevel1Grid.ClientID %>').is(":visible")) {  
                        if ($.fn.dataTable.isDataTable('#<%= gvLevel1Grid.ClientID %>')) {  
                            table = $('#<%= gvLevel1Grid.ClientID %>').DataTable();  
                        }  
                        else {  
                            table = $('#<%= gvLevel1Grid.ClientID %>').DataTable({  
                                order: [[1, 'asc']],  
                                "columnDefs": [  
                                    { "orderable": false, "targets": [0] },  
                                ],  
                                "dom": '<"top"lp<"clear">>rt<"bottom"ip<"clear">>'  
                            });  
                            //table.columns.adjust().draw();  
                        }  
                    }  
  
                    if ($('#<%= gvLevel2Grid.ClientID %>').is(":visible")) {  
                        if ($.fn.dataTable.isDataTable('#<%= gvLevel2Grid.ClientID %>')) {  
                            table = $('#<%= gvLevel2Grid.ClientID %>').DataTable();  
                        }  
                        else {  
                            table = $('#<%= gvLevel2Grid.ClientID %>').DataTable({  
                                order: [[1, 'asc']],  
                                "columnDefs": [  
                                    { "orderable": false, "targets": [0] },  
                                ],  
                                "dom": '<"top"lp<"clear">>rt<"bottom"ip<"clear">>'  
                            });  
                            //table.columns.adjust().draw();  
                        }  
                    }  
                }  
                catch (err) {  
  
                }  
                  
            }  
              
            else if (tabTarget == "<%= workflowTab.ClientID%>") {  
                $("#<%=hfCurrentTabLevel.ClientID%>").val("6");  
                $(".previousTabLink").show();  
                $(".nextTabLink").show();  
            }  
            else if (tabTarget == "<%= emailNotificationTab.ClientID%>") {  
                $("#primary-scroll3 div").width($("#primary-scroll4 table").width());  
                $("#<%=hfCurrentTabLevel.ClientID%>").val("7");  
                $(".previousTabLink").show();  
                $(".nextTabLink").hide();  
                try {  
                    if ($.fn.dataTable.isDataTable('#<%= gvEmailList.ClientID %>')) {  
                        table = $('#<%= gvEmailList.ClientID %>').DataTable();  
                }  
                else {  
                        table = $('#<%= gvEmailList.ClientID %>').DataTable({  
                            order: [[0, 'desc']],  
                            "columnDefs": [  
                                { "orderable": true, "targets": '_all' },  
                            ],  
                            "dom": '<"top"lp<"clear">>rt<"bottom"ip<"clear">>'  
                        });  
                    }  
                }  
                catch (err) {}  
                  
            }  
        });  
  
  
        if ($("#<%=hfCurrentTabLevel.ClientID%>").val() == "" || $("#<%=hfCurrentTabLevel.ClientID%>").val() == "0") {  
            $("#<%=hfCurrentTabLevel.ClientID%>").val("0");  
            $(".previousTabLink").hide();  
        } else if ($("#<%=hfCurrentTabLevel.ClientID%>").val() == "7") {  
            $(".nextTabLink").hide();  
        }  
        if ($("#<%=hdfMasterListTab.ClientID%>").val() == "") {  
            $("#<%=hdfMasterListTab.ClientID%>").val("0");  
        }  
  
        $('#<%= formSettingTab.ClientID%>, #<%= level1Tab.ClientID%>, #<%= level2Tab.ClientID%>, #<%= level3Tab.ClientID%>, #<%= level4Tab.ClientID%>, #<%= masterListTab.ClientID%>', '#<%= workflowTab.ClientID%>', '#<%= emailNotificationTab.ClientID%>').unbind('click').bind('click', function () {  
            console.log("tab clicked");  
            if (!confirm("Are you sure you want to leave this page, you have unsaved changes. Do you want to proceed anyway?")) {  
                return false;  
            } else {  
                $("#<%= hfSaveDataSuccess.ClientID%>").val("");  
                $("#<%= lblSaveDataSuccess.ClientID%>").hide();  
                return true;  
            }  
        });  
  
        var tabLevel = $("#<%=hfCurrentTabLevel.ClientID%>").val();  
        console.log("tabLevel: " + tabLevel);  
        var masterListTabLevel = $("#<%=hdfMasterListTab.ClientID%>").val();  
  
        fClickTabBasedOnLevel(tabLevel);  
        fClickTabBasedOnMasterListLevel(masterListTabLevel);  
  
        fDropDownColumnDataTypeUpdate();  
  
  
        $('#previousTabLink, #nextTabLink').unbind('click').bind('click', function () {  
            if (!confirm("Are you sure you want to proceed?")) {  
                return false;  
            } else {  
                $("#<%= hfSaveDataSuccess.ClientID%>").val("");  
                $("#<%= lblSaveDataSuccess.ClientID%>").hide();  
                return true;  
            }  
        });  
  
        $("#primary-scroll1 div").width($("#primary-scroll2 table").width());  
        $("#secondary-scroll1 div").width($("#secondary-scroll2 table").width());  
        $("#primary-scroll1").on("scroll", function () {  
            $("#primary-scroll2").scrollLeft($(this).scrollLeft());  
        });  
        $("#primary-scroll2").on("scroll", function () {  
            $("#primary-scroll1").scrollLeft($(this).scrollLeft());  
        });  
  
        $("#secondary-scroll1").on("scroll", function () {  
            $("#secondary-scroll2").scrollLeft($(this).scrollLeft());  
        });  
  
        $("#secondary-scroll2").on("scroll", function () {  
            $("#secondary-scroll1").scrollLeft($(this).scrollLeft());  
        });  
  
        try {  
            if ($('#<%= gvLevel1Grid.ClientID %>').is(":visible")) {  
                if ($.fn.dataTable.isDataTable('#<%= gvLevel1Grid.ClientID %>')) {  
                    table = $('#<%= gvLevel1Grid.ClientID %>').DataTable();  
                }  
                else {  
                    table = $('#<%= gvLevel1Grid.ClientID %>').DataTable({  
                        order: [[1, 'asc']],  
                        "columnDefs": [  
                            { "orderable": false, "targets": [0] },  
                        ],  
                        "dom": '<"top"lp<"clear">>rt<"bottom"ip<"clear">>'  
                    });  
                    //table.columns.adjust().draw();  
                }  
            }  
  
        }  
        catch (err) {  
  
        }  
        $('#<%= btnInstSave.ClientID%>').unbind('click').bind('click', function () {  
  
            $('#emailInstructionModal').modal('hide');  
  
        });  
        $('.collapse')  
            .on('shown.bs.collapse', function () {  
                $(".accordion-button")  
                    .find(".fa-plus")  
                    .removeClass("fa-plus")  
                    .addClass("fa-minus");  
                $('#<%= hfAccordionState.ClientID%>').val("shown");  
            })  
            .on('hidden.bs.collapse', function () {  
                $(".accordion-button")  
                    .find(".fa-minus")  
                    .removeClass("fa-minus")  
                    .addClass("fa-plus");  
                $('#<%= hfAccordionState.ClientID%>').val("");  
  
             });  
  
        var lastAccordionState = $('#<%= hfAccordionState.ClientID%>').val();  
        if (lastAccordionState != null && lastAccordionState != "") {  
            $("#btnAccordionSearch").click();  
        }  
    }