JavaScript / HTML question

[hgm]

I converted my ChessLive! web viewer into a web page where people can play against each other, as a turn-based server. (So unlike servers like FICS or playchess, they won't have to be present at the same time.) When the user recalls a game from the list, the board has to be reset through its initial position. As the board is actually a HTML table of GIF images, I do this by assigning to the innerHTML field of a <table> element;

Code: Select all

<table id="boardposition" class="board">

..... // stuff

</table>

I copied the stuff that is between the table tags in a separate file, startpos.txt. When the underlying JavaScript program starts auto-playing a new game, it does:

Code: Select all

function get_url(url)
{
    request.open("GET", url, false); // synchronous request
    request.send('');
    return request.responseText;
}

...

    document.getElementById('boardposition').innerHTML = get_url('startpos.txt');

This is a motif that the viewer uses in many places, and usually it works without problem to show the replaced HTML element on the display. And indeed, it works without a hitch in FireFox.

But when I try it with Internet Explorer, it is completely ignored, and the new game starts playing with the final position of the previous game as starting position (thoroughly messes things up...).

What am I doing wrong that could act as an excuse for IE to ignore the assignment?

(For those who want to try with their own browser; the page is at

http://hgm.nubati.net/schess/play.html ,

and clicking on a game in black window on the right that lists them will start auto-playing that game on the board on the left.)

[Antonio Torrecillas]

http://msdn.microsoft.com/en-us/library ... s.85).aspx
The innerHTML property is read-only on the col, colGroup, frameSet, html, head, style, table, tBody, tFoot, tHead, title, and tr objects.

try with a TD instead of table.

[casaschi]

I never used synchronous requests, but I'd suggest looking in two directions:
1) a more generic definition for the XMLHTTPRequest, such as discussed here http://stackoverflow.com/questions/4151 ... est-object
2) rather than reusing the same global var "request", I would create "request" as local variable to the get_url function and get a fresh new instance each time

[hgm]

http://msdn.microsoft.com/en-us/library ... s.85).aspx
The innerHTML property is read-only on the col, colGroup, frameSet, html, head, style, table, tBody, tFoot, tHead, title, and tr objects.

try with a TD instead of table.

OK, thanks. This was indeed the problem. In stead of trying to assign the entire table at once, I now do it (<td>) cell by cell:

Code: Select all

function set_up(data)
{
    squares = stamp.split('\n');
    for&#40;i=0; i<squares.length; i++) &#123;
        tmp = squares&#91;i&#93;.split&#40;';');
        document.getElementById&#40;tmp&#91;0&#93;).innerHTML = tmp&#91;1&#93;;
    &#125;

&#125;


...

    stamp = get_url&#40;'startpos.txt');
    set_up&#40;stamp&#41;;

where I have altered startpos.txt to not contain the literal HTML of the table, but just pairs of square-name, cell contents (a gif <img>), like:

Code: Select all

a8;<img src="gifs/br.gif">
b8;<img src="gifs/bn.gif">
c8;<img src="gifs/bb.gif">

in stead of

Code: Select all

<td id='a8' class='w'><img src="gifs/br.gif"></td>
<td id='b8' class='b'><img src="gifs/bn.gif"></td>
<td id='c8' class='w'><img src="gifs/bb.gif"></td>

This works on IE and FireFox/Chrome alike!