Chrome browser is experiencing an issue with the Modal RadWindow not closing properly

In my main "Report" page, there are actions available to the user that open a modal RadWindow. The user can then take actions within the modal window, click Save, and the modal window should close while the main grid refreshes.

While this functionality works well in both IE and Firefox, Chrome seems to be causing an issue. In Chrome, all the actions are performed correctly, but the modal page remains open after clicking Save. Interestingly, the Cancel button and the close button on the form still work as expected.

The JavaScript code in the child window is as follows:

<script type="text/javascript">
    function GetRadWindow() {
        var oWindow = null;
        if (window.radWindow)
            oWindow = window.radWindow;
        else if (window.frameElement.radWindow)
            oWindow = window.frameElement.radWindow;
        return oWindow;
    }

    function CloseRadWindow() {
        var oWnd = GetRadWindow()
        oWnd.SetUrl("");
        oWnd.close();
    }

    function CloseAndRebind(args) {
        var oWnd = GetRadWindow()
        oWnd.BrowserWindow.refreshGrid(args);
        oWnd.SetUrl("");
        oWnd.close();
    }
</script>

The parent's refreshgrid function is as follows:

    <script type="text/javascript">
        function refreshGrid(arg) {
            if (!arg) {
                $find("<%= RadAjaxManager.GetCurrent(Page).ClientID %>").ajaxRequest("Rebind");
            }
            else {
                $find("<%= RadAjaxManager.GetCurrent(Page).ClientID %>").ajaxRequest("RebindAndNavigate");
            }
        }
    </script>

The modal window on the parent page is triggered by the button click event:

    protected void btnSplitInvoice_Click(object sender, EventArgs e)
    {
        var btn = sender as Button;
        var item = (GridDataItem)btn.Parent.Parent;

        long id = long.Parse(item["Id"].Text);
        var itemType = this.TabStrip1.SelectedIndex == 0 ? "TransferOrderInvoice" : "EquipmentInvoice";

        string scriptstring = "var oWindow=radopen('../Misc/SplitInvoice.aspx?id=" + id + "&type=" + itemType + "','SplitInvoice');oWindow.SetModal(true);";
        ScriptManager.RegisterStartupScript(this, this.GetType(), "openwindow", scriptstring, true);
    }

After performing the necessary operations in the code behind, the child window's save button is handled with:

ScriptManager.RegisterClientScriptBlock(this.Page, this.GetType(), "mykey", "CloseAndRebind('navigateToInserted');", true);

The cancel button is set up as follows:

<button type="button" class="CancelBtn" value="" onclick="CloseRadWindow()">
                        </button>

When encountering issues in Chrome, it was suggested to add window.open('', '_self', ''); to the close, but this did not resolve the problem. After investigating in the Chrome console, an error was noticed on the main page when refreshgrid is executed:

Cannot call method 'ajaxRequest' of null

Further investigation revealed that Chrome does not seem to find the RadAjaxManager from the Master page in time for refreshGrid to run, thus resulting in the null error mentioned above. A temporary solution was implemented by replacing the contents of the refreshGrid function with document.location.reload(); which works, but reloading the entire page is not ideal. The reason for this discrepancy between Chrome and IE/Firefox is not clear.

Additional information that may be helpful includes the Page_Load event in the main page:

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!this.IsPostBack)
        {
            this.Session["AllUserLocationValue"] = string.Empty;

            this.InitializeThePage();
        }

        RadAjaxManager manager = RadAjaxManager.GetCurrent(this.Page);
        manager.AjaxRequest += this.manager_AjaxRequest;

        manager.AjaxSettings.AddAjaxSetting(manager, this.pnlHeading, this.RadAjaxLoadingPanel1);
        manager.AjaxSettings.AddAjaxSetting(manager, this.RadCodeBlock1, this.RadAjaxLoadingPanel1);

    }

Answer №1

Do not include the SetUrl("") function as it will prematurely dispose of the current page, potentially preventing the close() function from executing in time.

If you need to redirect the RadWindow, here are three alternative options:

  • Set the ReloadOnShow property to true, typically paired with ShowContentDuringLoad=false

  • Set DestroyOnClose to true, but be cautious and consider adding a timeout before close()

  • Utilize the OnClientClose event to redirect the URL to a blank page

Answer №2

After some investigation, I discovered that Chrome consistently fails to find the master page reference of the report page, specifically the RadAjaxManager, unlike Firefox and IE which have no issues (I observed the $find functionality working for both of them).

However, what I did notice is that Chrome (as well as the other browsers) can reliably locate the main grid of the report, which is what the refreshGrid function was ultimately seeking. As a result, I was able to simplify the code within refreshGrid to achieve the desired outcome:

function refreshGrid(arg) {
            var radgridNotApproved = $find("<%= rgNotApproved.ClientID %>").get_masterTableView();
            radgridNotApproved.rebind();
        }

This modification not only provided the behavior I desired but also streamlined the code. It appears that the original version of refreshGrid may have had a broader purpose initially, but by the time I reviewed it, its primary function was to rebind the grid.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using Three.js to load an image from a different domain

Despite searching extensively and reading through all available resources, I am unable to find a solution to my issue. I am currently running this code on a local server (IIS). My objective is to load an image from imgur and utilize it as a texture for an ...

Resolving the Issue of Jerky Graphics During HTML5 Canvas Animation

When animating a layer in canvas, the visual quality becomes uneven if there are additional layers present. You can see an example of this by clicking "RUN" on this fiddle: http://jsfiddle.net/Q97Wn/ If I modify this line: opts.percentageIndicator.clearR ...

Enclose several lines of text within a border in the midst of other content

I'm looking to add a stylish border around multiple lines of text in a paragraph without having the border appear on each line individually. While I could enclose all the text in a div, it would separate the content from the rest of the paragraph. W ...

Issue: The component series.line does not exist. Please ensure it is loaded before using it in Vue Echarts

I added the line component, but I'm still encountering issues. I set up my project using vue cli 3 and referred to this guide, but I can't locate the vue.config.js file in my project. Therefore, I manually created a vue.config.js and placed it in ...

Unable to dispatch actions within the mounted lifecycle hook in Vuex?

Can anyone explain why the json data I fetch with axios is not populating my state.pages as expected? Interestingly, when I make a change to the file and vite reloads, the data appears on the page. However, it disappears again upon refreshing the browser. ...

Tips for accessing the parent reference while binding using the .on() method

I needed to attach an event like this $("div").on("click", "li",function() { var div= $(this).parent().parent(); //this is what i'm using //..... }); above the <div> <ul> <li>1</li> <li>e2</l ...

Challenges with handling callbacks in Javascript

I'm currently working on creating a user-friendly GUI using the w2ui library, but I've encountered an issue with integrating a toolbar into my main layout. The problem arises when the toolbar is added before the layout is fully constructed. Sinc ...

Steps to submit a JavaScript-generated output as the value in a form input field

I'm facing an issue that seems basic, but I can't seem to figure it out. I'm trying to create a binary string representing the 12 months of the year using 12 checkboxes: const checkboxes = [...document.querySelectorAll('input[type=check ...

Passing data retrieved from fetch requests in ReactJS using context: Best practices

Just started learning React and need some help. I'm trying to pass variables with json data to a component for further use but running into errors. What changes should I make to use variables with json data from Store.js in the product.js component? T ...

Why isn't my NPM package functioning properly within the Laravel framework?

I recently developed an npm package for my personal use, but encountered a ReferenceError when attempting to utilize it in a Laravel project. Here's the breakdown of what I did: I followed a tutorial on initializing an npm package, and it functioned p ...

Using jQuery to display the values of various keys in a nested array

Within my json data, there exists a nested array structured as such: var json.result= [ {"id":"0","category":"Camera","name":"600D Kit", "condition":"OK"}, {"id":"1","category":"Camera","name":"600D Kit", "condition":"missing cap"}, {"id":"2", ...

Setting up a div as a canvas in Three.js: Step-by-step guide

Is there a way to adjust the JavaScript in this three.js canvas example so that the scene can be contained within a specific div element on a webpage? Here is the example: https://codepen.io/PedalsUp/pen/qBqvvzR I would like to use this as the background ...

Why are two vertical scrolls appearing on the screen simultaneously?

I utilized this method to hide the body scrollbar initially and then display it upon clicking a link: $('body').css('overflow', 'hidden'); $('#site').click(function(e) { $('#wrapper').remove(); $(& ...

What causes React JS to continuously render in an infinite loop when using hooks and useState

I am struggling with updating the current state of my component based on a result using a custom hook in React. Whenever I try to update it, I end up in an infinite loop rendering due to my usage of the useState() hook. I am still new to working with Rea ...

Ensure that the fields provided in the API JSON body are validated using .NET Data Annotations

I am currently developing a project using .NET Core Web API, where I have defined several data models and utilized data annotations. When updating a user profile, the user has the option to provide all fields or only certain fields in the API JSON body. ...

Utilizing the sAjaxSource property in Datatables to fetch data through Ajax from multiple tables while dynamically passing arguments

I am facing an issue with populating two datatables using data retrieved from a flask API through a GET request. My data source URL is localhost:5000/data, but for some reason, I am unable to display the data in the datatables. Interestingly, when I use a ...

What causes the toggle effect in my jQuery onclick function to alternate between on and off when the initialization is repeated multiple times?

I am facing an issue with my website where icons/buttons trigger a menu when clicked. I need to load more data by adding more buttons, so I tried re-initializing the existing buttons using a jQuery onclick function whenever the number of buttons changes. ...

Determining the percentage between two elements using Bootstrap 4's range slider

I've been searching everywhere but haven't found a solution. I am trying to implement Bootstrap 4.5's range slider to distribute the % difference between Client and Company, ranging from 1% to 100%. However, I am struggling with the jquery/j ...

Scheduled tasks arranged by the user

My goal is to empower my users to schedule specific actions at their preferred times. With a node server hosted on Azure, I am exploring the potential of using node-schedule for this functionality. One idea I'm considering is running a master schedule ...

Resetting the caret position in a React Native TextInput occurs when switching the secureTextEntry prop

As I develop a component to wrap the React Native TextInput in my app, I encounter an issue with the caret position resetting to 0 when toggling the secureTextEntry prop for password visibility. To address this problem, I implemented a workaround using a s ...