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 6 of 6
  1. #1
    Regular Coder
    Join Date
    Sep 2006
    Location
    Colorado
    Posts
    132
    Thanks
    7
    Thanked 1 Time in 1 Post

    Upadating DIV tag with AJAX

    Okay, so I've been getting into AJAX lately and I have this code:
    Code:
    <script>
    function callback(serverData, serverStatus) {       // Called automatically when we get data back from server
       if(serverStatus == "200")
    	{
    	alert(serverData);                               // Display an alert box with the recieved data
    	}
    	else
    	{
    	alert('Error: File not found');
    	}
    }
    
    function ajaxRequest() 
    {
       var AJAX = null;                                 // Initialize the AJAX variable.
       if (window.XMLHttpRequest) {                     // Does this browser have an XMLHttpRequest object?
          AJAX=new XMLHttpRequest();                    // Yes -- initialize it.
       } else {                                         // No, try to initialize it IE style
          AJAX=new ActiveXObject("Microsoft.XMLHTTP");  //  Wheee, ActiveX, how do we format c: again?
       }                                                // End setup Ajax.
       if (AJAX==null) {                                // If we couldn't initialize Ajax...
          alert("Your browser doesn't support AJAX.");  // Sorry msg.						
          return false                                  // Return false, couldn't set up ajax
       }
       AJAX.onreadystatechange = function() {                      // When the browser has the request info..
          if (AJAX.readyState==4 || AJAX.readyState=="complete") { //  see if the complete flag is set.
             callback(AJAX.responseText, AJAX.status);             // Pass the response to our processing function
          }                                                        // End Ajax readystate check.
       }
       var url='notajax.html'; // This is the URL we will call.
       AJAX.open("GET", url, true);                                  // Open the url this object was set-up with.
       AJAX.send(null);                                              // Send the request.
    }
    
    
    </script><br>
    <a href="#" onClick="ajaxRequest()">Click Here</a><br>
    <div id='edit'>This is the div I want to edit.</div>
    Notajax.html
    Code:
    Hello World!
    What I would like to know is how I can get "hello world!", which should be inside my "serverData" variable into my "edit" div. I know it has something to do with appendChild() but everything I've tried so far hasnt worked.
    -bubbles

  • #2
    Regular Coder
    Join Date
    Sep 2005
    Posts
    535
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You need to create a text node.
    Inside your callback() function, try...
    Code:
    document.getElementById('edit').appendChild(document.createTextNode(serverData));
    If you want answers, write a smart question.

    Yes, someone probably does know how...

    Oh, and if you want to learn, STFW!

  • #3
    Regular Coder
    Join Date
    Sep 2006
    Location
    Colorado
    Posts
    132
    Thanks
    7
    Thanked 1 Time in 1 Post
    Okay that works... One more question. How do I get it to replace "This is the div I want to edit."?
    -bubbles

  • #4
    Regular Coder
    Join Date
    Dec 2006
    Posts
    417
    Thanks
    168
    Thanked 1 Time in 1 Post
    after your readystate complete do an innerHTML on the document id 'edit'


    here is an even simpler way... find a decent AJAX library (google mootools, XHR.js or prototype) and you can do an XHR request in 2-3 lines of code...

  • #5
    Regular Coder
    Join Date
    Sep 2006
    Location
    Colorado
    Posts
    132
    Thanks
    7
    Thanked 1 Time in 1 Post
    I dont understand what you mean, can you explain it a little more please?
    -bubbles

  • #6
    Regular Coder
    Join Date
    Sep 2005
    Posts
    535
    Thanks
    0
    Thanked 0 Times in 0 Posts
    The first hint Bobafart gave was to use something like:
    Code:
    document.getElementById('edit').innerHTML="This is the <span style='color:red;'>new</span> text.";
    As you can see, innerHTML is all of the html inside of the <div> element. Thus you can add other html elements (like my <span>) inside this string. The only problem (sort-of) is that innerHTML is not compliant with the W3C standards. The W3C consortium is a group that is trying to standardize web languages. Since innerHTML is not (currently) compliant, the script may fall apart in the future if future browsers decide to become completely compliant. However, all major browsers to date recognize innerHTML (eg IE, Firefox, Netscape, etc...) so it may be a moot point to worry about this. There are other compliant DOM methods for achieving the same result (search out a good DOM tutorial to learn about these), but innerHTML is easier, faster (according to quirksmode), and does not fall prey to the "hidden text-node" that affects some browsers but not others.

    I believe that Bobafart's other hint was to find a .js library on the web that already contains many useful AJAX functions. Since I haven't seen these, I can only assume that there is a function that you would provide an id for the div you want changed, a file on the server that the AJAX calls, and perhaps other parameters; and the function will then make the AJAX call and change the innerHTML of the provided div. I guess it depends more on your own curiosity and desire to learn. If you want some quick AJAX code to stick into some project you are working on, then getting one of these libraries may be the way to go. If you are using AJAX scripts to learn more about this technique, then writing these sample scripts and really understanding how everything works will probably serve you better.
    If you want answers, write a smart question.

    Yes, someone probably does know how...

    Oh, and if you want to learn, STFW!


  •  

    Posting Permissions

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