SitePoint Sponsor |
|
User Tag List
Results 1 to 3 of 3
Thread: AJAX getElementById problem
-
Dec 9, 2006, 02:05 #1
- Join Date
- Feb 2005
- Posts
- 74
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
AJAX getElementById problem
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)
Code: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 }
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)
Code:<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? </td> <td valign="top" class="reference">AFI 31-401, Para 1.3.3 and AETC Sup 1, Para 1.3.5.1 </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? </td> <td valign="top" class="reference">AFI 31-401, AETC Sup 1, Para 1.3.6.2 </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>
-
Dec 9, 2006, 03:33 #2
- Join Date
- May 2006
- Location
- Amsterdam
- Posts
- 206
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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:
Code:if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete") { var myid = "text_id_" + 4; document.getElementById(myid).innerHTML=xmlHttp.responseText; }
Code:if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete") { var myid = "text_id_" + 4; alert(myid); document.getElementById(myid).innerHTML=xmlHttp.responseText; }
-
Dec 9, 2006, 04:08 #3
- Join Date
- Jul 2006
- Posts
- 151
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Ajax
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#]
Code: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; }
Bookmarks