AJAX getElementById problem

[bslintx]

HI all,
I have a serverside(ASP)/javascript(AJAX) script that i need to make more dynamic...
I grabbed this typical snippet and modified to my needs...however, my problem is I need to have what I hardcoded in red to be dynamic.
I have a checklist with "items" (questions to answer)
- Each item has a textarea that a user can fill in with notes pertaining to the item
- The code I have works well; however, I need it to query on demand(onclick) using ajax. the responseText is an asp generated table of records from a database. Each item has a recordset; however with current code i can only access one...in this case ...where text_id_4 (AJAX div name)is located. under this textarea is the AJAX returned id.
how do i send a parameter to the stateChanged() function to work as I click on an onclick event?
in theory i thought...
1.assign unique names and id's for looped asp recordset(textareas and AJAX id(query result under each textarea)
2. onclick pass the AJAX responseText div tag name: ie - <div id="text_id_5"></div> to the stateChanged() function
am I at least on the right track....I would appreciate any help...I assure you IF I knew what to look for (Googling) I would have...I know very little about javascript ...THANKS!

current code for AJAX (setting up to send data to server and returning data to div)

var xmlHttp
function sendTextareaData(memo,unitsectionid,checklistnumrecid,checklistrecid, checklistopt)
{ 
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
alert ("Browser does not support HTTP Request")
return
} 
var url="sendtextareadata.asp"
var memo = escape(memo)
memo = memo.replace("+", "%2B");
url=url+"?memo="+memo
url=url+"&unitsectionid="+unitsectionid
url=url+"&checklistnumrecid="+checklistnumrecid
url=url+"&checklistrecid="+checklistrecid
url=url+"&checklistopt="+checklistopt
url=url+"&sid="+Math.random()
xmlHttp.onreadystatechange=stateChanged
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}
function stateChanged() 
{ 
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{ 
var myid = "text_id_" + 4
document.getElementById(myid).innerHTML=xmlHttp.responseText 
} 
} 
function GetXmlHttpObject()
{ 
var objXMLHttp=null
if (window.XMLHttpRequest)
{
objXMLHttp=new XMLHttpRequest()
}
else if (window.ActiveXObject)
{
objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
}
return objXMLHttp
}

I opted not to post the asp code...I figured the html (output) would be more beneficial for debugging/following along
html OTPUT from server (cut many items off..simply wanted to show more than one for the problem i have (2 items/AJAX divs total)

<form name="checklist">
<table class="checklist_body" cellspacing="0" cellpadding="0">
 <tr>
  <th class="checklist_body">NO.</th>
  <th class="item">ITEM</th>
  <th class="reference">REFERENCE</th>
  <th class="yes">Y</th>
  <th class="no">N</th>
  <th class="na">NA</th>
</tr>
<tr>
 <td valign="top" style="position:relative;" class="sequence">1  <img id="swap_1" style="position:absolute;bottom:0px;right:0px;background-image: url(images/plus2.gif);background-repeat:no-repeat;" src="images/transparent.gif" onclick="switchMenu('var_1');toggleImage(this, 'url(images/minus2.gif)');sendTextareaData(document.checklist.memo_1.value,1,1,1,getRadioValue(document.checklist.radio_1))">
 </td>
 <td valign="top" class="item">Do unit commanders/staff agency chiefs appoint security managers and is a copy of the appointment letter provided to the ISPM?&nbsp;</td>
 <td valign="top" class="reference">AFI 31-401, Para 1.3.3 and AETC Sup 1, Para  1.3.5.1&nbsp;</td>
 <td class="yes"><input type="radio" name="radio_1" value="Y" checked></td>
 <td class="no"><input type="radio" name="radio_1" value="N"></td>
 <td class="na"><input type="radio" name="radio_1" value="NA"></td>
</tr>
<tr id="var_1" style="display:none;">
 <td colspan="6" class="discrepancy">
  <table cellspacing="0" cellpadding="0">
   <tr>
    <td colspan="6" class="taskbar">
     <input type="button" name="add_history" value="Add to History" onclick="sendTextareaData(document.checklist.memo_1.value,1,1,1,getRadioValue(document.checklist.radio_1));document.checklist.textarea_1.value = '';">
    </td>
   </tr>
   <tr>
    <td colspan="6">
     <textarea id="textarea_1" class="discrepancy" name="memo_1" wrap="hard"></textarea>
    </td>
   </tr>
   <tr>    <td colspan="6" style="width:650px;">
     <div id="text_id_1"></div>
    </td>
   </tr>
  </td>
 </tr> 
</table>
</td>
</tr>
<tr>
 <td valign="top" style="position:relative;" class="sequence">2  <img id="swap_2" style="position:absolute;bottom:0px;right:0px;background-image: url(images/plus2.gif);background-repeat:no-repeat;" src="images/transparent.gif" onclick="switchMenu('var_2');toggleImage(this, 'url(images/minus2.gif)');sendTextareaData(document.checklist.memo_2.value,1,2,2,getRadioValue(document.checklist.radio_2))">
 </td>
 <td valign="top" class="item">Are internal operating instructions developed, and are drafts routed through the ISPM for review prior to implementation?&nbsp;</td>
 <td valign="top" class="reference">AFI 31-401, AETC Sup 1, Para 1.3.6.2&nbsp;</td>
 <td class="yes"><input type="radio" name="radio_2" value="Y"></td>
 <td class="no"><input type="radio" name="radio_2" value="N" checked></td>
 <td class="na"><input type="radio" name="radio_2" value="NA"></td>
</tr>
<tr id="var_2" style="display:none;">
 <td colspan="6" class="discrepancy">
  <table cellspacing="0" cellpadding="0">
   <tr>
    <td colspan="6" class="taskbar">
     <input type="button" name="add_history" value="Add to History" onclick="sendTextareaData(document.checklist.memo_2.value,1,2,1,getRadioValue(document.checklist.radio_2));document.checklist.textarea_2.value = '';">
    </td>
   </tr>
   <tr>
    <td colspan="6">
     <textarea id="textarea_2" class="discrepancy" name="memo_2" wrap="hard"></textarea>
    </td>
   </tr>
   <tr>    <td colspan="6" style="width:650px;">
     <div id="text_id_2"></div>
    </td>
   </tr>
  </td>
 </tr> 
</table>
</td>
</tr>
</td>
</tr>
</table>
 </form>

[danNL]

One thing is that your js code looks like it's missing ; at the end of each js code line. With the ; at the end of each line it would look like this:

if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{
var myid = "text_id_" + 4;
document.getElementById(myid).innerHTML=xmlHttp.responseText;
}

While not an AJAX expert document.getElementById(myid) should work. You could run an alert to make sure the variable is coming through correctly.

if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{
var myid = "text_id_" + 4;
alert(myid);
document.getElementById(myid).innerHTML=xmlHttp.responseText;
}

There are some html issues in the code you posted which might also be the source of the problem. You can run it through the w3c validator to find them.

[dwees]

My first suggestion is that instead of using individual functions for each of these actions that are written such that they may not be cross-browser, take a look at the Jquery library.

Although it will increase your page load by about 25k, it will greatly decrease the complexity of the code you write, and comes with some very easy to follow documentation and a detailed API.

What you would then do is construct an 'onclick' function that uses the Jquery Ajax function and inserts the proper information into the function. You can even specify which returning function gets called, and specify what to do in the case of an error. This means that you only have to focus on the logic of these 3 functions.

I'm currently using the Jquery Ajax library in a very simple script where I have a random quote that is drawn from a database query that is updated every 10 seconds.

How this is useful to your problem is that I wanted to make sure that I didn't send the same quote twice in a row, so I sent the quote ID back and forth between the server side script, and the Javascript in the browser.

To do this, I rely on the fact that the Ajax query returns the text that my server side script creates, and in that returned text, I include the ID I wanted. I then parse that ID out of the return text to use in my Javascript functions using regular expressions.

For instance you could construct the response from the server to look like:

imgid[id#]info[info_here#]

and then do something like:

function stateChanged() { 
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete") {
   var text = xmlHttp.responseText;
   var matches;
   if (matches = /imgid\[(.*?)\]/.exec(text)) {
       // Get the id from the return string
       var myid = matches[0];
   } else {
       // Use a default id in the case of an error
       var myid = 4;
   }
   if (matches = /info\[(.*?)\]/.exec(text)) {
       // Get the data information from the return string
       var mytext = matches[0];
   } else {
       // Use a default id in the case of an error
       var mytext = "My default error message";
   }
   document.getElementById(myid).innerHTML = mytext;
}