AJAX call to php not working

Question

I'm working on AJAX programming in which I have a little problem. In the below code, I think my php script is not echoing back success. I'm trying to insert values into my database table. Accordingly, the values are getting inserted into the table. I have a span element on my page which by default shows nothing. But if the php script is echoing back success, it must show "AJAX worked". If my PHP script is not echoing back "success", it must show "AJAX didn't work". But it is showing "AJAX didn't work" though the values are getting inserted. If I didn't include the database code, then my script is echoing back success and the span element is showing "AJAX worked". But if I include database code, I think it is not echoing back success and the span elemnt is showing "AJAX didn't work". Below is my code:

<head>
<meta charset="UTF-8">
<title></title>
<script src="js/main.js"></script>
<script src="js/ajax.js"></script>
<script>
function insert(){
    var elem = _("myTextArea").value;
    var result = _("result");
    result.innerHTML += elem + "<br>";
    elem.value = "";
    var ajax = ajaxObj("POST", "dynamicdiv_parser.php");
    ajax.onreadystatechange = function() {
        if(ajaxReturn(ajax) == true) {
            if(ajax.responseText == "success"){
                _("status").innerHTML == "AJAX worked";
            }
            else{
                _("status").innerHTML == "AJAX didn't work";
            }
        }
    }
    ajax.send("post="+elem+"&type=a");
}
</script>
</head>
<body>
<form name="dynamicdivform" id="dynamicdivform" onsubmit="return false;">
<p id="result"></p>
<textarea name="myTextArea" id="myTextArea" cols="100" rows="14"></textarea><br>
<input type="button" id="postBtn" value="POST" onClick="insert()"> 
<span id="status"></span>
</form>
</body>

I have included two JavaScript files in my program which are main.js and ajax.js. Below is their code.

This is main.js:

function _(x){
    return document.getElementById(x);
}

This is ajax.js:

function ajaxObj( meth, url ) {
    var x = new XMLHttpRequest();
    x.open( meth, url, true );
    x.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    return x;
}
function ajaxReturn(x){
    if(x.readyState == 4 && x.status == 200){
        return true;    
    }
}

This is my PHP script which is echoing back success

  <?php
if(isset($_POST["post"])){
    include_once("php_includes/dbconsampledb.php");
    $data = $_POST['post'];
    $type = $_POST['type'];
    $sql = "INSERT INTO posts(data, type) 
            VALUES('$data','$type')";
    $query = mysqli_query($db_conx, $sql);
    echo "success";
}
?>

Before posting this question, I have tried the works but I didn't find any solution. This is very important to me. So please can anyone debug it and tell me what the problem is... Thanks in advance!!

This `if(x.readyState == 4 && x.status == 200){` is probably false. — putvande, Feb 19 '14 at 17:01
@putvande : NO it is not false. Because, my php script is echoing back success. I tested it using alert(ajax.responseText) and the alert box was showing "success". — Gopal1216, Feb 19 '14 at 17:03
Hi again Gopal1216 :) Just as an aside, pasting your JS function into http://www.jshint.com/ can help you to spot problems which don't necessarily cause JS errors. In this case, it shows two warnings for your insert() function, in line with @Chris' answer. — Josh Harrison, Feb 19 '14 at 17:11
@Gopal1216 try the code Aret suggested and look at response - if there are any characters or additional text besides "success". — Chris, Feb 20 '14 at 08:43
no there are no additional characters besides success. I tested it using Aret's code. — Gopal1216, Feb 21 '14 at 10:11

score 2 · Answer 1 · answered Feb 19 '14 at 17:02

2

_("status").innerHTML == "AJAX worked";

should be

_("status").innerHTML = "AJAX worked";

with one = only

answered Feb 19 '14 at 17:02

Chris

3,405
4
29
34

shit!! that was so retarded on my part. Yes it is working now. But I have another doubt. I will update my question. Please check it out. – Gopal1216 Feb 19 '14 at 17:31
Thank you for answering me previously, I have updated my question. Can you check it please? – Gopal1216 Feb 19 '14 at 17:44
Does your PHP script starts will spaces like in your update? Check if there are no spaces at the beginning and end of php file. – Chris Feb 19 '14 at 17:51
No Chris. There are no white spaces in my script. – Gopal1216 Feb 19 '14 at 17:55

Aret · Answer 2 · 2014-02-19T18:32:28.933

1

My suggestion is to use a console.log() for debuging your ajax response.

if(ajaxReturn(ajax) == true) {
            console.log('Response: ', ajax.responseText);
            if(ajax.responseText == "success"){

Probably there is some errors with DB functionality.

edited Feb 19 '14 at 18:32

answered Feb 19 '14 at 18:23

Aret

475
3
9

Can you please copy the code and run it on a browser using a server? In that way, may be ul exactly know what the error is. – Gopal1216 Feb 21 '14 at 10:12
I dont have DB in my server. You can read about using console from [here](http://stackoverflow.com/questions/4743730/what-is-console-log-and-how-do-i-use-it) – Aret Feb 21 '14 at 11:40

AJAX call to php not working

2 Answers2