SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    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
    }
    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)
    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?&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>

  2. #2
    SitePoint Addict
    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;
    }
    While not an AJAX expert document.getElementById(myid) should work. You could run an alert to make sure the variable is coming through correctly.
    Code:
    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.

  3. #3
    SitePoint Zealot
    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#]
    and then do something like:

    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

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •