iOS Devices experiencing issue with beforeunload event not triggering

When a user tries to leave the page without saving, I use the beforeunload function to display a popup warning them that their changes may not be saved if they proceed. They can then choose to leave or stay on the page. However, I am facing an issue with this functionality not working on IOS devices such as iPhone and iPad.

var isSkipUnsavedChangePopup = false;
    window.addEventListener("beforeunload", function (e) {
        var confirmationMessage = "Are you sure you want to leave?";
        if (!$("#btnSave").prop("disabled") && !isSkipUnsavedChangePopup) {
            (e || window.event).returnValue = confirmationMessage;
            return confirmationMessage;
        }
    });

Answer №1

Try using the unload function in jQuery Mobile like this:

$(window).unload(function() {
  alert('Handler for .unload() called.');
});

For more information, visit the documentation here:

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

Issue with Node.js Express function not returning the variable fetched from fs.readFile operation

I am facing an issue with a function in my Node.js application that uses Express. function getMetaInfo(id){ var directory = 'files/' + id; var totalCount = 0; fs.readFile(__dirname + '/' + directory + '/myfile.json&ap ...

What is the best way to develop a module for executing boilerplate code in order to maintain codebase efficiency and avoid repetition?

In all my Vue modules, I find myself repeating this code: import axios from 'axios' axios.defaults.xsrfHeaderName = 'X-CSRFTOKEN' axios.defaults.xsrfCookieName = 'csrftoken' axios.defaults.withCredentials = true Instead of r ...

What method can I use in AngularJS to have a factory function reference another factory function?

As an illustration, consider the code snippet below where I want func2 to invoke func1. App.factory("MyLib", function() { return { func1: function() { console.log("func1"); }, func2: function() { func1(); } } }); Is t ...

iOS fixed positioning and scrolling

One of the current challenges we are facing involves implementing an action button similar to the one found in GMail for adding new content. This button needs to remain fixed during scroll. Here is the HTML code: <div class="addButton actionButton" on ...

Is it possible to use AJAX in JavaScript to dynamically update page titles?

When loading a new page using AJAX, I am having trouble updating the title. The expected titles should be "Home", "About", and "FAQ". I attempted to solve this by changing the title with the code snippet below, but it only resulted in displaying "undefine ...

Using Swift's Codable protocol: Implement enum Coding Keys to account for potential additional properties in future API response JSON

Currently, I'm utilizing the Codable protocol to parse my JSON response object. Would it be wise to integrate enum CodingKeys: String, CodingKey so that any additional properties in the JSON response object will be disregarded to prevent crashes in t ...

Display a loading screen in ExpressJS until the data is fully loaded and ready for use

I am currently utilizing puppeteer to extract data from a job website, and so far everything is running smoothly. app.get('/', async (req, res) => { res.render('index', {text: 'This is the index page'}); }) Up ...

- shorthand CSS properties roster- index of abbreviated CSS attributes

I have created a JavaScript function that needs to extract CSS values, even those that may contain multiple values. For instance, margin:0 0 4px 12px; consists of four separate values (margin-top, margin-right, etc). Specifically, I am looking for a list ...

Utilizing the summernote editor in combination with vue.js 2

Integrating Summernote into a Vue.js 2 single-page application has been quite a challenge for me. Not all my pages require the Summernote editor, so I decided to turn it into a component by creating an export function in my Vue file. export default { ...

ng-bootstrap's accordion imparts unique style to its child icons

https://i.sstatic.net/YzmtN.png Visible star icon indicates lack of focus on the accordion https://i.sstatic.net/aNW31.png Star disappears when accordion gains focus Below is the CSS code I used to position the star to the left of the accordion: .icon ...

Identifying an EKEvent uniquely for seamless syncing across all devices

I need to develop a unique Event Syncing feature for a Project where events are synced with a remote server. Imagine installing the App on Device A. If I log in to another device, let's say Device B, events that were synced from Device A should also ...

Tips on leveraging JQuery's $.when for handling ajax requests sequentially

How can I effectively use $.when in JQuery with chained promises to ensure my ajax requests are processed in the correct order? I have a dynamic array called costArray containing various objects. For each item in this array, I initiate an Ajax request nam ...

Adjusting the selection in the Dropdown Box

I've been attempting to assign a value to the select box as shown below: <dx-select-box [items]="reportingProject" id="ReportingProj" [text]="reportingProject" [readOnly]="true" > ...

Implementing Dynamic Script Injection in Angular Controllers for Enhanced HTML Functionality

I'm a total beginner when it comes to Angular and frontend development, so please bear with me if my question seems basic: In my controller, I have the following code where I am populating the $window.user data that is being used in the script [2] ad ...

The duration spent on a website using AJAX technology

We conducted an online survey and need to accurately calculate the time spent by participants. After using JavaScript and PHP, we found that the calculated time is not completely accurate. The original script was sending server requests every 5 seconds to ...

Determining the optimal number of rows and columns based on an integer value

Here's a brain teaser for you: /** * Let's figure out the optimal number of rows and columns for your garden to be as square as possible, based on the number of seeds you have. * * @param {number} seedCount - The total number of seeds in you ...

Leveraging CSS in React/JSX

I am struggling to understand how to implement CSS with React. I have tried using inline styles but couldn't get it to work. Additionally, I am unsure where to apply CSS in my JSX code within the react class. For example, in one of my react classes, ...

Exploring the power of AngularJS by nesting elements within multidimensional arrays and revealing their content through a simple

Check out this fiddle for accurate information, though it may not be visually positioned correctly: http://jsfiddle.net/LhRfq/ I am working with a three-dimensional JSON object. The first level of array items should be displayed in a single line, which ...

What is the process for creating an HTML file that can automatically save?

I am looking to develop a unique HTML document where users can enter text in text fields, save the file by clicking a button, and ensure that their changes are not lost. It's like what wysiwyg does for HTML documents, but I need it to be integrated di ...

jQuery event.preventDefault not functioning as expected

I am attempting to use jQuery's preventDefault() method, but when I submit the form, it still displays the default behavior and reloads the page. Here is the code from index.html: <body> <script src="/socket.io/socket.io.js"></script& ...