Manipulating data retrieved with AJAX

[kurent]

I'm using Java Server Faces, but the question applies to any other.

For example I click a button and AJAX request is sent to another page that outputs data in a dataTable. I put the responseText into a div tag and the table is rendered on the main page.

But now how do I make a row clickable and the contents transfer to a inputText? Like rowAction?

[A1ien51]

Add JavaScript handlers to the row like you would in a non-ajax case.

Eric

[kurent]

I did. And also made sure that javascript is put into the div tag, but it doesn't work. :(

Can anyone give me an example in any kind of language?

[yearbass]

say that your ajax request returns this html structure:
<table border="1">
<tr>
<th>Head1</th>
<th>Head2</th>
<th>Head3</th>
</tr>
<tr class="dataRow">
<td>Data 1 1</td>
<td>Data 1 2</td>
<td>Data 1 3</td>
</tr>
<tr class="dataRow">
<td>Data 2 1</td>
<td>Data 2 2</td>
<td>Data 2 3</td>
</tr>
<tr class="dataRow">
<td>Data 3 1</td>
<td>Data 3 2</td>
<td>Data 3 3</td>
</tr>
</table>

and you have prepared this :
Text1 : <input type="text" id="d1"/><br/>
Text2 : <input type="text" id="d2"/><br/>
Text3 : <input type="text" id="d3"/><br/>

then on your readystatechange event...

xmlhttpvar.onreadystatechange = function () {
if (xmlhttpvar.readyState == 4) {
if (xmlhttpvar.status == 200) {
document.getElementById("dataTable").innerHTML = xmlhttpvar.responseText;
var DataRows = document.getElementsByTagName("tr");
for (var i=0; i<DataRows.length; i++) {
if (DataRows[i].className == "dataRow") {
DataRows[i].onclick = doRowClick;
}
}
}
}
}

and you need to add this
function doRowClick(){
document.getElementById("d1").value = this.cells[0].innerHTML;
document.getElementById("d2").value = this.cells[1].innerHTML;
document.getElementById("d3").value = this.cells[2].innerHTML;
}

[kurent]

That works!

Thank you! :)