Updating the content of a file on an iPhone

Is there a way to update the entire document content with a response from an ajax request?

I've tested out using document.body.innerHTML and document.write(), which both work on desktop Safari. However, I'm looking for a solution that will also function on iPhone/iPod Touch. Unfortunately, modifying document.body.innerHTML throws exception 7 and document.write() is undefined on mobile safari.

The goal is to show an activity indicator while waiting for a form submission to finish. I want to prevent safari from rendering any part of the response until it's fully loaded, as this process may require some time.

javascriptiphoneajaxdom

Answer №1

After conducting a successful experiment on my 3G iPhone, I found that manipulating the document.body.innerHTML property worked flawlessly. To ensure proper execution, I utilized jQuery in conjunction with my test to ensure that the body had fully loaded before executing the JavaScript code:

<html>
<head>
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function () {  
    document.body.innerHTML = 'success';
});
</script>

</head>
<body>
This was just a simple test
</body>
</html>

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

Invoke a function from a popup window, then proceed to close the popup window and refresh the parent page

When a link in the parent window is clicked, it opens a child window. Now, when the save button is clicked in the child window, I need to trigger a Struts action, close the child window, and reload the parent window. function closeChildWindow(){ document. ...

javascriptjavajspstruts-1

Prevent the left border from displaying on a link that wraps to a new line

Excuse me, I am facing an issue with a pipe separator in my subnav bar between links. The problem is that the first link on a new line retains the left-border that should be disabled. How can I prevent this border from appearing on the first link of a new ...

javascriptjqueryhtmlcss

Certain crucial happenings inhibit the ability of others to occur

Hey there! Want to check out the live application I'm currently working on? Simply click this link: turbo_synth This project is being developed using VueJS, however, the issue I've encountered does not seem to be related to Vue at all. The prob ...

javascriptvue.jskeyeventpiano

The current issue lies with the lack of functionality in the Ajax post feature

Seeking assistance here. I've encountered a frequent issue on stackoverflow and despite attempting various methods, none seem to be working for me. Could it be that I'm doing something fundamentally wrong? Here is the code snippet in question: $ ...

javascriptphpjqueryajax

Determine the instance's name as a string in JavaScript

Currently, I am utilizing Three.js in combination with javascript. Upon running the following line of code: console.log(this.scene.children[1]) I receive the following output in the console within Chrome: https://i.stack.imgur.com/6LBPR.png Is there a w ...

javascriptarraysobject

Show real-time server responses using jQuery while waiting for the AJAX request to complete

I have a challenge in creating a function that displays the server response while waiting for Ajax to complete. Here's the scenario: I have selected 10 checkboxes. When I click the submit button, Ajax is triggered. On the server side, there is a loo ...

javascriptjqueryajaxcodeigniter

Efficient AJAX validation using PHP and JavaScript

I am currently working on a small website project that requires User registration functionality. One key aspect is ensuring that the system prevents users from registering with usernames that are already in use. Most modern websites employ AJAX to verify ...

javascriptphpjqueryajax

Gulp: executing a task with no specified output location

I am attempting to create a straightforward task to display the file size for each file in an array of paths using the gulp-size plugin, as shown below: var gulp = require('gulp') var size = require('gulp-size') gulp.task('size&a ...

javascriptnode.jsgulp

Preventing an RxJS Observable interval: A step-by-step guide

I am facing a unique scenario where I am using an RxJS interval, but I might need to abruptly stop it at any point. I thought there would be a simple method like cancel() or stop() similar to clearTimeout for intervals. Is there a way to stop an interval o ...

javascriptrxjsobservablerxjs5

The sign-up button mysteriously vanishes after the page is refreshed

I am encountering an issue with the sign up button during the user registration process. There is a checkbox for Terms & Conditions, and the button should only become enabled after checking this box. Everything seems to be functioning correctly, but when I ...

javascriptjqueryhtmlangularjs

How can I hide a root layout component in specific nested routes within the app directory of Next.js?

Is there a way to prevent rootlayout from being wrapped around dashboardlayout? Explore the latest documentation for Next.js version v13: https://i.sstatic.net/M0G1W.png Take a look at my file structure: https://i.sstatic.net/nVsUX.png I considered usi ...

javascriptreactjsnext.js

Adjusting the height of a container dynamically in React while flex items wrap using CSS

In my React project, I have a container called "answers-container" with multiple buttons inside it, laid out using flexbox with flex-wrap: wrap to allow them to wrap onto the next line when the container width is exceeded. However, I'm facing an issu ...

javascripthtmlcssreactjs

Issue: Dynamic server is experiencing abnormal increase in usage due to headers on Next version 13.4

Encountering an error in the following function. It's a basic function designed to retrieve the token from the session. 4 | 5 | export async function getUserToken() { > 6 | const session = await getServerSession(authOptions) | ...

javascriptreactjsnext.jsnext-auth

Do not fulfill the promise until all the images have finished loading

Below is the intended process: Iterate through a collection of img tags Retrieve each tag's src URL Convert it to a base64 encoded string using an HTML 5 canvas Once all images have been converted, resolve the promise and call the callback function ...

javascriptjqueryimagebase64

React: The received value for the prop type must be a function, but it was an object

I'm stuck trying to make sense of this error message, and my online search has hit a dead end. Any insights would be greatly appreciated! Attention: Prop type validation failed - expected prop type `leoInfo` to be a function from the `prop-types` pack ...

javascriptreactjs

choose and adjust elements within a three-dimensional scene using three.js

I have a JSON file containing object data that I load into my scene using ObjectLoader. After adding the objects to the scene, I want to customize their textures by adding parameters like THREE.SmoothShading and an envMap. I know how to find a specific obj ...

javascriptselectthree.jskey-value

"The incredible power of the spread operator in conjunction with EsLint

Is there a way to duplicate an object and modify one of its properties? Here's an example: const initialState = { showTagPanel: false, }; export default function reducerFoo(state = initialState, action) { switch(action.type) { case types.SH ...

javascriptreactjseslint

Preserve content from a hyperlink using JavaScript

How can I store a value to the cache using JavaScript when clicking on an anchor link? The code below sets up the dynamic content: <a align="left" href="projectoverview.html">Test Manager</a> I want to save the text "Test Manager" to the cach ...

javascriptjqueryhtml

What causes jquery-ui resizable to set the width of the div with the "alsoResize" property?

I have created a series of divs structured like this: <div id="body_container"> <div id="top_body"> </div> <div id="bottom_body"> </div> </div> Additionally, I have implemented the following funct ...

javascriptcssjquery-ui

Utilizing the state as a condition within the useEffect to update the component

Is there a way to automatically hide the mobile menu when the URL changes in ReactRouter? I have noticed that I get a warning for not tracking mobileOpen as a dependency, but strangely the code still works fine. const Navbar: React.FC<Props> = props ...

javascriptreactjsreact-hooks