Home/ Questions/Q 8552543
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-11T14:26:46+00:00

According to this link xmlhttp.responseText not display text . I have another problem about

  • 0

According to this link xmlhttp.responseText not display text. I have another problem about locate the div id to display the update status. I have hundreds of div id=”result” which is waiting for a response code to take action : success || error. And now the problem is when I update any field. It’s only the first div id=”result” is change. So how to get the id back from php and have it display on its own status?

<script type="text/javascript">

//auto update
function updateField(nameValue){
    var xmlHttp=null;
    try{
        xmlHttp=new XMLHttpRequest();
        }
catch (e){
    try{
        xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
catch (e){
    alert("No AJAX!");
    return false;
    }
}
xmlHttp.onreadystatechange=function(){
    if(xmlHttp.readyState==4){
        if (xmlHttp.status==200){
            //this will be called after update
            var responseText = xmlHttp.responseText;        
                doSomethingAfterUpdate(responseText);
            }
        }
    }
    //this will send the data to server to be updated
    xmlHttp.open("GET", 'inc/room_rate_updatez.php?'+ nameValue, true);//return "x" or "y"
    xmlHttp.send(null);
}

function doSomethingAfterUpdate(retValFromPHP){
    if (retValFromPHP == "x"){
       document.getElementById("result").innerHTML = "<img src=\"../images/ico_no.png\" alt=\"X\"/>";
       document.getElementById("result").className="error"
    }else{
       document.getElementById("result").innerHTML = "<img src=\"../images/ico_yes.png\" alt=\"Y\" />";
       document.getElementById("result").className="success"
    }
}


</script>

Here’s the HTML:

<table border="1">
<tr id="zebra">
<td>01 Nov 2012</td>
<td id="rate"><div id="result"></div>&nbsp;<input type="text" name="rate|498|6400-5200-4600-5600-4100|0" id="498" value="6400" size="10" onchange="updateField(this.name + '=' + this.value);"/></td>
<td id="rate"><div id="result"></div>&nbsp;<input type="text" name="rate|498|6400-5200-4600-5600-4100|1" id="498" value="5200" size="10" onchange="updateField(this.name + '=' + this.value);"/></td>
<td id="rate"><div id="result"></div>&nbsp;<input type="text" name="rate|498|6400-5200-4600-5600-4100|2" id="498" value="4600" size="10" onchange="updateField(this.name + '=' + this.value);"/></td>
<td id="rate"><div id="result"></div>&nbsp;<input type="text" name="rate|498|6400-5200-4600-5600-4100|3" id="498" value="5600" size="10" onchange="updateField(this.name + '=' + this.value);"/></td>
<td id="rate"><div id="result"></div>&nbsp;<input type="text" name="rate|498|6400-5200-4600-5600-4100|4" id="498" value="4100" size="10" onchange="updateField(this.name + '=' + this.value);"/></td>
</tr>
<tr id="zebra">
<td>02 Nov 2012</td>
<td id="rate"><div id="result"></div>&nbsp;<input type="text" name="rate|499|6200-5200-4600-5600-4100|0" id="499" value="6200" size="10" onchange="updateField(this.name + '=' + this.value);"/></td>
<td id="rate"><div id="result"></div>&nbsp;<input type="text" name="rate|499|6200-5200-4600-5600-4100|1" id="499" value="5200" size="10" onchange="updateField(this.name + '=' + this.value);"/></td>
<td id="rate"><div id="result"></div>&nbsp;<input type="text" name="rate|499|6200-5200-4600-5600-4100|2" id="499" value="4600" size="10" onchange="updateField(this.name + '=' + this.value);"/></td>
<td id="rate"><div id="result"></div>&nbsp;<input type="text" name="rate|499|6200-5200-4600-5600-4100|3" id="499" value="5600" size="10" onchange="updateField(this.name + '=' + this.value);"/></td>
<td id="rate"><div id="result"></div>&nbsp;<input type="text" name="rate|499|6200-5200-4600-5600-4100|4" id="499" value="4100" size="10" onchange="updateField(this.name + '=' + this.value);"/></td>
</tr>
<tr id="zebra">
<td>03 Nov 2012</td>
<td id="rate"><div id="result"></div>&nbsp;<input type="text" name="rate|500|6200-5200-4500-5600-4100|0" id="500" value="6200" size="10" onchange="updateField(this.name + '=' + this.value);"/></td>
<td id="rate"><div id="result"></div>&nbsp;<input type="text" name="rate|500|6200-5200-4500-5600-4100|1" id="500" value="5200" size="10" onchange="updateField(this.name + '=' + this.value);"/></td>
<td id="rate"><div id="result"></div>&nbsp;<input type="text" name="rate|500|6200-5200-4500-5600-4100|2" id="500" value="4500" size="10" onchange="updateField(this.name + '=' + this.value);"/></td>
<td id="rate"><div id="result"></div>&nbsp;<input type="text" name="rate|500|6200-5200-4500-5600-4100|3" id="500" value="5600" size="10" onchange="updateField(this.name + '=' + this.value);"/></td>
<td id="rate"><div id="result"></div>&nbsp;<input type="text" name="rate|500|6200-5200-4500-5600-4100|4" id="500" value="4100" size="10" onchange="updateField(this.name + '=' + this.value);"/></td>
</tr>
<tr id="zebra">
<td>04 Nov 2012</td>
<td id="rate"><div id="result"></div>&nbsp;<input type="text" name="rate|501|6200-5200-4600-5400-4100|0" id="501" value="6200" size="10" onchange="updateField(this.name + '=' + this.value);"/></td>
<td id="rate"><div id="result"></div>&nbsp;<input type="text" name="rate|501|6200-5200-4600-5400-4100|1" id="501" value="5200" size="10" onchange="updateField(this.name + '=' + this.value);"/></td>
<td id="rate"><div id="result"></div>&nbsp;<input type="text" name="rate|501|6200-5200-4600-5400-4100|2" id="501" value="4600" size="10" onchange="updateField(this.name + '=' + this.value);"/></td>
<td id="rate"><div id="result"></div>&nbsp;<input type="text" name="rate|501|6200-5200-4600-5400-4100|3" id="501" value="5400" size="10" onchange="updateField(this.name + '=' + this.value);"/></td>
<td id="rate"><div id="result"></div>&nbsp;<input type="text" name="rate|501|6200-5200-4600-5400-4100|4" id="501" value="4100" size="10" onchange="updateField(this.name + '=' + this.value);"/></td>
</tr>
</table>

Now the questions are:

  1. How to make “XXX” change according to the responseText from PHP in “document.getElementById(“resultXXX”).innerHTML”?
  2. I’d like to name the div id=”rate[$i]” and update then send back when the update succeed.

Please suggest.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Your first problem is that all divs, inputs and trs have the same id. An ID can just exist once on a html page, so you should rename them to something more descriptive. Also, id’s can’t start with a number (f.e id=”498″ in the example below)

    <tr id="zebra1">
<td>01 Nov 2012</td>
<td id="rate_20121101_498"><div id="result_20121101_498"></div>&nbsp;<input type="text" name="rate|498|6400-5200-4600-5600-4100|0" id="input_20121101_498" value="6400" size="10" onchange="updateField(this.name + '=' + this.value);"/></td>
.... and so forth

    To know which value should be updated, you can make the PHP return a JSON response, something like:

    [
{ "id" : "20121101_498", "status" : "error" },
{ "id" : "20121101_500", "status" : "success" }
]

    which you can then access in the doSomethingAfterUpdate function.

    function doSomethingAfterUpdate(JSON){
  // Loop through the json response
  for (var i = 0 ; i < JSON.length ; i++)
  {
    // Set the class name for each object in the json response
    document.getElementById('result_' + JSON[i].id).className = JSON[i].status;
    // If you want to you can also access the input from here using
    // document.getElementById('input_' + JSON[i].id)
  }
}

    you can also put the image directly in the css class:

    .error
{
  background:url('/images/ico_no.png') no-repeat;
  width:20px;
  height:20px;
}
    • 0