Question

I have problem in ajax and it doesn’t print the message I want. Let’s explain.
In php code i have an input tag:

<input type="submit" id="login_button_add" name="submit" value="Add" 
onclick="add_building(); showbuildings( );" />

Those two js functions are:

function add_building(){
    var str1=document.getElementById("building_name").value;
    if (window.XMLHttpRequest)
    {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    }
    else
    {// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function()
    {
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
        document.getElementById("txtHint10").innerHTML=xmlhttp.responseText;}
    }
    xmlhttp.open("GET","add_building.php?q="+str1,true);
    xmlhttp.send();
}

In add_building.php I add a row in database and print messages. The query works fine, but it doesn’t print the message in my page with id that I have in my html code. I think that the problem is that I call second js function. Because when I call add_building() alone it works perfect(prints messages).

The php code of add_building.php is:

$q=$_GET["q"];


if ($q!==''){
$link= mysqli_connect(...);

mysqli_set_charset($link, "utf8");
$sql="SELECT * FROM buildings WHERE name='$q'";
$result = mysqli_query($link,$sql);

if (!mysqli_num_rows($result)){
mysqli_set_charset($link, "utf8");
$sql="INSERT INTO buildings VALUES ('','$q','')";
$result =mysqli_query($link,$sql);
echo "The building added successfully.";
}
else {echo 'Building name exists. Try a different.';}

@ db_close($link);
}
else{echo 'Please insert a name.';}

The other js function is:

function showbuildings(str)
{
    if (str=="")
    {
        document.getElementById("show_buildings_js").innerHTML="";
        return;
    } 
    if (window.XMLHttpRequest)
    {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    }
    else
    {// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function()
    {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
            document.getElementById("show_buildings_js").innerHTML=xmlhttp.responseText;
        }
    }
    xmlhttp.open("GET","showbds.php?q=",true);
    xmlhttp.send();
}

In this function I print the table in my page. That works fine.

The problem is that the messages from add_building.php don’t print in id='txtHint10' ,
despite all the others in add_building.php work. I think that the problem is that I call second js function and I have two xmlhttp.responseText. Because when I call js function add_building() alone it works perfect and prints the messages.

Answer 1

The problem is that you are overwriting you xmlhttp variable with the second javascript function. The result is that only the callback from the second function is executed.

For both functions to work independently of each other, you would need to use different variable names or declare them locally in each of your functions with var xmlhttp; (the cleaner solution).

Note that the scope of a variable in javascript is global unless you declare it using var in your function.