PDA

View Full Version : Resolved Ajax loaded element not recognized in ajax post send(element)?



crobinson42
04-08-2012, 10:48 PM
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


function testA(){
var test=document.getElementById("toUser").value;
alert(test);
}

^ This does not work.


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?

jscheuer1
04-09-2012, 04:13 AM
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.

crobinson42
04-10-2012, 02:15 PM
function testAjaxElement(){
var testElement=document.getElementById("ajaxLoadedElement").value;
alert("Ajax Loaded Element= "+testElement);
}

^This works


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....


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?!

jscheuer1
04-10-2012, 02:49 PM
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:


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):


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.

crobinson42
04-10-2012, 05:13 PM
encodeURIComponent() did not work either, the debug tool in firefox says element null -ajax still hangs up


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

jscheuer1
04-10-2012, 07:36 PM
The problem is that you're wiping out the form before you get the value from it:


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:


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.

crobinson42
04-10-2012, 07:48 PM
Man, thanks a ton! This was a real hair puller!!