Dynamic Valuelists with JQuery

Archived from the Xataface Users forum.

jb606 — Sat Jan 21, 2012 5:13 pm

I had some pretty good luck with the Wiki article http://xataface.com/wiki/Dynamic_select_boxes for my inventory management project. But after a while keeping track of all the JS and PHP code was beginning to be a pain. I’m sure this could be streamlined some more but I though I’d share if anyone is interested.

In this example when a user selects a manufacturer from the drop down the page will automatically narrow down the number available models based on which manufacturer was selected.

First, create a simple action to generate the options portion of a drop down select box.

Code: Select all

class actions_selectList {         function handle(&$parms) {                 // SELECT * FROM <TABLE> WHERE BLAH=BLAH                 $app =& Dataface_Application::getInstance();                 $auth =& Dataface_AuthenticationTool::getInstance();                 $request =& $app->getQuery();                 $table  =& $request['-table'];                 $where =& $request['-where'];                 $whereID =& $request['-whereid'];                 $val =& $request['-val'];                 $text =& $request['-text'];                 $records = df_get_records_array($table, array($where=>$whereID));                 if ( ! isset($request['-selected']) ) {                         echo '<option value="" selected="selected">Please Select ...</option>' . "\n";                 }                 foreach ( $records as $record ) {                         if ( isset($request['-selected']) ) {                                 echo '<option value="' . $record->val($val) . '" selected="selected">' . $record->val($text) . '</option>';                         }                         else {                                 echo '<option value="' . $record->val($val) . '">' . $record->val($text) . '</option>';                         }                         echo "\n";                 }         } }

Now in the class_<TABLE_NAME> add

Code: Select all

function block__after_new_record_form() {        echo<<<END <script language="javascript">        $('#ManufacturerID').change(function() {                 if ( $('#ManufacturerID').val() == ""  ) {                         $('#ModelID').html("");                 }                 else {                       $('#ModelID').html("<option >Loading Models</option>");                       $('#ModelID').load('/<My SITE DIR>/index.php?-action=selectList&-table=Models&-val=ModelID&-text=Model&-where=ManufacturerID&-whereid=' + $('#ManufacturerID').val());                 }        }); END; } </script>