0

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);
}
Hyyan Abo Fakher
  • 3,497
  • 3
  • 21
  • 35
Goutham
  • 181
  • 9
  • 3
    Could you show us one way you've tried? You're more likely to get answers that way – dustytrash Sep 10 '18 at 15:38
  • If this is a chrome **app**, not an extension, then you can't navigate away from the inital page in the main window. Instead simply put your UI pages inside an iframe in that main window page. – wOxxOm Sep 10 '18 at 15:45

1 Answers1

0

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

Glen Carpenter
  • 392
  • 2
  • 9