Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Dec 2006
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    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
    Banned
    Join Date
    Oct 2005
    Location
    I'm in GMT -5
    Posts
    314
    Thanks
    0
    Thanked 1 Time in 1 Post
    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

    }
    }

  • #3
    New to the CF scene
    Join Date
    Dec 2006
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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!


  •  

    Posting Permissions

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