In JavaScript, navigate to a new page only after successfully transmitting data to the server

Question

In JavaScript, navigate to a new page only after successfully transmitting data to the server

Creating a redirect page that sends data to the server before transitioning to a new page can be achieved using JavaScript as shown below.

<body>

<script type="text/javascript">

****
Discussion of cookie-related transactions
****

document.createElement("img").setAttribute("src", "server.php?param1=cookiedata");

location.href = "new_page.html";

</script>

</body>

However, there are instances where

document.createElement("img").setAttribute("src","server.php?param1=cookiedata");

is not executed before redirecting to "new_page.html". This means that the data is not sent to "server.php".

Could this issue be related to the short redirect time?

Can you suggest a solution for this problem?

javascript

Answer 1

Answer №1

There seems to be an issue where the request to load the source material is sometimes not sent before the redirection occurs.

To resolve this, a simple solution is to utilize the onload event to add a handler that will execute after the image has finished loading.

You can achieve this by implementing something similar to the following code snippet:

function redirectAfterTransmit() {
  window.location.href = "/new_page.html";
}

var img = document.createElement("img");
img.addEventListener("load", redirectAfterTransmit);
img.src = "server.php?param1=cookiedata";
document.appendChild(img)

Please let me know if this solution works for you!

Special thanks to Jaromanda X for their valuable input and comments.

Answer 2

There seems to be an issue where the request to load the source material is sometimes not sent before the redirection occurs.

To resolve this, a simple solution is to utilize the onload event to add a handler that will execute after the image has finished loading.

You can achieve this by implementing something similar to the following code snippet:

function redirectAfterTransmit() {
  window.location.href = "/new_page.html";
}

var img = document.createElement("img");
img.addEventListener("load", redirectAfterTransmit);
img.src = "server.php?param1=cookiedata";
document.appendChild(img)

Please let me know if this solution works for you!

Special thanks to Jaromanda X for their valuable input and comments.

Answer 3

Answer №2

Check out this link for more information: Wait for image to be loaded before going on

If you want to ensure that the "image" has been fully loaded, you may need to wait for it. This way, you can guarantee that the request has been successfully sent.

<body>

<script type="text/javascript">

****
light transaction about cookie
****

function loadSprite(src, callback) {
    var sprite = new Image();
    sprite.onload = callback;
    sprite.src = src;
}


loadSprite('server.php?param1=cookiedata', function() {
    location.href = "new_page.html";
});



</script>

</body>

Answer 4

Check out this link for more information: Wait for image to be loaded before going on

If you want to ensure that the "image" has been fully loaded, you may need to wait for it. This way, you can guarantee that the request has been successfully sent.

<body>

<script type="text/javascript">

****
light transaction about cookie
****

function loadSprite(src, callback) {
    var sprite = new Image();
    sprite.onload = callback;
    sprite.src = src;
}


loadSprite('server.php?param1=cookiedata', function() {
    location.href = "new_page.html";
});



</script>

</body>

In JavaScript, navigate to a new page only after successfully transmitting data to the server

Answer №1

Answer №2

Similar questions

I am working with Vue.js 2.0 and attempting to send an event from a `child component`

Retrieve JSON data within a service and provide it to a component

JavaScript data structure similar to ListOrderedMap/ArrayMap

Combining php with jquery

In what way can the button display the permission directly on the page?

Obtaining the accurate offsetTop and offsetLeft values for an element following a CSS3 rotation

The value of a string in jQuery turns undefined once it is used as an argument

Trouble displaying image due to issues with javascript, html, Angular, and the IMDb API integration

Encountering Vue linting errors related to the defineEmits function

Assigning attributes to inner components in VueJS based on prop values

Tips for populating an array with information gathered from an axios request within a React application

The page could not be generated due to a server error with the syntax. More specifically, an Unexpected token 'export' caused a SyntaxError

Is there a way to conceal the contents of a page until all the images have finished loading?

The FireBase getToken function with the forceRefresh set to true has failed to perform as expected

What is the best way to trigger a snackbar notification when two passwords do not match?

jQuery Datatables provide a powerful and customizable way to display

Navigating through various arrays within objects on a JSON API with JavaScript: A walkthrough

Using regular expressions, you can conveniently extract text that is contained within paragraph tags

dependency in useEffect hook not being properly updated

Utilizing Socket IO and Node JS to stream audio from a microphone via sockets