Jon JC Posted July 4, 2006 Share Posted July 4, 2006 Hi,I want to use a FOR loop to include the content of multiple files into a table. Within each iteration, a new row is created and external text is loaded using an AJAX technique.When the function is executed, only contents of the last file appear in the table. It seems the files contents are overwriting each other (possibly in the same cell). I want each cell to contain contents from different files.Here is the relevant JS code: var xmlHttpfunction getBlog(){var ifor (i=1;i<3;i++){var archiveRow=document.getElementById("archiveBlogTable").insertRow(0)var archiveCell=archiveRow.insertCell(0)var url=i + "_archive.js"xmlHttp=GetXmlHttpObject(stateChanged)xmlHttp.open("GET", url , true)xmlHttp.send(null)}} function stateChanged() {if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete"){ var archiveBlog=document.getElementById("archiveBlogTable").rows[0].cellsarchiveBlog[0].innerHTML=xmlHttp.responseText} } Any ideas?Note: I did not include the GetXmlHttpObject function since it focuses on browser error handling and does not affect my goal. Also, much of this code can be found in the AJAX tutorial (http://www.w3schools.com/ajax/ajax_source.asp).JC Link to comment Share on other sites More sharing options...
aspnetguy Posted July 4, 2006 Share Posted July 4, 2006 Try this, you were continually overwriting row 0. var xmlHttpfunction getBlog(){ var i for (i=0;i<2;i++) { var archiveRow=document.getElementById("archiveBlogTable").insertRow(i) var archiveCell=archiveRow.insertCell(0) var url=i + "_archive.js" xmlHttp=GetXmlHttpObject(function(){stateChanged(i)}) xmlHttp.open("GET", url , true) xmlHttp.send(null) }} function stateChanged(row) { if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete") { var archiveBlog=document.getElementById("archiveBlogTable").rows[row].cells archiveBlog[0].innerHTML=xmlHttp.responseText } } Link to comment Share on other sites More sharing options...
Jon JC Posted July 4, 2006 Author Share Posted July 4, 2006 Yea, I am always writing to row 0. However, when a new row 0 is inserted into a table, the rest of the rows (and data in those rows) are pushed down the table (i.e. all the data is still present and nothing should have been overwritten).I got the idea above from an example in the HTML DOM tutorial:http://www.w3schools.com/js/tryit.asp?file...table_insertrowI also tried your suggestion, but I got a similar result: only the contents of the last file shows up in the table.Attached below is some executable code (4 files: 0_archive.js, 1_archive.js, test.html, test.js). Hopefully it will help!JC0_archive.js abc 1_archive.js def test.html <html><head><script src="test.js"></script></head><body><table><tr> <td> <input type="radio" name="year" value="2006" onClick="getBlog()"> Click Me </td></tr></table><table id="table" border="1"></table></body></html> test.js var xmlHttpfunction getBlog(){var ifor (i=0;i<2;i++){ var tableRow=document.getElementById("table").insertRow(0) var tableCell=tableRow.insertCell(0) var url=i + "_archive.js" xmlHttp=GetXmlHttpObject(stateChanged) xmlHttp.open("GET", url , true) xmlHttp.send(null)}}function stateChanged() {if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete"){ var tableCell=document.getElementById("table").rows[0].cellstableCell[0].innerHTML=xmlHttp.responseText} }function GetXmlHttpObject(handler){ var objXmlHttp=nullif (navigator.userAgent.indexOf("Opera")>=0){alert("This example doesn't work in Opera") return }if (navigator.userAgent.indexOf("MSIE")>=0){ var strName="Msxml2.XMLHTTP"if (navigator.appVersion.indexOf("MSIE 5.5")>=0){strName="Microsoft.XMLHTTP"} try{ objXmlHttp=new ActiveXObject(strName)objXmlHttp.onreadystatechange=handler return objXmlHttp} catch(e){ alert("Error. Scripting for ActiveX might be disabled") return } } if (navigator.userAgent.indexOf("Mozilla")>=0){objXmlHttp=new XMLHttpRequest()objXmlHttp.onload=handlerobjXmlHttp.onerror=handler return objXmlHttp}} Link to comment Share on other sites More sharing options...
aspnetguy Posted July 4, 2006 Share Posted July 4, 2006 hmmm...I haven't created dynamic tabkes while using AJAX before. I am not sure how to solve it. Sorry Link to comment Share on other sites More sharing options...
Jon JC Posted July 4, 2006 Author Share Posted July 4, 2006 Fast response Thanks for trying.Anyone else with ideas?JC Link to comment Share on other sites More sharing options...
Webworldx Posted July 4, 2006 Share Posted July 4, 2006 It looks like you're writing the table faster than the AJAX can execute. Your code seems to go Write first row + cellSend first AJAX requestWrite second row + cellSend second AJAX requestReceived first AJAX requestReceived second AJAX requestI could be wrong, but an alert() in your stateChanged should tell you when it's being executed, and how much of the table has been created at the time. Link to comment Share on other sites More sharing options...
Jon JC Posted July 7, 2006 Author Share Posted July 7, 2006 It looks like you're right.Something I noticed is that the code works in Internet Explorer but not in Mozilla Firefox. I like using Firefox, so I've been trying to make it work by using the 'setTimeout' function and FOR loops to give AJAX enough time to execute. However, I haven't been successful.Any ideas?JC Link to comment Share on other sites More sharing options...
Webworldx Posted July 7, 2006 Share Posted July 7, 2006 Give each archiveCell an id on creation, and pass it to your ajax call back? Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now