Javascript Disabled Detected

You currently have javascript disabled. Several functions may not work. Please re-enable javascript to access full functionality.

Populating a List Box (or drop down box) by ajax (php/mysql)

Started by awan , Oct 23 2008 02:03 AM

Please log in to reply

2 replies to this topic

#1 awan

Young Padawan

Members
2 posts

Posted 23 October 2008 - 02:03 AM

hi all,

here is the scenario
i have populated a list using ajax code. it has been populated successfully

BUT

i am unable to make this list select Multiple Values.

i.e. multiple='multiple' is not working.

here is the test code.
This is handler

<?php
require_once('./dbconn/conn.php');
$q = $_GET["q"];
$seed=$_GET['inputtxt'];
$query="";

if ($q == 1) $query="select bsFriendlyName, bsID from tabbasett where bsFriendlyname like '%" . $seed . "%'" ;
elseif ($q == 2) $query="select alarmType, id_f, idalarm from tabalarms where id_f = " . $seed ;

$recordSet = mysql_query($query) or mysql_error();
$number_of_rows = mysql_num_rows($recordSet);

if ($number_of_rows < 1)
{
echo "<div>no record found. <a href='report1.php?new=true&alarmID=false&id=" . $seed . "' onclick='document.form1.submit();'>New Alarm</a></div>";
//<br>q=". $q . "<br>inputtxt " . $seed . "<br>query = " . $query . "<br>no. of rows" . $number_of_rows;

unset($recordSet); unset($query); unset($number_of_rows);
return false;
}

if ($q == 1)
{
echo "<select name='bsSelectedList' size=\"10\" class='style1' onChange='return ListBoxSearchClicked(this);'>";
while($row=mysql_fetch_array($recordSet)){
echo "<option value=\"" . $row[bsFriendlyName] . "\" id=\"" . $row[bsID] . "\">" . $row[bsFriendlyName] . "</option>";
}
}
elseif ($q == 2)
{
echo "<select id='selectAlarms' name='selectAlarms' class='style1' onChange='return ComboBoxSearchClicked(this);'>";
echo "<option value='New Alarm' id='New Alarm' selected='selected'>New Alarm</option>";
while($row=mysql_fetch_array($recordSet)){
echo "<option value='" . $row[idalarm] . "' id=" . $row[idalarm] . ">" . $row[alarmType] . "</option>";
}
}

if ($q == 3)
{
echo "<select name='bsSelectedList' size=\"10\" class='style1' onChange='ListBoxSearchClicked(this);' multiple='multiple'>";
while($row=mysql_fetch_array($recordSet)){
echo "<option value=\"" . $row[bsFriendlyName] . "\" id=\"" . $row[bsID] . "\">" . $row[bsFriendlyName] . "</option>";
}
}

unset($recordSet); unset($query); unset($number_of_rows); unset($row);

echo "</select>";
?>

ajax function

function AjaxFunction(q, url, input_field, output_field){
httpxml=null;

try {// Firefox, Opera 8.0+, Safari
httpxml=new XMLHttpRequest();
}
catch (e){ // Internet Explorer
try {
httpxml=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e){
try {
httpxml=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e){
alert("Your browser does not support AJAX!");
return false;
}
}
} //alert ("q =" + q + "\n url = " + url + "\ninput field = " + input_field + "\noutput field = " + output_field);
httpxml.onreadystatechange=function(){
if (httpxml.readyState==4){
switch (q)
{
case 1 :
document.getElementById("captionSearchResults").innerHTML="Search Results for <b><u class='style2'>'" + input_field.value + "'</u></b>";
document.getElementById("searchResultsCell").innerHTML=httpxml.responseText;
break;
case 2: document.getElementById("selectAlarmsCell").innerHTML=httpxml.responseText;
break;

case 3 :
document.getElementById("captionSearchResults").innerHTML="Search Results for <b><u class='style2'>'" + input_field.value + "'</u></b>";
document.getElementById("searchResultsCell").innerHTML=httpxml.responseText;
break;
}
}
};
httpxml.open("GET",url,true);
httpxml.send(null);
}

Back to top

#2 dotbart

Young Padawan

Members
141 posts

Gender:Male
Location:Diepenbeek
Interests:Webdesign, Webdeveloppement, DJ, ...

Posted 24 October 2008 - 07:06 AM

Hey!
Didn't have the time to read your code (it's quite long;-))

I did write a small testexample you might be able to use, check it out:

<html>
<head>
<script type='text/javascript'>
var count = 1;
function addMore(){
	var el = document.getElementById('dynsel');
	
	txtData = document.createTextNode(count);
	
	nOption = document.createElement('option'); 
	nOption.setAttribute('value',count);
	nOption.appendChild(txtData);
	el.appendChild(nOption);
	count++;
}
</script>
</head>
<body>
<button onClick='addMore();'>Add</button>
<select id='dynsel' name='dynsel'>
<option value='0'>0</option>
</select>
</body>
</html>

Basically, you select your selectbox by ID, append a child to it called 'option'.
That option has a parameter called value, where you obiously store the value. And a child of the type: TextNode.
A dynamiv function would look kind of like this: (you could let AJAX call this)

function addOptionToSelectbox(selectboxID,value,text)
{
	var el = document.getElementById(selectboxID);
	txtData = document.createTextNode(text);
	nOption = document.createElement('option'); 
	nOption.setAttribute('value',value);
	nOption.appendChild(txtData);
	el.appendChild(nOption);
}

Hope it helps, and good luck

Back to top

#3 awan

Young Padawan

Members
2 posts

Posted 24 October 2008 - 09:13 PM

Thanks man.... :biggrin:

Hey!
Didn't have the time to read your code (it's quite long;-))

I did write a small testexample you might be able to use, check it out:
<html>
 <head>
 <script type='text/javascript'>
 var count = 1;
 function addMore(){
	 var el = document.getElementById('dynsel');
	 
	 txtData = document.createTextNode(count);
	 
	 nOption = document.createElement('option'); 
	 nOption.setAttribute('value',count);
	 nOption.appendChild(txtData);
	 el.appendChild(nOption);
	 count++;
 }
 </script>
 </head>
 <body>
 <button onClick='addMore();'>Add</button>
 <select id='dynsel' name='dynsel'>
 <option value='0'>0</option>
 </select>
 </body>
 </html>
Basically, you select your selectbox by ID, append a child to it called 'option'.
That option has a parameter called value, where you obiously store the value. And a child of the type: TextNode.
A dynamiv function would look kind of like this: (you could let AJAX call this)
function addOptionToSelectbox(selectboxID,value,text)
 {
	 var el = document.getElementById(selectboxID);
	 txtData = document.createTextNode(text);
	 nOption = document.createElement('option'); 
	 nOption.setAttribute('value',value);
	 nOption.appendChild(txtData);
	 el.appendChild(nOption);
 }
Hope it helps, and good luck

Back to top

Back to Programming and General Web Design

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users