How to load one html file from another html file while click on button in javascript?

Question

I am new to develop a chrome app. I have login.html file and home.html file, When I click on login button I'm calling a login API and in the success response I need to load home.html file and need to quit login page . I tried in so many ways but I can't do it.

Please help me.

Here is my code

function callSigninApi(email, password)
{
  var data = new FormData();
  data.append("emailid", email);
  data.append("password", password);

  var xhr = new XMLHttpRequest();
  xhr.withCredentials = true;

  xhr.addEventListener("readystatechange", function () {
    if (this.readyState === 4) {
      var resultData = JSON.parse(this.responseText);
      console.log(resultData);

      if (resultData.status == "100") 
      {
        console.log("Login success");
        // self.location="/home.html";
        //chrome.app.window.current().location.path = "/home.html";

        //let params = `scrollbars=no,resizable=no,status=no,location=no,toolbar=no,menubar=no,width=600,height=300,left=100,top=100`;
        //open('/', 'home.html', params);

        // let html = `<div style="font-size:30px">Welcome!</div>`;
        // chrome.app.window.current().document.body.insertAdjacentHTML('afterbegin', html);

        // window.location("/home.html");

        //  let newWindow = open('/', 'home', 'width=300,height=300')
        //  //newWindow.focus();

        // newWindow.onload = function() {
        //   let html = `<div style="font-size:30px">Welcome!</div>`;
        //   newWindow.document.body.insertAdjacentHTML('afterbegin', html);
        // };

        // let html = `<div style="font-size:30px">Welcome!</div>`;
        // chrome.app.window.current().document.body.insertAdjacentHTML('afterbegin', html);

        //chrome.app.window.current().open("./home.html");

        //window.location.href = "?"+Date.now()+"#/home.html";
        // chrome.app.window.current().close();
        // chrome.app.window.create("home.html", {

        //   'outerBounds': {
        //   'width': window.screen.availWidth-40,
        //   'height': window.screen.availHeight-50
        //   },
        //   'resizable':true,
        // });
      }
      else
      {
        document.querySelector('h3#errorMsg').innerHTML = resultData.data.message;
      }
    }
  });

  xhr.open("POST", "http://127.0.0.1:5000/schools/signin");
  xhr.send(data);
}

Answer 1

There could be several factors in play, but it's difficult to tell without seeing an example of your code. Could you update you question with examples?

However in a general sense:

You should nest your event listeners in another event listener that ensures the page has loaded:

//event listener to ensure page has loaded
document.addEventListener('DOMContentLoaded', function() {
    // event listener for click of login button
var loginButtonClick = document.getElementById('login_button_ID');
loginButtonClick.addEventListener('click', function() {
    login();  //This is the function that calls the login API
});;

If that still doesn't work, you will need to check the callback function in your API. Since you are updating the current tabs URL you may want to use one of the solutions listed here: How to modify current url location in chrome via extensions