SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Jun 2007
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy Need help with AJAX, onreadystatechange and getElementByID

    Hello everyone,

    Long time lurker, first time poster.

    I'm trying to implement an AJAX inline editor and am having some trouble. I want to use this editing field several times on
    the same page, and was hoping to make the JavaScript reusable, passing
    it the name of the fields that need to change, but I'm having some
    trouble. In particular, I'm having trouble here:

    ------------
    function sndReq(action) {
    http.open('get', action);
    http.onreadystatechange = handleResponse;
    http.send(null);
    }

    function handleResponse() {
    if(http.readyState == 4){
    var replaceText = document.getElementById(name_textbox).value;
    document.getElementById('name_displaybox_contents').innerHTML = replaceText;
    document.getElementById('name_displaybox').style.display = '';
    document.getElementById('name_editingbox').style.display = 'none';
    }
    }
    ------------

    My thought was that at the <http.onreadystatechange = handleResponse;>
    line I could pass the value of the field element I'm using on to the
    handleResponse function and then use it to swap out the
    getElementByIds so that I wouldn't need to replicate all this code for
    the different chunks I'm swapping out. However, the http.readyState
    is making things difficult for me; for some reason, if I pass a
    variable on to handleResponse, the "if (http.readyState == 4)" doesn't get
    tripped.

    Does this make any sense? I don't know, because it doesn't make sense to me either. If you could help me out I'd be greatly in your debt!

    Mike

  2. #2
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you could try this:

    Code:
    function sndReq(action, field) {
    http.open('get', action);
    http.onreadystatechange = function() { 
    handleResponse(field);
    };
    http.send(null);
    }
    
    function handleResponse(field) {
    if(http.readyState == 4){
    alert(field.id);
    var replaceText = document.getElementById(name_textbox).value;
    document.getElementById('name_displaybox_contents').innerHTML = replaceText;
    document.getElementById('name_displaybox').style.display = '';
    document.getElementById('name_editingbox').style.display = 'none';
    }
    }


  3. #3
    SitePoint Member
    Join Date
    Jun 2007
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you so much! Problem solved, YAY!

  4. #4
    SitePoint Zealot moretea's Avatar
    Join Date
    Jun 2004
    Location
    Texas, USA
    Posts
    118
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I'm having a similar problem; please forgive me for being a n00b to AJAX! Here's the code I'm working with:

    function makeRequest(url) {

    if (window.XMLHttpRequest) { // Mozilla, Safari,...
    http_request = new XMLHttpRequest();
    } else if (window.ActiveXObject) { // IE
    http_request = new ActiveXObject("Microsoft.XMLHTTP");
    }
    http_request.onreadystatechange = postContents;
    http_request.open('GET', url, false);
    http_request.send(null);

    }

    function postContents() {

    if (http_request.readyState == 4) {
    if (http_request.status == 200) {
    document.getElementById('chart').innerHTML = http_request.responseText;
    } else {
    alert('There was a problem with the request;' + http_request.readyState + ';' + http_request.status);
    }
    }

    Why can't I add an argument (passing a DIV ID) to makeRequest, then pass it on to the postContents function? When I try, I get a type mismatch error upon calling postContents. Thanks in advance!

  5. #5
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    function makeRequest(url, param) {
    
    if (window.XMLHttpRequest) { // Mozilla, Safari,...
    http_request = new XMLHttpRequest();
    } else if (window.ActiveXObject) { // IE
    http_request = new ActiveXObject("Microsoft.XMLHTTP");
    }
    http_request.onreadystatechange = function() {
    postContents(param);
    }
    http_request.open('GET', url, false);
    http_request.send(null);
    
    }
    
    function postContents(param) {
    
    if (http_request.readyState == 4) {
    if (http_request.status == 200) {
    alert(param);
    document.getElementById('chart').innerHTML = http_request.responseText;
    } else {
    alert('There was a problem with the request;' + http_request.readyState + ';' + http_request.status);
    }
    }

    you can then use makeRequest("someurl", document.getElementById('someparam'));


  6. #6
    SitePoint Zealot moretea's Avatar
    Join Date
    Jun 2004
    Location
    Texas, USA
    Posts
    118
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    You da man! Many thanks!


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
  •