Dynamic Valuelists with JQuery

A place for users and developers of the Xataface to discuss and receive support.

Dynamic Valuelists with JQuery

Postby 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>
jb606
 
Posts: 6
Joined: Sun Oct 09, 2011 1:36 pm

Return to Xataface Users

Who is online

Users browsing this forum: No registered users and 22 guests

cron
Powered by Dataface
© 2005-2007 Steve Hannah All rights reserved