Problem clearing <DIV> block

Hi all. I'm a newbie of AJAX (and not well prepared in english too) with some problem at first aproach with AJAX programming. I writed a code that modify a number of <DIV> bloc (eg. <DIV id='A1'></DIV> <DIV id='A2'></DIV> <DIV id='A3'></DIV>) in a free sequence. All go well when I click on a link with href="javascript:change(n)" where n is the number of block to modify. But when I click on a link with href="javascript:void(n)" the function that is related with a simple code document.getElementById('A'+n).innerHTML = ''; the voided block is the last "created" not the one identify by the n passed. Note that these problem come out when I "write" some blocks and then try to void one: if I write and clear one a time it work nice. Where are I do the mistake? Thanks in advance.

I suppose you are using javascript:void() as explained in this link: developer.mozilla.org/en/docs/Core_JavaScript_1.5_Guide:Operators:Special_Operators#void But without any code it is not clear for me what you want to do. Can you provide the part of code that is related to the problem?

I send you an email with the code because when I try to post it here, come out a message "External Link not allowed...".

There is at least one problem in the code you have submitted, in the function to create the XHR object. A more complete code will be:

function AACreate() 
{
    var request = false;
        try {
            request = new ActiveXObject('Msxml2.XMLHTTP');
        }
        catch (err2) {
            try {
                request = new ActiveXObject('Microsoft.XMLHTTP');
            }
            catch (err3) {
		try {
			request = new XMLHttpRequest();
		}
		catch (err1) 
		{
			request = false;
		}
		}
	}
    return request;
}

this comes from the Anaa framework. Try it and let me know if it works better...

I have also fixed a problem in the forum code that was preventing to enter a code with the http string inside... Sorry for the inconvenience.

I substitute the createRequestObject() function with your AACreate() in the index.php and the row var http = AACreate(); but the problem persist. Consideration I think that the problem is hidden in some thing writed wrong or in some piece forgeted, because it is not possible that no one before had a similar problem and that wasn't fixed. I haven't experience in developing "ajax page" but I think that having many <DIV> blok changed in sequence and then change in another sequence is frequent. Anyway I stay tuned to get your precious help. Thanks Stefano PS: I posted two example page here www.mymage.it/ajax/test1/ and here www.mymage.it/ajax/test2/ (both wit my old createRequestObject() function).

I believe the problem is in the use of the "t" global variable. Never use global variable in asynchronous mode, the code will be changed before the variable is assigned with the value got in responseText.

Looking the code with your observation on the "t" global variable, I found an error: WRONG CODE

function vuota(n) {
	document.getElementById('righe'+t).innerHTML = null;
}

RIGHT CODE

function vuota(n) {
	document.getElementById('righe'+n).innerHTML = null;
}

Now TEST2 is working. I give a rapid sight at the TEST1 code but I don't found anithing wrong. Later I will do a new analisis, hoping to found the problem.

Trying understand something with DOM inspector, I found that when I have a "<DIV id="A">TEXTA</DIV>" block and insert in it the text "</DIV><DIV id="B">TEXTB", the result isn't these: <DIV id="A"> .......TEXTA </DIV> <DIV id="B"> .......TEXTB </DIV> but these: <DIV id="A"> .....TEXTA .....</DIV> .....<DIV id="B">TEXTB </DIV> So, the second block is nested in to the first: the new HTML code isn't the simple sequence of text but "remembs" the story of the construction. If these is the real problem, I think that I have to set-up a new way to implement the dynamic effect to my page. I hope someone has a simple idea to fix that to suggest.

I suggest also to install Firebug on Firefox and use it to view the data that are exchanged with the server.

I installed these beautiful tool, but use it to inspect the HTML result (I hope these is your "data that are exchanged with the server"), and found these: Initial code:

<head/>
      <body>
      <script>
      .......
      </script>
<div id="puls">
</div>
<div id="STATO1"> Linea 1 </div>
<div id="STATO2"/>
</body>
</html>

When I use the function

document.getElementById('STATO'+n).innerHTML = 'Linea '+String(n)+'  <a href="javascript:elimina('+n+')">Elimina '+n+'</a></div><div id="STATO'+ns+'">';

the result is:

<html>
<head/>
      <body>

      <script>
      .........
      </script>
<div id="puls">
</div>
<div id="STATO1"> Linea 1 </div>
<br/>
<div id="STATO2">
Linea 2
<a href="javascript:elimina(2)">Elimina 2</a>
<br/>
<div id="STATO3"/>
</div>
</body>
</html>

So it "forget" to write the </DIV> tag causing the nesting of the new block. It seems that the </DIV> block is filtered and cleaned. Any suggestion?

Try to replace: <div id="STATO2"/> by <div id="STATO2> </div> And try to rewrite the code in a way that closed div are inserted and not partial tags as in your code. Could be better.