Ivan Ralph G. Vitto Ivan Ralph G. Vitto - 2 months ago 16
Ajax Question

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';
";
}

Answer

You can solve it by change a small ,just you have to write js code on ajax success that you write in php page.on the php page there are no alertBox element thats why the error occured.

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";
  }
Comments