JS window.OnBeforeUnload not triggering with Menu Bar

[Cody Nguyen]

Hello, I am trying to Show the "OnBeforeUnload" flag that changes may not be saved, however when I navigate away using the Menu Bar, it does not trigger the "OnBeforeUnload" Event. The event triggers properly when attempting to close the window or navigating to a different site entirely. 

.Razor

Javascript

[Aravinthan Seetharaman]

Hi Cody, 

 

Thanks for contacting Syncfusion Support. 

 

We have checked your query. We can achieve your requirement by using NavigationManager.NavigateTo with force reload parameter as true on ItemSelected event handler of MenuBar. Please refer the below code snippet and sample. 

 

 

@using Syncfusion.Blazor.Navigations 

@inject NavigationManager NavigationManager 

 

<SfMenu TValue="MenuItem"> 

    <MenuItems> 

        <MenuItem Text="Appliances"> 

            <MenuItems> 

                <MenuItem Text="Washing Machine" Url="/washingmachine"></MenuItem> 

                <MenuItem Text="Air Conditioners" Url="/airconditioner"></MenuItem> 

            </MenuItems> 

        </MenuItem> 

        <MenuItem Text="Entertainment"> 

            <MenuItems> 

                <MenuItem Text="Home Theatres" Url="https://www.google.com/search?q=home+theatres"></MenuItem> 

                <MenuItem Text="Gaming Laptops" Url="https://www.google.com/search?q=gaming+laptops"></MenuItem> 

            </MenuItems> 

        </MenuItem> 

        <MenuItem Text="Fashion" Url="https://www.google.com/search?q=fashion"></MenuItem> 

    </MenuItems> 

    <MenuEvents TValue="MenuItem" ItemSelected="Selected"></MenuEvents> 

</SfMenu> 

@code{ 

     

    public void Selected(MenuEventArgs<MenuItem> args) 

    { 

        //Used to force load the browser based on the URI, so that beforeunload event will trigger. 

        NavigationManager.NavigateTo(args.Item.Url, true); 

    } 

} 

 

 

 

    <script> 

        window.onbeforeunload = function (event) { 

            return true; 

        } 

    </script> 

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Menu_BeforeUnload-1541096979  

 

Could you please check the above details, and get back to us, if you need assistance on this. 

 

Regards, 

Aravinthan S

[Cody Nguyen]

Thank you for replying. While your solution does invoke the "OnBeforeUnload" function, it does not utilize the warning message that is shown and will still navigate away if the user clicks cancel. This can be seen in your example that you provided. 

1.Hover Over Appliances

2. Click Washing Machine

3. The "Leave Site? Changes you made may not be saved." window appears.

4. Click cancel to not leave the page. 

5. The site Navigates to Washing Machine anyways.

In the scenario that I am trying to apply this to, I am trying to allow the user a chance to edit and save any unsaved changes. If the menu bar still navigates away from the page, the unsaved changes are still lost. Is there a way to cancel the navigation if the user clicks cancel?

Thank you. 

[Aravinthan Seetharaman]

Hi Cody, 

 

Thanks for the update. 

 

We have checked your query. We can prevent page navigation on clicking ‘cancel’ button by giving Url in Select event handler based on the Selected item. Please refer the below code snippet and sample. 

 

 

@using Syncfusion.Blazor.Navigations 

@inject NavigationManager NavigationManager 

 

<SfMenu TValue="MenuItem"> 

    <MenuItems> 

        <MenuItem Text="Appliances"> 

            <MenuItems> 

                <MenuItem Text="Washing Machine"></MenuItem> 

                <MenuItem Text="Air Conditioners"></MenuItem> 

            </MenuItems> 

        </MenuItem> 

        <MenuItem Text="Entertainment"> 

            <MenuItems> 

                <MenuItem Text="Home Theatres"></MenuItem> 

                <MenuItem Text="Gaming Laptops"></MenuItem> 

            </MenuItems> 

        </MenuItem> 

        <MenuItem Text="Fashion"></MenuItem> 

    </MenuItems> 

    <MenuEvents TValue="MenuItem" ItemSelected="Selected"></MenuEvents> 

</SfMenu> 

@code{ 

    public string ItemSelected; 

    public void Selected(MenuEventArgs<MenuItem> args) 

    { 

        string Url = ""; 

        if (args.Item.Text == "Washing Machine") 

            Url = "/washingmachine/"; 

        if (args.Item.Text == "Air Conditioners") 

            Url = "/airconditioner/"; 

        if (args.Item.Text == "Home Theatres") 

            Url = "https://www.google.com/search?q=home+theatres"; 

        if (args.Item.Text == "Gaming Laptops") 

            Url = "https://www.google.com/search?q=gaming+laptops"; 

 

        NavigationManager.NavigateTo(Url, true); 

    } 

} 

  

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Menu_beforeUnload-2031452416  

 

Please let us know if you have any concern on this. 

 

Regards, 

Aravinthan S