Replacing Elements Using the DOM


What if you didn’t want to append the new text to the text already displayed, but wanted to replace what’s already there with the newly downloaded text? Take a look at replacer.html, which is shown in Figure 8.4.

image from book
Figure 8.4: Using replacer.html

When you click the first button, a message is downloaded and displayed, as you see in Figure 8.5.

image from book
Figure 8.5: Using replacer.html to download text

Clicking the second button replaces the current text with the newly downloaded text, as you see in Figure 8.6.

image from book
Figure 8.6: Using replacer.html to replace existing text with downloaded text

How does this work in code? You’re going to need two buttons for the two messages:

 <body>   <h1>Using the DOM to replace elements</h1>   <form>     <input type = "button" value = "Get message 1"       onclick = "getData('1')">     <input type = "button" value = "Get message 2"       onclick = "getData('2')">   </form>       .       .       . </body>

This example uses a <p> element with the ID text, contained in a <div> element with the ID targetDiv to display the downloaded text:

 <body>   <h1>Using the DOM to replace elements</h1>   <form>     <input type = "button" value = "Get message 1"       onclick = "getData('1')">     <input type = "button" value = "Get message 2"       onclick = "getData('2')">   </form>   <div  width =100 height=100>     <p >The fetched text will appear here.</p>   </div> </body>

In the getData function, create an XMLHttpRequest object in preparation for downloading one or the other text file on the server that this examples uses, data1.txt or data2.txt:

 function getData(number) {    var XMLHttpRequestObject = false;   if (window.XMLHttpRequest) {     XMLHttpRequestObject = new XMLHttpRequest();   } else if (window.ActiveXObject) {     XMLHttpRequestObject = new       ActiveXObject("Microsoft.XMLHTTP");   }   .   .   .

then call the XMLHttpRequest object’s open method, configuring that object to download data1.txt or data2.txt, depending on which button was clicked:

 function getData(number) {   var XMLHttpRequestObject = false;   if (window.XMLHttpRequest) {     XMLHttpRequestObject = new XMLHttpRequest();   } else if (window.ActiveXObject) {     XMLHttpRequestObject = new       ActiveXObject("Microsoft.XMLHTTP");   }    if(XMLHttpRequestObject) {     XMLHttpRequestObject.open("GET", "data" + number +       ".txt");    .    .    .

Finally, add code to handle the downloaded text:

 <html>   <head>      <title>Using the DOM to replace elements</title>      <script language = "javascript">         .         .         .         if(XMLHttpRequestObject) {            XMLHttpRequestObject.open("GET", "data" + number +             ".txt");           XMLHttpRequestObject.onreadystatechange = function()          {            if (XMLHttpRequestObject.readyState == 4 &&              XMLHttpRequestObject.status == 200) {              .              .              .            }         } 

To replace the current text in the <p> element with the ID text in the Web page with the newly downloaded text, start by creating a new <p> element, also with the ID text (so it can be replaced the next time the user clicks a button). To create that <p> element, use the document object’s createElement method. To add the ID attribute to the <p> element, use that element’s setAttribute method:

 XMLHttpRequestObject.onreadystatechange = function() {   if (XMLHttpRequestObject.readyState == 4 &&     XMLHttpRequestObject.status == 200) {     var newP = document.createElement("p");     newP.setAttribute("id", "text");    .    .    .   } }

then you can create the text node that will hold the newly downloaded text inside the <p> element:

 XMLHttpRequestObject.onreadystatechange = function() {   if (XMLHttpRequestObject.readyState == 4 &&     XMLHttpRequestObject.status == 200) {     var newP = document.createElement("p");     newP.setAttribute("id", "text");     var newText =     document     .createTextNode(XMLHttpRequestObject.responseText);    .    .    .   } }

and then append that text node to the new <p> element:

 XMLHttpRequestObject.onreadystatechange = function() {   if (XMLHttpRequestObject.readyState == 4 &&     XMLHttpRequestObject.status == 200) {     var newP = document.createElement("p");     newP.setAttribute("id", "text");     var newText =     document     .createTextNode(XMLHttpRequestObject.responseText);     newP.appendChild(newText);    .    .    .   } }

The goal now is to replace the text in the current <p> element with the text in the new <p> element, which you can do using the enclosing <div> element’s replaceChild method:

 XMLHttpRequestObject.onreadystatechange = function() {   if (XMLHttpRequestObject.readyState == 4 &&     XMLHttpRequestObject.status == 200) {     var newP = document.createElement("p");     newP.setAttribute("id", "text");     var newText =     document     .createTextNode(XMLHttpRequestObject.responseText);     newP.appendChild(newText);     var div = document.getElementById("targetDiv");     var oldP = document.getElementById("text");    .    .    .   } }

Now you can replace the old <p> element with the new <p> element, like this:

 XMLHttpRequestObject.onreadystatechange = function() {   if (XMLHttpRequestObject.readyState == 4 &&     XMLHttpRequestObject.status == 200) {     var newP = document.createElement("p");     newP.setAttribute("id", "text");     var newText =     document     .createTextNode(XMLHttpRequestObject.responseText);     newP.appendChild(newText);     var div = document.getElementById("targetDiv");     var oldP = document.getElementById("text");     div.replaceChild(newP, oldP);   } }

And you’re done! That completes the code for replacer.html.



Ajax Bible
Ajax Bible
ISBN: 0470102632
EAN: 2147483647
Year: 2004
Pages: 169

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net