Получить определенный элемент в ответ от xmlHttp.responseText?

Согласно этой ссылке https://stackoverflow.com/questions/12404431/xmlhttp-responsetext-not-display-text/12404599#comment16671053_12404599. У меня есть еще одна проблема с поиском идентификатора div для отображения статуса обновления. У меня есть сотни div id="result", которые ждут кода ответа для выполнения действия: успех || ошибка. И теперь проблема, когда я обновляю любое поле. Изменен только первый div id="result". Итак, как вернуть идентификатор из php и отобразить его в собственном статусе?

<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>

Вот 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>

Теперь вопросы:

  1. Как изменить "XXX" в соответствии с responseText из PHP в "document.getElementById("resultXXX").innerHTML"?
  2. Я хотел бы назвать div id="rate[$i]" и обновить, а затем отправить обратно, когда обновление будет выполнено успешно.

Пожалуйста, предложите.


javascript html ajax getelementbyid
person Wilf    schedule 13.09.2012    source источник

Ответы (4)


arrow_upward
0
arrow_downward

Ваша первая проблема заключается в том, что все элементы div, input и trs имеют одинаковый идентификатор. Идентификатор может существовать только один раз на html-странице, поэтому вам следует переименовать его во что-то более описательное. Кроме того, идентификатор не может начинаться с цифры (например, id="498" в приведенном ниже примере)

<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

Чтобы узнать, какое значение следует обновить, вы можете заставить PHP возвращать ответ JSON, например:

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

к которому вы затем можете получить доступ в функции doSomethingAfterUpdate.

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)
  }
}

вы также можете поместить изображение непосредственно в класс css:

.error
{
  background:url('/images/ico_no.png') no-repeat;
  width:20px;
  height:20px;
}
person Jan    schedule 13.09.2012
comment
Можно вопрос по дампу? Если я смогу получить ответ в формате JSON и что тогда. Как я могу получить обновление статуса ожидаемой цели? - person Wilf; 13.09.2012
comment
Это слишком сложно для меня. Поэтому я решил сделать только один статус для всех обновлений: - person Wilf; 13.09.2012

arrow_upward
0
arrow_downward

То, что вы делаете, противоречит значению идентификатора, то есть уникального идентификатора элемента. Конечно, правила стиля применяются ко всем элементам с определенным идентификатором, но вы должны сохранять уникальный идентификатор в своей модели DOM. Существуют document.getElementById, а не getElementsById (обратите внимание на дополнительные буквы «s») по какой-то причине.

Просто используйте что-то другое для своей задачи. Классы, если быть точным. Таким образом, наличие таких элементов, как

<div class="result"></div>
...
<span class="result"></span>
...

ты можешь сделать

var outputs = document.getElementsByClassName("result");
for (var i = 0; i < outputs.length; i++)
    outputs[i].innerHTML = "<img src=\"../images/ico_no.png\" alt=\"X\"/>";
person MaxArt    schedule 13.09.2012

arrow_upward
0
arrow_downward

Прежде всего, вы можете использовать реализацию jQuery Ajax. Это значительно упростит задачу. Во-вторых, id должен быть уникальным, и у вас есть несколько элементов с одинаковым идентификатором.

person Ilia Frenkel    schedule 13.09.2012

arrow_upward
0
arrow_downward

Это слишком сложно для меня. Поэтому я решил сделать только один статус для всех обновлений:

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

Это заставит все статусы обновления плавать над содержимым. Задача решена!

person Wilf    schedule 13.09.2012