javascriptphpjqueryajaxvisual-studio-cordova

Run Javascript script from ajax response


I want to call a JS Script in Ajax response. What it does is pass the document.getElementById script to the Ajax responseText.

The current code returns me this error: Uncaught TypeError: Cannot set property 'innerHTML' of null

This is done with Visual Studio Cordova..

Ajax:

$("#loginBtn").click(function() {
    var username = document.getElementById("username").value;
    var password = document.getElementById("password").value;
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function () {
        if (this.readyState == 4 && this.status == 200) {
            document.write(this.responseText);
        }
    }
    xmlhttp.open("POST", "http://www.sampleee.esy.es/login.php", true);
    xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xmlhttp.send("username=" + username + "&" + "password=" + password);
});

PHP:

if($count == 1){
   echo "document.getElementById('alertBox').innerHTML = 'Login Success!';
        document.getElementById('alertBox').className = 'alert alert-success';
        document.getElementById('alertBox').style.display = 'block';
        setTimeout(function () {
                window.location.href = '../html/dashboard.html';
            }, 1000);
        ";
}else{
       echo "document.getElementById('alertBox').innerHTML = 'Invalid login details'; 
        document.getElementById('alertBox').className = 'alert alert-danger';
        document.getElementById('alertBox').style.display = 'block';
        ";
}

Solution

  • You can solve it by a small change, you just have to write JS code in the AJAX success that you wrote in your PHP page. In the PHP page, there is no alertBox element, that's why the error occurred.

    Your JS code will be like this:

    $("#loginBtn").click(function() {
    var username = document.getElementById("username").value;
    var password = document.getElementById("password").value;
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function () {
        if (this.readyState == 4 && this.status == 200) {
            if(this.responseText=="success"){
            document.getElementById('alertBox').innerHTML = 'Login Success!';
            document.getElementById('alertBox').className = 'alert alert-success';
            document.getElementById('alertBox').style.display = 'block';
            setTimeout(function () {
            window.location.href = '../html/dashboard.html';
            }, 1000);
            }elseif(this.responseText=="error"){
             document.getElementById('alertBox').innerHTML = 'Invalid login details'; 
        document.getElementById('alertBox').className = 'alert alert-danger';
        document.getElementById('alertBox').style.display = 'block'
             }
        }
    }
    xmlhttp.open("POST", "http://www.sampleee.esy.es/login.php", true);
    xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xmlhttp.send("username=" + username + "&" + "password=" + password);
      });
    

    And PHP code like:

     if($count == 1){
     echo "success";
     }else{
       echo "error";
      }