Page 1 of 1

Cascading Select for existing record not working

PostPosted: Sun Oct 04, 2009 3:20 am
by dbaron2
Hello,

I am using cascading select logic I found elsewhere in the forum (see below) and it works great for new records, but not for existing records. When I pull up an existing record the select box for regions and localities shows ALL regions and ALL localities. Is there a way to trigger the onclick code automatically as part of the page load process? In the meantime I added onfocus event code (below), but it causes the blanking of the previously selected values:

<?
class tables_localities {
function block__after_new_record_form(){
echo <<<END
<script><var>getQuery();
$table =& Dataface_Table::loadTable($query['-table']);
$regions = $table->getValuelist('Region');
$region_countries = $table->getValuelist('Region__meta');
$localities = $table->getValuelist('Locality');
$locality_regions = $table->getValuelist('Locality__meta');
import('Services/JSON.php');
$json =& new Services_JSON();
echo '
var regions_options = '.$json->encode($regions).';
var regions_country = '.$json->encode($region_countries).';
var localities_options = '.$json->encode($localities).';
var localities_region = '.$json->encode($locality_regions).';
';
echo <<<END></script>
END;
}
function block__after_edit_record_form(){
return $this->block__after_new_record_form();
}
}
?>

PostPosted: Mon Oct 05, 2009 1:54 am
by Jean
I used this code that worked for linked select boxes :
Code: Select all
function block__after_new_record_form(){
//javascript pour lier deux select menus
echo <<<END
<script><!--
var service_field = document.getElementById('service');
var entite_field = document.getElementById('entite');
END;
// Let's get all the cities available.
$app =& Dataface_Application::getInstance();
$query =& $app->getQuery();
$table =& Dataface_Table::loadTable($query['-table']);
$services = $table->getValuelist('services');
$services_entites = $table->getValuelist('services__meta');
// Note that the cities__meta valuelist is automatically created
// because we had three columns in the cities valuelist.
// The first and third columns effectively create a 2nd valuelist
// named 'cities__meta'

// $cities is an array with keys city_id and values city_name
// $city_provinces is an array with keys city_id and values province_id

import('Services/JSON.php');
$json =& new Services_JSON(); // A JSON encoder to allow us to easily
// convert PHP arrays to javascript arrays.
echo '
var services_options = '.$json->encode($services).';
var services_entites = '.$json->encode($services_entites).';
';

echo <<<END></script>
END;
}

PostPosted: Mon Oct 05, 2009 2:11 am
by Jean
Hello,
You need a END marker after <var>
Jean

PostPosted: Mon Oct 05, 2009 3:15 am
by dbaron2
Whoops! My original message got mangled because I failed to disable HTML for the message.

Here is the actual code:

Code: Select all
<?
/**
* A delegate class for the entire application to handle custom handling of
* some functions such as permissions and preferences.
*/
class tables_localities {
    function block__after_new_record_form(){
echo <<<END
        <script language="javascript"><!--
        var country_field = document.getElementById('country_id');
        var region_field = document.getElementById('region_id');
        var locality_field = document.getElementById('locality_id');
END;
        $app =& Dataface_Application::getInstance();
        $query =& $app->getQuery();
        $table =& Dataface_Table::loadTable($query['-table']);
        $regions = $table->getValuelist('Region');
        $region_countries = $table->getValuelist('Region__meta');
        $localities = $table->getValuelist('Locality');
        $locality_regions = $table->getValuelist('Locality__meta');
        import('Services/JSON.php');
        $json =& new Services_JSON();
        echo '
        var regions_options = '.$json->encode($regions).';
        var regions_country = '.$json->encode($region_countries).';
        var localities_options = '.$json->encode($localities).';
        var localities_region = '.$json->encode($locality_regions).';
        ';
echo <<<END
        country_field.onchange = function(){
            var selected_country = country_field.options[country_field.selectedIndex].value;
            region_field.options.length = 0;
            var index = 0;
            region_field.options[index++] = new Option("Please Select ...", "");
            for (region_id in regions_options){
                if (selected_country == regions_country[region_id]){
                    region_field.options[index++] = new Option(regions_options[region_id], region_id);
                }
            }
        };
        region_field.onchange = function(){
            var selected_region = region_field.options[region_field.selectedIndex].value;
            locality_field.options.length = 0;
            var index = 0;
            locality_field.options[index++] = new Option("Please Select ...", "");
            for (locality_id in localities_options){
                if (selected_region == localities_region[locality_id]){
                    locality_field.options[index++] = new Option(localities_options[locality_id], locality_id);
                }
            }
        };
        region_field.onfocus = function(){
            country_field.onchange();
        }
        locality_field.onfocus = function(){
            region_field.onchange();
        }
        //--></script>
END;
    }
    function block__after_edit_record_form(){
        return $this->block__after_new_record_form();
    }
}
?>

PostPosted: Wed Oct 07, 2009 11:11 am
by shannah
1.
s. Is there a way to trigger the onclick code automatically as part of the page load process?


Yes. You can use jQuery for this (which is bundled with Xataface in js/jquery.packed.js).

e.g.
Code: Select all
jQuery(document).ready(function($){
      // Whatever you put in here happens after the document loads
});




2.
? In the meantime I added onfocus event code (below), but it causes the blanking of the previously selected values


You have to make sure that you retain the selected values when you refill the list. I.e. before setting the <select>.options.length=0, you need to figure out which ones are selected, and then set them as selected again after you refill the menu.