SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Oct 2008
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    GetElementById and Ajax content replace

    Hi Folks,

    I am designing a dynamic form which changes the content when a radio input box is selected. In the process, I noticed that when a variable is created using GetElementById, that variable is not equal to the id when the content is reloaded using Ajax.

    I have a feeling it is somethng to do with the way GetElementById operates. If I use GetElementById when the page loads, are the variables I create voided when ajax reloads some of the content even if the IDs in question have the same name?

    Though it has not caused me any problems yet, I was wondering if anyone had any suggestions how this might be tackled?

    For example:

    JavaScript

    Code:
    function addListeners() {
      if (!document.getElementById) return;
    	
    var booksel = document.getElementById('selectbooks');
    var tapesel = document.getElementById('selecttapes');
    var cdsel = document.getElementById('selectcds');
    var pietysel = document.getElementById('selectpiety');
    var dvdsel = document.getElementById('selectdvds');
    
    addEvent(tapesel, 'click', gettapes, false);
    addEvent(cdsel, 'click', getcds, false);
    addEvent(pietysel, 'click', getpiety, false);
    addEvent(booksel, 'click', getbooks, false);
    addEvent(dvdsel, 'click', getdvds, false);
    }
    
    addEvent(window, 'load', addListeners, false);
    HTML

    Code:
    <div id="dynamic-content">
    
    <div class="fieldcontainer">
    <label>Audio Tape</label><input id="selecttapes" class="radio" name="itemtype" type="radio" size="35" value="tapes" checked="checked" />
    </div>
    
    <div class="fieldcontainer">
    <label>Book</label><input id="selectbooks" class="radio" name="itemtype" type="radio" size="35" value="books" />
    </div>
    
    <div class="fieldcontainer">
    <label>CD</label><input id="selectcds" class="radio" name="itemtype" type="radio" size="35" value="cds"  />
    
    </div>
    
    <div class="fieldcontainer">
    <label>DVD</label><input id="selectdvds" class="radio" name="itemtype" type="radio" size="35" value="dvds"  />
    </div>
    
    </div>
    If I used innerHTML to replace the code in the dynamic-content DIV, the GetElementById method I used to store the "selecttapes" Input variable would no longer work.

  2. #2
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2008
    Posts
    5,757
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    var booksel = document.getElementById('selectbooks');
    booksel now contains a reference to the object(the element) returned by getElementById. It is not some type of shortcut/macro for executing the getElementById method. The method is executed, and the return value is stored in the variable.

    You then later destory the html element which the variable pointed to, by setting the innerHTML of the parent object. Even though you may create some new, otherwise identical html element with the same id, it is a different object. You will need to look this new object up again by calling getElementById, and it will return a reference to this new element. Then you need to attach the click event handler to this new element.

    Fortunately, all you really need to do is call the addListeners() function after you update the innerHTML

  3. #3
    SitePoint Member
    Join Date
    Oct 2008
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi crmalibu,

    Thanks for the reply. It's as I thought but you have put it in terms which makes it crystal clear. How would you go about calling the addlisteners function again? Is it just a case of adding a javascript call before the

    Code:
    <div id="dynamic-content">
    Thanks for all your help. It's very much appreciated.


Tags for this Thread

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
  •