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 Coder
    Join Date
    Apr 2006
    Location
    Planet Earth
    Posts
    59
    Thanks
    1
    Thanked 8 Times in 8 Posts

    AJAX POST does not update DIV tag

    Hello,

    Am trying to use AJAX to post a form, then update the DIV that the form is located in. But it does not update the DIV, it should display a message like "Thanks for posting" inside the DIV tag. It does post the data. Am not good at JavaScript so any help would be appreciated.

    This is the CODE:

    Code:
    var http_request = false;
    function makePOSTRequest(url, parameters, id) {
    	http_request = false;
        if (window.XMLHttpRequest) { // Mozilla, Safari,...
        	http_request = new XMLHttpRequest();
            if (http_request.overrideMimeType) {
            // set type accordingly to anticipated content type
            //http_request.overrideMimeType('text/xml');
                http_request.overrideMimeType('text/html');
            }
    	} else if (window.ActiveXObject) { // IE
         	try {
           		http_request = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
            	try {
                	http_request = new ActiveXObject("Microsoft.XMLHTTP");
                } catch (e) {}
            }
    	}
        if (!http_request) {
        	alert('Cannot create XMLHTTP instance');
            return false;
       	}
          
        http_request.onreadystatechange = alertContents(id);
        http_request.open('POST', url, true);
        http_request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        http_request.setRequestHeader("Content-length", parameters.length);
        http_request.setRequestHeader("Connection", "close");
        http_request.send(parameters);
    }
    
    function alertContents(id) {
    	if (http_request.readyState == 4) {
        	if (http_request.status == 200) {
            //alert(http_request.responseText);
            	result = http_request.responseText;
                document.getElementById(id).innerHTML = result;            
            } else {
                alert('There was a problem with the request.');
            }
    	}
    }
       
    function get(obj, id) {
    	var poststr = "artist=" + encodeURI( document.getElementById("artist").value ) +
                      "&title=" + encodeURI( document.getElementById("title").value ) +
                      "&time=" + encodeURI( document.getElementById("time").value ) +
                      "&ytid=" + encodeURI( document.getElementById("ytid").value ) +
                      "&thumb=" + encodeURI( document.getElementById("thumb").value );
        makePOSTRequest('post.php', poststr, id);
    }
    And this is the HTML Form:
    Code:
    <div id="video_1">
    	<form id="form_video_1" name="form_video_1" action="javascript:get(document.getElementById('form_video_1'), video_1);">
            Artist: <input id="artist" name="artist" type="text" size="20"><br>
        	Title: <input id="title" name="title" type="text" size="20"><br>
            <input id="time" name="time" type="hidden" value="123" />
            <input id="ytid" name="ytid" type="hidden" value="234124" />
            <input id="thumb" name="thumb" type="hidden" value="something" />
            <input name="submit" type="submit" value="Submit" onclick="javascript:get(this.parentNode);">
    	</form>
    </div>
    I get the following error (in FireFox with FireBug):

    Code:
    video_1 is not defined
    javascript:get(document.getElementById('form_video_1'), video_1);
    Line 1

  • #2
    Senior Coder A1ien51's Avatar
    Join Date
    Jun 2002
    Location
    Between DC and Baltimore In a Cave
    Posts
    2,717
    Thanks
    1
    Thanked 94 Times in 88 Posts
    When you are doing this

    http_request.onreadystatechange = alertContents(id);

    you are telling alertContents to execute right than and there and store the result into onreadystatechange. What you need to do is store the function reference into it.

    so you need to use a closure:

    http_request.onreadystatechange = function(){alertContents(id);}

    but since you are using a global variable for the xhr request, you can just use a global variable for the id.

    Eric
    Tech Author [Ajax In Action, JavaScript: Visual Blueprint]

  • Users who have thanked A1ien51 for this post:

    zactanaz (04-22-2008)

  • #3
    New Coder
    Join Date
    Apr 2006
    Location
    Planet Earth
    Posts
    59
    Thanks
    1
    Thanked 8 Times in 8 Posts
    That was it, thank you.


  •  

    Posting Permissions

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