Problems with Javascript in Safari

Discussion in 'JavaScript' started by Mike64, May 4, 2007.

0
  1. #1
    Hi there, I was wondering if anyone could help me with a JavaScript problem in Safari.

    I have created a dynamic drop down menu system in which the menus are populated with data from a MySQL database handled with PHP. The user selects a value in the first menu and the subsequent menu is updated dynamically using the xAjax framework.

    http://www.naturalhome-products.com/ajax/index.php

    The system works just fine in Firefox and Internet Explorer, but for some reason in Safari the sub-menu does not update when the user makes a selection in the first menu.

    The Firefox error console is clean as is the Safari JavaScript console... so what could be going wrong?

    Here is the code I am using:



    <?

class myXajaxResponse extends xajaxResponse  {
	function addCreateOptions($sSelectId, $options) {
  		$this->addScript("document.getElementById('".$sSelectId."').length=1");
			if (sizeof($options) >0) {
       			foreach ($options as $option) {
         		$this->addScript("addOption('".$sSelectId."','".$option."','".$option."');");
       		}
       	}
	}
}


// BED SIZE ---------------------------------------------

// Get bed sizes
$size =& $db->getAll("SELECT DISTINCT `size` FROM `wizard` ORDER BY SIZE ASC");

// Check that result is not an error
if (PEAR::isError($size)) {
	die($size->getUserInfo());
}

// FIRMNESS ---------------------------------------------

// Create firmness array
$firmness = array();

// Loop each size and populate with available firmnesses 
foreach ( $size as $s ) {
	
	$sizes[] = $s['size'];
	
	// get available firmness
	$firm_res =& $db->getAll("SELECT DISTINCT `firmness` FROM `wizard` WHERE `size` =  ". $db->quoteSmart($s['size']) ." ORDER BY `firmness` DESC ");
	
	// Check that result is not an error
	if (PEAR::isError($firm_res)) {
		die($firm_res->getUserInfo());
	}
		
	$firmness[$s['size']] = array();
	
	//insert each mattress firmness into the size array
	foreach ( $firm_res as $f ) {
		$firmness[$s['size']][] = $f['firmness'];
	}
}


$xajax = new xajax();
//$xajax->debugOn();
 
// adds an option to the select 
function addSize($selectId, $size) {
  global $size;
  $objResponse = new myXajaxResponse();
  $data = $size[$size];
  $objResponse->addCreateOptions($selectId, $data);
  return $objResponse->getXML();
}
function addFirmness($selectId, $size) {
  global $firmness;
  $objResponse = new myXajaxResponse();
  $data = $firmness[$size];
  $objResponse->addCreateOptions($selectId, $data);
  return $objResponse->getXML();
}
$xajax->registerFunction("addSize");
$xajax->registerFunction("addFirmness");
$xajax->processRequests();

$wool_sql = NULL;
$ahf_sql = NULL;

if (isset($_POST['Submit'])) {
	
	$size = $_POST['size'];
	$firmness = $_POST['firmness'];
	
	// get items according to menu selection
	$wool_sql =& $db->getAll("SELECT * FROM `wizard` WHERE `size` =  ". $db->quoteSmart($size) ." AND `FIRMNESS` =  ". $db->quoteSmart($firmness) ." AND HAIR = 'wool' ");
	
	if (PEAR::isError($wool_sql)) {
		die($wool_sql->getUserInfo());
	}	


	// get items according to menu selection
	$ahf_sql =& $db->getAll("SELECT * FROM `wizard` WHERE `size` =  ". $db->quoteSmart($size) ." AND `FIRMNESS` =  ". $db->quoteSmart($firmness) ." AND HAIR = 'anti-allergy' ");
	
	if (PEAR::isError($ahf_sql)) {
		die($ahf_sql->getUserInfo());
	}	
}


<html>
<head>
<title>Natural Home Products - homeware from organic and natural materials to buy online</title>

<?
$xajax->printJavascript();
?>
<script type="text/javascript">
	function addOption(selectId, val, txt) {
		var objOption = new Option(txt, val);
	 	document.getElementById(selectId).options.add(objOption);
	}
</script>
</head>

<body>

<form name="form1" method="POST" action="<?=$_SERVER['PHP_SELF']?>">
	
	<dl>
		<dt><label for="size">Mattress Size:</label></dt>
		<dd>
			<select name="size" id="size" onchange="xajax_addFirmness('firmness', document.form1.size.value)">
				<option value="">--select--</option>
					<? foreach ($sizes as $mod) { ?>
				<option value="<?= $mod?>"><?= $mod?></option>
					<? } ?>
			</select>
		</dd>
		
		<dt><label for="firmness">Firmness:</label></dt>
		<dd>
			<select name="firmness" id="firmness" onchange="xajax_addAntiallergy('antiallergy', document.form1.firmness.value)">
				<option value="">--select--</option>
			</select>
		</dd>
		<dd><input type="submit" value="Submit" name="Submit" id="Submit"></dd>

	</dl>

</form>
    Code (markup):
    Any help is greatly appreciated.
    Thanks!
     
    Mike64, May 4, 2007 IP