Transitioning the existing application from iOS Cordova's UIWebView to WKWebView requires disabling asynchronous JavaScript execution in order to maintain functionality

Previously, in one of our older examples for saving data, we had successfully used the following code in cordova UIWebview without any issues:

var filenameID;
function getFilenameID() {
  $.ajax('/jquery/getdata',   // request url
  {
    success: function (data, status, xhr) { 
      kp_requestKioskId_callback(data);
    }
  });
}
function kp_requestKioskId_callback(kioskId) {
  filenameID = kioskId.split(" ").join("");
}
function saveData(fileName, data) {
  getFilenameID();
  kp_FileAPI_writeToFile(filenameID + ".xls", data, "writeFile_callback");
}

Upon migrating from UIWebview to WKWebview, the asynchronous nature of JavaScript execution in WKWebView has caused an issue where the 'getFilenameID' call is not completed before the 'kp_FileAPI_writeToFile' call, resulting in an undefined filename.

To resolve this issue, it was suggested to copy the 'kp_FileAPI_writeToFile' function inside the 'kp_requestKioskId_callback' function. However, since there are multiple similar functions in our application, making these changes would require significant modifications.

Is there a way to address or disable the asynchronous JavaScript execution to prevent extensive alterations to the application?

Answer №1

Is there a way to solve or prevent asynchronous JavaScript execution without making major changes to the application?

Unfortunately, in modern browsers/webviews, using XMLHttpRequest (which is utilized by $.ajax) does not allow synchronous requests from the main thread. While there is a flag to disable asynchronous behavior, most browsers will throw an exception if it is used within the main thread.

Although you can use synchronous XMLHttpRequest inside web workers, this does not make your application truly synchronous. Additionally, Cordova plugin APIs cannot be accessed from web workers, further limiting its effectiveness.

It appears that the code sample provided does not even utilize the async option. By default, this option is set to true, meaning that your network request running on UIWebView is also executed asynchronously, potentially leading to nondeterministic race conditions.

Answer №2

This is a new issue that I have come across on the WKWebview. Previously, when using UIWebview, the javascript code worked synchronously.

For example: There are 3 API calls that need to be made sequentially for each individual product.

If we have 2 products, we loop through them and trigger 3 APIs for each one.

With WKWebview, it completes the first set of tasks before moving on to the next set.

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

What mechanisms do frameworks use to update the Document Object Model (DOM) without relying on a

After delving into the intricate workings of React's virtual DOM, I have come to comprehend a few key points: The virtual DOM maintains an in-memory representation of the actual DOM at all times When changes occur within the application or compo ...

No image upload possible until 'submit' button is clicked

I'm attempting to send an mp3 file to the server using AJAX without the need for a submit button, but I'm facing an issue where the file isn't getting uploaded. Can anyone help me pinpoint the mistake in my code? <script> $(document). ...

swap out an element in an array with an extra element

My array contains elements with both id and des properties. I would like to add an additional property like value:0 to each object in the array. I achieved this using a loop. let data = [ { "id": 1001, "des": "aaa" }, { ...

Generating Bootstrap Vue Dropdown components in real time

I am currently utilizing Bootstrap Vue to construct a dynamic Dropdown component that can render different elements such as item, title, and divider. Is there a method to accomplish this task effectively? The desired outcome for the Dropdown component wou ...

Issues with jQuery .click and .html functions not functioning as expected

Does anyone have experience creating a game with jQuery? I can't seem to get the options after the first choice to work. Sorry, I don't have a working example at the moment. --- jQuery --- $(document).ready(function() { $(".console"). ...

Implement a feature to dynamically load data as the user scrolls up, similar to the

I am in the process of creating a messaging platform and I am looking to implement a functionality where chat history is displayed upon scrolling up, similar to Facebook's chat system. Can anyone offer assistance with this task? ...

Is there a way to extract the unicode/hex representation of a symbol from HTML using JavaScript or jQuery?

Imagine you have an element like this... <math xmlns="http://www.w3.org/1998/Math/MathML"> <mo class="symbol">α</mo> </math> Is there a method to retrieve the Unicode/hex value of alpha α, which is &#x03B1, using JavaScrip ...

An option selection component for Vue.js

I'm attempting to design a component like the following: <template> <option v-for="(text, value) in options" :value="value"> {{ text }} </option> </template> Unfortunately, I encountered an error me ...

Improving the display of events with fullcalendar using ajax requests

I have integrated the fullcalendar plugin from GitHub into my project. I am looking to implement a feature where I can retrieve more events from multiple server-side URLs through Ajax requests. Currently, the initial event retrieval is functioning proper ...

Adding functions to the prototype of a function in JavaScript

Is there a more concise way to simplify this code snippet? var controller = function(){ /*--- constructor ---*/ }; controller.prototype.function1 = function(){ //Prototype method1 } controller.prototype.function2 = function(){ //Prototyp ...

Having received a status code of 200 in Flask WebApp, I am still unable to access the page

Currently in the process of developing a webapp using Flask, I have created the homepage where users are required to input their phone number and password. Once entered, the system will send an OTP to the provided phone number. When clicking the signup bu ...

Attempting to insert an empty <option> into a dropdown menu using jQuery and ajax functionality

I'm working on a JavaScript function that dynamically populates a select dropdown based on the value of another select dropdown. I want to include an empty option at the beginning. Here is the code snippet for the function: function createParkFloorM ...

<fieldset> triggering onChange event in React form

I am facing an issue with my React component where multiple onChange functions are not getting fired. After some debugging, I realized that the problem lies with the fieldset element within the form. Removing the fieldset allows all onChange functions to w ...

Tips for retrieving the HTML file of a modified canvas in HTML5

I’m currently working on a project to develop a website that allows users to design their own pages by simply dragging and dropping elements onto the canvas. The goal is for users to be able to save their creations as an HTML file. I’m facing challen ...

Different ways of manipulating images with JavaScript

I attempted to tackle the issue independently, but I'm stumped. Is there a way to adjust the width of an image in JS when the screen dimensions are changed? ...

Sticky box fails to maintain position as header scrolls

I am looking to create a Sidebar that sticks to the window while scrolling, but stops when it reaches the footer. I have managed to get it partially working, but there is a small issue that I can't seem to solve. Test it live here: Everything seems ...

JavaScript file encountering a Typescript issue with a property defined in a subclass

Currently, I am utilizing Typescript to validate my Javascript files. One issue I have encountered is that when I inherit from a class, Typescript does not recognize the types of the properties in the parent class. I am unsure if I am overlooking something ...

Prevent image upload until text is clicked on

When the user clicks on the mask image, a file upload dialog box is displayed. Once the user uploads an image, the text "Remove Image" is shown. Issue: Currently, users can upload another image before clicking on "Remove image". However, after clicking o ...

Redirecting users from one page to another using Javascript along with

I am currently working on a project that employs the use of a PHP <? header('Location: <a href="http://url.com" rel="nofollow">http://url.com</a>'); ?> for handling redirects. I find this method particularly effective because of ...

What is the method for sending these variables via POST?

The code snippet referred to as New script is designed to produce two integer variables anchor and signed. I am interested in replacing the Old script with the New script, but there are significant differences between them. Inquiry How can I send/post t ...