3 step ajax/jquiry select chain

PHP
1

Hi All,

I hope this is the right subforum for my ‘issue’…

I get the script for a chained select box using PHP/MySql/AJAX/jQuiry ad have edited it to meet my needs. Everything is fine, but one thing. I believe I’ll have to edit some of the JavaScript code which I’m unable to figure out…

Here’s the javascript at the <head> :


	<script type="text/javascript">
	$(document).ready(function() {
		$('#wait_1').hide();
		$('#drop_1').change(function(){
		  $('#wait_1').show();
		  $('#result_1').hide();
		  $.get("ajax/select_chain_3.php", {
			func: "drop_1",
			drop_var: $('#drop_1').val()
		  }, function(response){
			$('#result_1').fadeOut();
			setTimeout("finishAjax('result_1', '"+escape(response)+"')", 400);
		  });
			return false;
		});
	});
	
	function finishAjax(id, response) {
	  $('#wait_1').hide();
	  $('#'+id).html(unescape(response));
	  $('#'+id).fadeIn();
	}
	function finishAjax_tier_three(id, response) {
	  $('#wait_2').hide();
	  $('#'+id).html(unescape(response));
	  $('#'+id).fadeIn();
	}
	</script>

here’s the form at the index.php :


<form action="" method="post">
	<select name="drop_1" id="drop_1">
	  <option value="" selected="selected" disabled="disabled">Select a Project</option>
	  <?php getTierOne(); ?>
	</select>
	<span id="wait_1" style="display: none;">
	<img alt="Please Wait" src="images/loading.gif"/>
	</span>
	<span id="result_1" style="display: none;"></span>
	<span id="wait_2" style="display: none;">
	<img alt="Please Wait" src="images/loading.gif"/>
	</span>
	<span id="result_2" style="display: none;"></span>
	<input type="submit" class="submit_button" value="START" name="submit" />
</form>

and here’s the ajax/select_chain_3.php :


<?
//**************************************
//     Page load dropdown results     //
//**************************************
function getTierOne()
{
	$result = mysql_query("SELECT * FROM project WHERE status = 1")
	or die(mysql_error());
	//$result = $database->projectLister("list_all_active", 0, 0, 0, 0, 0);

	  while($tier = mysql_fetch_array( $result ))

		{
		   echo '<option value="'.$tier['nr'].'">'.$tier['nr'].'</option>';
		}

}

//**************************************
//     First selection results     //
//**************************************
if($_GET['func'] == "drop_1" && isset($_GET['func'])) {
   drop_1($_GET['drop_var']);
}

function drop_1($drop_var)
{
    //include_once('../include/connect_to_db.php');
	//$result = mysql_query("SELECT * FROM project WHERE nr = '$drop_var'")
	//or die(mysql_error());
	//$result = $database->projectLister("this_project", $drop_var, 0, 0, 0, 0);
	
	echo '<br /><br />
			<select name="drop_2" id="drop_2">
				<option value="" selected="selected" disabled="disabled">Change what?</option>
				<option value="change_task">Change Task</option>
				<option value="remove_task">Remove Task</option>
				<option value="add_task">Add Task</option>
			</select><br />';
	
	echo "<script type=\\"text/javascript\\">
$('#wait_2').hide();
	$('#drop_2').change(function(){
	  $('#wait_2').show();
	  $('#result_2').hide();
      $.get(\\"ajax/select_chain_3.php\\", {
		func: \\"drop_2\\",
		drop_var: $('#drop_2').val()
      }, function(response){
        $('#result_2').fadeOut();
        setTimeout(\\"finishAjax_tier_three('result_2', '\\"+escape(response)+\\"')\\", 400);
      });
    	return false;
	});
</script>";
}


//**************************************
//     Second selection results     //
//**************************************
if($_GET['func'] == "drop_2" && isset($_GET['func'])) {
   drop_2($_GET['drop_var']);
}

function drop_2($drop_var)
{  	
    include_once('../include/connect_to_db.php');

	switch ($drop_var) {
		case "change_task":
		break;
		
		case "remove_task":
			$result = mysql_query("SELECT * FROM tasks WHERE project_id = '$project_id'") or die(mysql_error());
			?>
				<select name="drop_3" id="drop_3">
				<?
				while ($tasks_row = mysql_fetch_array($result)) {
					echo "<option value='".$tasks_row['id']."'>".$tasks_row['task_name']."</option>";
				}
				?>
				</select>
			<?
		break;
		
		case "add_task":
		break;
	} // end switch drop_var
}
?>

I’d like to pass the variable $project_id to the function drop_2 (Second selection results). This variable is passed to the function drop_1 as $drop_var
I don’t have the JS knowledge to do that, I’m even unsure if that’s possible at all. Any help/suggestion will be highly appreciated!!!

2

All of those parts seem to be in the PHP code - moving thread to the PHP forum.

3

If the function drop_2 needs access to a site-wide variable called $project_id then you declare it as a global var which that function can then access from outside its own namespace.

But I cannot see where you set $project_id so I suppose I could be well wrong, as maybe you are half way through this.