Results 1 to 7 of 7

Thread: Ajax loaded element not recognized in ajax post send(element)?

  1. #1
    Join Date
    May 2010
    Location
    Sacramento, CA
    Posts
    91
    Thanks
    23
    Thanked 2 Times in 2 Posts

    Default Ajax loaded element not recognized in ajax post send(element)?

    I have a div that is loaded via ajax. In the div is a select box. I am having trouble getting the value from the select box

    Code:
    function testA(){
      	var test=document.getElementById("toUser").value;
    	alert(test);
    }
    ^ This does not work.

    Code:
    function testA(){
      	var test=document.getElementById("toUser");
    	alert(test);
    }
    ^ This returns null.... any idea?

    Ultimately i'm trying to pass the variable 'test' via ajax post request (ie: xmlhttp.send(test) but when i specify .value on the var it jams the ajax request up?
    Last edited by crobinson42; 04-10-2012 at 07:49 PM. Reason: update to problem

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Those tests most likely mean that, at the time they're executed there either is no element with that id, or that there are more than one element with that id.

    Some browsers will see a form element with a name as the same thing as one with an id, but others will not.

    If you're importing the form via AJAX, it might be written in non-standard HTML that the browser cannot see as containing an element with that id.

    Another possibility is that, if those aren't the exact functions, and they're created on the fly, that at the time they're created there's no element by that id or more than one.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    May 2010
    Location
    Sacramento, CA
    Posts
    91
    Thanks
    23
    Thanked 2 Times in 2 Posts

    Default

    Code:
    function testAjaxElement(){
      	var testElement=document.getElementById("ajaxLoadedElement").value;
    	alert("Ajax Loaded Element= "+testElement);
    }
    ^This works

    PHP Code:
    xmlhttp.open("POST","new_msg_save.php",true);
    xmlhttp.setRequestHeader('Content-Type''application/x-www-form-urlencoded; charset=UTF-8');
    xmlhttp.send("test="+document.getElementById("sbj").value); 
    ^This does not....

    PHP Code:
    xmlhttp.open("POST","new_msg_save.php",true);
    xmlhttp.setRequestHeader('Content-Type''application/x-www-form-urlencoded; charset=UTF-8');
    xmlhttp.send("test=test value"); 
    ^This works

    I'm so confused about this because the page is recognizing the element on the alert() and when you hard code a value in the send() but hangs up the ajax request when you use document.getElementById().value?!

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Assuming that there is such an element with that id and that it has a value property, it may be that the value is one that cannot be processed that way. Try:

    Code:
    xmlhttp.open("POST","new_msg_save.php",true);
    xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
    var data = encodeURIComponent(document.getElementById("sbj").value);
    xmlhttp.send("test=" + data);
    Or (harder for humans to read, but avoids using a variable name which might already be in use for something else):

    Code:
    xmlhttp.open("POST","new_msg_save.php",true);
    xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
    xmlhttp.send("test=" + encodeURIComponent(document.getElementById("sbj").value));
    If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. The Following User Says Thank You to jscheuer1 For This Useful Post:

    crobinson42 (04-10-2012)

  6. #5
    Join Date
    May 2010
    Location
    Sacramento, CA
    Posts
    91
    Thanks
    23
    Thanked 2 Times in 2 Posts

    Default

    encodeURIComponent() did not work either, the debug tool in firefox says element null -ajax still hangs up


    http://redshielddefense.com/test/9apr12/test.php

  7. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    The problem is that you're wiping out the form before you get the value from it:

    Code:
    function ajaxSaveMsg(divTag)
    {
    if (window.XMLHttpRequest)
      {// code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp=new XMLHttpRequest();
      }
    else
      {// code for IE6, IE5
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
      	//loading animation
    	document.getElementById([divTag]).innerHTML="loading...";
    
    	
    xmlhttp.onreadystatechange=function()
      {
      if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
        document.getElementById([divTag]).innerHTML=xmlhttp.responseText;
    	parent.calcHeight();
        }
    
      }	
    	
    xmlhttp.open("POST","new_msg_save.php",true);
    xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
    xmlhttp.send("sbj=" + encodeURIComponent(document.getElementById("sbj").value));
    
    }.
    You can probably do like so:

    Code:
    function ajaxSaveMsg(divTag)
    {
    if (window.XMLHttpRequest)
      {// code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp=new XMLHttpRequest();
      }
    else
      {// code for IE6, IE5
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
    
    	var data = document.getElementById("sbj").value;
    
      	//loading animation
    	document.getElementById([divTag]).innerHTML="loading...";
    
    	
    xmlhttp.onreadystatechange=function()
      {
      if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
        document.getElementById([divTag]).innerHTML=xmlhttp.responseText;
    	parent.calcHeight();
        }
    
      }	
    	
    xmlhttp.open("POST","new_msg_save.php",true);
    xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
    xmlhttp.send("sbj=" + data);
    
    }
    Incidentally, parent.calcHeight(); is not a function and is causing an error. So either remove it from this and the GET function (the one named ajaxRequest) or create/define it. Since it comes after everything else is done, it doesn't appear to cause any real problems. But it might at some point.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  8. The Following User Says Thank You to jscheuer1 For This Useful Post:

    crobinson42 (04-10-2012)

  9. #7
    Join Date
    May 2010
    Location
    Sacramento, CA
    Posts
    91
    Thanks
    23
    Thanked 2 Times in 2 Posts

    Default

    Man, thanks a ton! This was a real hair puller!!

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
  •