Menu
Im unsure why ive been reading lots and watching videos on youtube but still cannot figure out why I cant get this jquery script to work. I was people to be able to select a list of Programs (law psychology sociology ect ect..) and then read the database for the courses under that program (eg. 1001 LAWS – Intro To Law) and update the second select field with those options below is the code I have,:
ajax.php:
[code]<?php
include(“include/session.php”);
if (@$_REQUEST[‘ajax’]) {
// connect to local database ‘test’ on localhost
$results = mysql_query(‘select * from courses where pid=”‘ . $_REQUEST[‘category’]. ‘”‘);
$json = array();
while (is_resource($results) && $row = mysql_fetch_object($results)) {
//$json[] = ‘{“id” : “‘ . $row->id . ‘”, “label” : “‘ . $row->label . ‘”}’;
$json[] = ‘”‘ . $row->label . ‘”‘;
}
echo ‘[‘ . implode(‘,’, $json) . ‘]’;
die(); // filthy exit, but does fine for our example.
}
?>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html lang=”en”>
<head>
<meta http-equiv=”Content-type” content=”text/html; charset=utf-8″ />
<title>Select Chain</title>
<script src=”/js/jquery.js” type=”text/javascript”></script>
<script src=”/js/select-chain.js” type=”text/javascript” charset=”utf-8″></script>
<script type=”text/javascript”>
<!–
$(function () {
var cat = $(‘#categorySelect’);
var el = $(‘#elementSelect’);
var attr = $(‘#attributeSelect’);
el.selectChain({
target: attr,
url: ‘ajax.php’,
data: { ajax: true, anotherval: “anotherAction” }
});
// note that we’re assigning in reverse order
// to allow the chaining change trigger to work
cat.selectChain({
target: el,
url: ‘ajax.php’,
data: { ajax: true }
}).trigger(‘change’);
});
//–>
</script>
</head>
<div id=”doc”>
<h1>Select Chain</h1>
<div class=”selHolder”>
<h2>Element Category</h2>
<select id=”categorySelect” name=”category”>
<?php
$query = “SELECT * FROM catagories ORDER BY name ASC”;
$res = mysql_query ( $query ) or die ( mysql_error () );
while ( $row = mysql_fetch_array ( $res ) ) {
?>
<option value=”<?=$row [‘id’]?>”><?=$row [‘name’]?></option>
<?
}
?>
</select>
</div>
<div class=”selHolder”>
<h2>Element</h2>
<select id=”elementSelect” name=”category” >
<option>[none selected]</option>
</select>
</div>
</body>
</html>
select-chain.js:
[code](function ($) {
$.fn.selectChain = function (options) {
var defaults = {
key: “id”,
value: “label”
};
var settings = $.extend({}, defaults, options);
if (!(settings.target instanceof $)) settings.target = $(settings.target);
return this.each(function () {
var $$ = $(this);
$$.change(function () {
var data = null;
if (typeof settings.data == ‘string’) {
data = settings.data + ‘&’ + this.name + ‘=’ + $$.val();
} else if (typeof settings.data == ‘object’) {
data = settings.data;
data[this.name] = $$.val();
}
settings.target.empty();
$.ajax({
url: settings.url,
data: data,
type: (settings.type || ‘get’),
dataType: ‘json’,
success: function (j) {
var options = [], i = 0, o = null;
for (i = 0; i < j.length; i++) {
// required to get around IE bug (http://support.microsoft.com/?scid=kb%3Ben-us%3B276228)
o = document.createElement(“OPTION”);
o.value = typeof j[i] == ‘object’ ? j[i][settings.key] : j[i];
o.text = typeof j[i] == ‘object’ ? j[i][settings.value] : j[i];
settings.target.get(0).options[i] = o;
}
// hand control back to browser for a moment
setTimeout(function () {
settings.target
.find(‘option:first’)
.attr(‘selected’, ‘selected’)
.parent(‘select’)
.trigger(‘change’);
}, 0);
},
error: function (xhr, desc, er) {
// add whatever debug you want here.
alert(“an error occurred”);
}
});
});
});
};
})(jQuery);