...

View Full Version : AJAX getElementById problem



user101
12-09-2006, 07:16 AM
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.checklis t.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));do cument.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.checklis t.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));do cument.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>

Ancora
12-09-2006, 11:46 AM
user101:

Pass an additional parameter to the sendTextareaData funciton, and use it to set the value of a global variable.

function sendTextareaData(memo,unitsectionid,checklistnumrecid,checklistrecid, checklistopt,txtID)
{
id_nmbr = txtID;
........
}

Declare the id_nmbr as a global variable. Declare it outside of every function, like you did for your xmlHttp variable.

var id_nmbr = "";

function stateChanged()
{
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{
myid = "text_id_"+id_nmbr
document.getElementById(myid).innerHTML=xmlHttp.responseText

}
}

user101
12-09-2006, 04:56 PM
Mike,
Thanks soooo much. I originally sent an additional parameter before...I didn't set up as a "global" var. I was trying to call a function to grab the number

Thanks a lot for pointing me to the corrective action!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum