Question 299524 in Html Question posted in
Some basic documentation can be found here.

Html – How can I reload page in fetch request

I want to find a solution that reload my page, after my deleting request.
The problem is after reloading I can’t set value like: projectBox.style.display = "block";

Because the browser execute reloading function at the end, so I can’t set a new value to display project filed, it redirect me to my default setting which are ContactBox.style.display = "block";

I already try reloading with : window.location.href = window.location.href; and history.go(0);

And I also tried to add another .then() but it doesn’t change anything it first changes the value and then it reloads.

enter image description here

 deleteProjectButton.addEventListener("click", function (event) {
      event.preventDefault(); // Empêche le comportement par défaut du formulaire
      let formData = new FormData(
        document.getElementById("delete-company-project-form")
      );

      fetch("/delete-company-project", {
        method: "POST",
        headers: {
          "Content-Type": "application/x-www-form-urlencoded",
        },
        body: new URLSearchParams(formData).toString(),
      })
        .then(() => {
          // Hide the contact box and show the project box
          window.location.href = window.location.href;
          contactBox.style.display = "none";
          projectBox.style.display = "block";
          opportunitiesBox.style.display = "none";
        })
        .catch((error) => {
          // Handle error
          console.error(
            "There has been a problem with your fetch operation:",
            error
          );
        });
    });
Tags:

2

Answers


  1. 0

    This function will reload the page. but please place it the loaction where it does not recursively load an application.
    window.location.reload();

    Login or Signup to reply.
  2. 0 
    deleteProjectButton.addEventListener("click", function (event) {
      event.preventDefault(); // Empêche le comportement par défaut du formulaire
      let formData = new FormData(
        document.getElementById("delete-company-project-form")
      );

      fetch("/delete-company-project", {
        method: "POST",
        headers: {
          "Content-Type": "application/x-www-form-urlencoded",
        },
        body: new URLSearchParams(formData).toString(),
      })
        .then(() => {
          window.location.reload();
        })
        .catch((error) => {
          // Handle error
          console.error(
            "There has been a problem with your fetch operation:",
            error
          );
        });
    });

    Hide the contact box and show the project box

              contactBox.style.display = "none";
          projectBox.style.display = "block";
          opportunitiesBox.style.display = "none";

    place this code in onLoad function

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search