Update dropdown list with ajax

[klemme]

I have one select list, which is populated from the DB like this:

<select name="position" id="position" onChange='itemdisplay(this.value)'>
<option value="<?php echo $til_subject; ?>"><?php echo $current_subject; ?></option>
<?php 
while($row=mysqli_fetch_array($result)){
echo '<option value=' . $row['id'] . '>' . $row['linknavn'] . '</option>';	
}
echo "</select>";
?>
 
// Next to this list i have the other dropdown which depends on whatever is selected in the first one: Which I dont know how to update with ajax..I need to go around the database somehow, after the first list is set.
<select name="page_position" id="page_position">
    <option>- Choose a position -</option> // HELP NEEDED HERE...
    <option value=""></option> // HELP NEEDED HERE...
    </select>

I then want to, after the user have chosen a subject from the select list, populate another dropdown list with the positions available under the specific subject. This info is also taken from the Database.

I havent used AJAX ever before, so is probably wrong here and there.
This is my ajax file, which I include in the page:

// JavaScript Document
function MakeRequestObject(){
var xmlhttp=false;
try {
xmlhttp = new ActiveXObject('Msxml2.XMLHTTP');	
} catch (e) {
try {
xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
} catch (E) {
xmlhttp = false;
}
}
if(!xmlhttp && typeof XMLHttpRequest!='undefined'){
xmlhttp = new XMLHttpRequest();	
				}
return xmlhttp;
}
 
function itemdisplay(cat){
var xmlhttp=makeRequestObject();
	xmlhttp.open('GET', 'rediger.php?&page_position='+cat, true);
		xmlhttp.onreadystatechange=function(){
			if(xmlhttp.readyState==4 && xmlhttp.status==200){
				var content = xmlhttp.responseText;
					if ( content ) {
							document.getElementById('page_position').innerHTML = content	
				}
		}
	}
	xmlhttp.send(null)
}

I am not sure if i am writing the xmlhttp.open correctly?

And where do I make the database request, in the js file or in the file with the dropdowns?

Confusion is complete, so hope to from someone who finds this easy :-)

[twiss]

What you're doing isn't exactly the cleanest way to get an XMLHTTP object, but it should work, anyway.

The database connection and data collection should happen, now, in rediger.php (i.e., the file you specify at line 21). The preferable way to, then, get the data to javascript is in my opinion JSON. In PHP you can json_encode() your data, and if you decode it in javascript (with a library (but then again, you could do everything with a library), or eval()) you can access that data and do stuff with it. Hope this helps at least a bit :)

[klemme]

Well I made it work with 3 files:

Rediger.php

<?php
$SQL ="SELECT id, linknavn FROM subjects WHERE id = $til_subject";
$result1 = mysqli_query($connection, $SQL);
while($row = mysqli_fetch_array($result1)){
$current_subject_id = $row['id'];
$current_subject_name = $row['linknavn'];	
}
?>

<?php // Her tages position ud fra DB, til brug i drop down liste
$sqlCommand="SELECT id, linknavn, pos FROM subjects WHERE id > 1 ORDER BY pos ASC";
$result = mysqli_query($connection, $sqlCommand);
?>

<p class="form_labels"><b>Til Hovedemne:</b></p>
<select name="new_subjectid" onchange="showUser(this.value)">
<option value="<?php echo $current_subject_id ;?>"><?php echo $current_subject_name; ?></option>
// IMPORTANT DATA (the line above) I CANT ACCESS IN MY AJAX FILE, HOW DO I DO THAT...?

<?php 
while($row=mysqli_fetch_array($result)){
echo '<option value=' . $row['id'] . '>' . $row['linknavn'] . '</option>';	
}
echo "</select>";
?>

<?php 
//This is where the updated select box comes in after the function is activated
echo '<span id="pos"></span>';
?>

Ajax_file_js

// JavaScript Document
function MakeRequestObject(){
var xmlhttp=false;
try {
xmlhttp = new ActiveXObject('Msxml2.XMLHTTP');	
} catch (e) {
try {
xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
} catch (E) {
xmlhttp = false;
}
}
if(!xmlhttp && typeof XMLHttpRequest!='undefined'){
xmlhttp = new XMLHttpRequest();	
				}
return xmlhttp;
}
		
function showUser(cat){
var xmlhttp=MakeRequestObject();
xmlhttp.open('GET', 'ajax/selectbox.php?page_position='+cat, true);
xmlhttp.onreadystatechange=function(){
if(xmlhttp.readyState==4 && xmlhttp.status==200){
var content = xmlhttp.responseText;
				
if ( content ) {
document.getElementById('pos').innerHTML = content
			}
		}
	}
xmlhttp.send()
}

Selectbox.php

<?php
require("../../mysql/connection.php");
				
$sql = "SELECT * FROM pages WHERE subjectid =".$_GET['page_position'];
$result_from_first_select_list = mysqli_query($connection, $sql);

echo '<p class="form_labels"><b>Sidens position:</b></p>';
		
echo '<select name="page_position" id="page_position">';
		
echo "<option> - Vælg her - </option>";

$position_count = mysqli_num_rows($result_from_first_select_list);
for($count=1; $count<=$position_count+1; $count++){
echo '<option value= ' . $count . '>' . $count . '</option>';
}
echo "</select>";
?>

This way it is working.
BUT:
As you can see in the form, in rediger.php(The first file in this post), I have written a value JUST BEFORE the while loop.
That value is important..
Because it holds the value of the page position BEFORE it is being edited, and I need to check if the selection made in the select box, is different from that specific value.

IF, if is different:
Then in the selectbox.php:
I need to (as it is made now!) do $position_count++, because if the admin chooses to move the page to another subject, he needs to have the option to put the page as the last/top position, meaning one higher than the actual number of pages.

IF, that value is NOT different.
I only need to do $position_count(not ++), because that means that the page stays in the same subject, and therefor there is no reason for the admin to have the option to place the page in a position 1 higher than the actual number of pages.

BUT how do i get acces to the value of that variable in the select_box.php(Which is the file where i can run a check, but i cant get acces to that value(Or dont know how to, with ajax/javescript..))

This is the line in the form need to get acces to in the select_box.php:

<option value="<?php echo $current_subject_id ;?>"><?php echo $current_subject_name; ?></option>

When the onchange happens, i cant get acces to that variable.

How can this be made, so i can do the check explained above?

Hope this makes sense outside my head!

[twiss]

Hi, why then did you mark the thread solved?

Are rediger.php and "ajax_file_js" loaded in the same file (i.e., in what way is ajax_file_js supposed to get the information)?