AJAX select question inline html

askian · 12-16-2010, 07:29 PM

Hi,
I have what is probably a stupid issue. I have a select box that is being filled by an an ajax request to a SQL DB and returns the results in a select box. That part works fine.

The second part of the request is that i also want my inline html to change results if i change my selection.

that part is not working. I tried to put my onchange event into the option in php, but that doesn't return anything either.
$display_string .= "<option onchange=\"getSoftwareUpdate();\"> $row[Software] </option>";

clear as mud?

Any help would be much appreciated!

//this section gets the results from the php script and returns back the values in the db.

<script language="javascript" type="text/javascript">
<!--
//Browser Support Code
function getSoftwareFunction()
{
var ajaxRequest; // The variable that makes Ajax possible!
try{
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
} catch (e){
// Internet Explorer Browsers
try{
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){
// Something went wrong
alert("Please contact Trinity Help Desk at ext. 88817");
return false;
}
}
}
// Create a function that will receive data sent from the server
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
var ajaxDisplay = document.getElementById('ajaxDiv');
ajaxDisplay.innerHTML = ajaxRequest.responseText;
}
}

var SoftwareName = document.getElementById('results').value;
var ManufacturerName = document.getElementById('results').value;
var VersionName = document.getElementById('results').value;
var InstallLocationName = document.getElementById('results').value;
var queryString = "?Software=" + SoftwareName + "&Manufacturer=" + ManufacturerName + "&Version=" + VersionName; + "&InstallLocation=" + InstallLocationName
ajaxRequest.open("POST", "getSoftwareName.php" + queryString, true);
ajaxRequest.send(null);
}

</script>

//this next part i want to return the results based on an onchange event in the select option

<script language="javascript" type="text/javascript">
<!--
//Browser Support Code
function getSoftwareUpdate()
{
var ajaxRequest1; // added
try{
// Opera 8.0+, Firefox, Safari
ajaxRequest1 = new XMLHttpRequest();
} catch (e){
// Internet Explorer Browsers
try{
ajaxRequest1 = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try{
ajaxRequest1 = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){
// Something went wrong
alert("Please contact Trinity Help Desk at ext. 88817");
return false;
}
}
}

//added
// Create a function that will receive data sent from the server
ajaxRequest1.onreadystatechange = function(){
if(ajaxRequest1.readyState == 4){
var ajaxDisplay1 = document.getElementById('ajaxDiv1');
ajaxDisplay1.innerHTML = ajaxRequest1.responseText;
}
}
//end add

var Software = document.getElementById('results').value;
var SoftwareName = document.getElementById('results').value;
ajaxRequest1.open("POST", "getSoftwareName1.php" + SoftwareName, true);
ajaxRequest1.send(null);

}
</script>
<html>
<div id='ajaxDiv1'></div>
<div id='ajaxDiv'>
<select id='results' onchange="getSoftwareUpdate();" name="Software"> </select>
</div>
</html>

</td>

askian · 12-16-2010, 08:27 PM

Maybe a more condensed way to look at this would be to say I have a dynamically loading select option using AJAX and php. Based on what the user selects, I would like to have ajax use the inline html to return results. i have tried to put in a basic function to see if i am even getting the value, but I am not.

<script language="javascript" type="text/javascript">
<!--
//Browser Support Code
function getSoftwareFunction()
{
var ajaxRequest; // The variable that makes Ajax possible!
try{
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
} catch (e){
// Internet Explorer Browsers
try{
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){
// Something went wrong
alert("Please contact Trinity Help Desk at ext. 88817");
return false;
}
}
}
// Create a function that will receive data sent from the server
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
var ajaxDisplay = document.getElementById('ajaxDiv');
ajaxDisplay.innerHTML = ajaxRequest.responseText;
}
}

var SoftwareName = document.getElementById('results').value;
var ManufacturerName = document.getElementById('results').value;
var VersionName = document.getElementById('results').value;
var InstallLocationName = document.getElementById('results').value;
var queryString = "?Software=" + SoftwareName + "&Manufacturer=" + ManufacturerName + "&Version=" + VersionName; + "&InstallLocation=" + InstallLocationName
ajaxRequest.open("POST", "getSoftwareName.php" + queryString, true);
ajaxRequest.send(null);
}

</script>
<script type="text/javascript">
function getSelectedValue(){
var index = document.getElementById('results').selectedIndex;
alert("value="+document.getElementById('results').value);
alert("text="+document.getElementById('results').options[index].text);
}
</script>
<body onload='getSoftwareFunction()'>
<html>
<div id='ajaxDiv'>
<select id='results' onchange="getSelectedValue();" name="Software"> </select>
</div>

Old Pedant · 12-16-2010, 08:55 PM

Why are you specifying that you are doing a POST when clearly you are doing send(null) and putting all the information in the querystring????

Try changing from POST to GET, since that's what you are doing.

But of course if your PHP code is *expecting* POST, then you can't do what you are doing, at all.

Old Pedant · 12-16-2010, 08:59 PM

I should note, too, that if any of your form field values contain spaces or various other special characters, they *MUST* be encoded, whether used in the querystring or in post data. So I'd do:

Code:

var SoftwareName = encodeURIComponent( document.getElementById('results').value );
var ManufacturerName = encodeURIComponent( document.getElementById('results').value );
var VersionName = encodeURIComponent( document.getElementById('results').value );
var InstallLocationName = encodeURIComponent( document.getElementById('results').value );
var queryString = "?Software=" + SoftwareName + "&Manufacturer=" + ManufacturerName + "&Version=" + VersionName; + "&InstallLocation=" + InstallLocationName

But now that I see that, it makes no sense: WHY are you passing the *SAME VALUE* for all those querystring fields???

All four values are just the value of the form field named "results"!!!

Logic Ali · 12-16-2010, 10:27 PM

If I have construed this properly it amounts to a two-stage dynamic listbox, the second being downloaded as an entire block of HTML rather than just downloading the option data.
This is a pretty clunky way of doing things but I suppose it could work. <Option>s don't have an onchange event, so the onchange handler for the downloaded listbox has to be written into the <select> tag in the same way as the first.

askian · 12-17-2010, 03:29 PM

Ok, I was able to figure out that it was not returning the value because i messed something up in php.

however, now i'm stuck with a new question.
how do i make my ajax function work in php?

echo "
<script type=\"text/javascript\">
function getSoftwareUpdate()
{
var ajaxRequest1;
try{
ajaxRequest1 = new XMLHttpRequest();
} catch (e){
try{
ajaxRequest1 = new ActiveXObject(\"Msxml2.XMLHTTP\");
} catch (e) {
try{
ajaxRequest1 = new ActiveXObject(\"Microsoft.XMLHTTP\");
} catch (e){
alert(\"Please contact Trinity Help Desk at ext. 88817\");
return false;
}
}
}

ajaxRequest1.onreadystatechange = function(){
if(ajaxRequest1.readyState == 4){
var ajaxDisplay1 = document.getElementById('ajaxDiv1');
ajaxDisplay1.innerHTML = ajaxRequest1.responseText;
}
}

var Software = document.getElementById('results').value;
var SoftwareName = document.getElementById('results').value;
ajaxRequest1.open(\"POST\", \"getSoftwareName1.php\" + SoftwareName, true);
ajaxRequest1.send(null);

}
</script>
";