Cacho a écrit :
Hi
I'm new to Ajax but I've used javascript from time to time.
Now, I've a java application that will generate a page with data in a
table. I want to make a link in each row so when user click it, connect
to my server and get some more data to fill a hidden row below the
clicked one.
I guess it could be simple
Not really ...
and could imagine that somebody could have
some code in that way and, may be, would like to share it... or just
give me a clue about how to do it.
To know on witch row (index of row) you are when you click.
To call via XMLHttpRequest the file to display.
To know in which cell of next row (index+1) you want to inner what was
received.
I've been googling for this but every thing I found is about xml data
but I think it could be possible to retrieve just xhtml portions of
code with ajax/javascript...
You mean you want to get a large file via XMLHttpRequest, then to insert
in next row only a little part of what was received ?
<script type="text/css">
var rangs, cible, http_request=false;
onload = function() {
// rangs = collection of rows -- cible = main target
var rangs = document.getElementById('myTable');
var cible = rangs.getElementsByTagName('TBODY')[0];
rangs = cible.getElementsByTagName('TR');
// give event onclick to rows not hidden
for(var i=0, i<rangs.length; i++) {
if(rangs
.className=!='hide') {
rangs.onclick = function() {
insertDatas(this);
};
}
}
}
function rowIndex(what) {
for(var i=0, i<rangs.length; i++) {
if(rangs==what) return i;
}
}
function insertDatas(what) {
var idx = rowIndex(what);
var targ = rangs[idx];
targ = targ.getElementsByTagName('TD')[0];
var url = 'myDatas/'+(idx/2)+'.txt';
XHR();
http_request.onreadystatechange = function(){ inserContents(targ);};
http_request.open('GET', url, true);
http_request.send(null);
}
function inserContents(where) {
if (http_request.readyState == 4) {
if (http_request.status == 200) {
where.innerHTML = http_request.responseText;
}
else {
alert('Problem with request.');
}
}
}
function XHR() {
http_request = false;
if (window.XMLHttpRequest) { // Mozilla, Safari,...
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {
http_request.overrideMimeType('text/xml');
}
}
else if (window.ActiveXObject) { // IE
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e) {}
}
}
if (!http_request) {
alert('Abandon : Impossible de créer une instance XMLHTTP');
return false;
}
return http_request;
}
</script>
<style type="text/css">
..hide { display: none;
</style>
<table id="myTable">
<tbody>
<tr><td>test 1</td></tr>
<tr class="hide'><td></td></tr>
<tr><td>test 2</td></tr>
<tr class="hide'><td></td></tr>
</tbody>
</table>
datas :
- in folder : myDatas
- files : 0.txt, 1.txt, 2.txt ...
