Akelos Framework v1 forum archive. This forum is no longer maintained. To report bugs please visit https://github.com/akelos/akelos/issues
    • CommentAuthorasejua

    Hello :)

    After reading this discussion and discovering the wonders of the prototype_helper functions :) I've been lately investigating the ajax implementation that comes with Akelos, trying to do a form with some auto-filled select boxes.

    The idea it's pretty simple. Each box belongs to a model and, as you select something in the first select box, his children one is filled with the items that belongs to it's parent's id.

    I've tried with this code, but the selected id is not being passed in the ajax call. I've read the prototype_helper comments and didn't find the solution with this.

    <label for="filter_location">_{Site}</label>
    <?php //this produces the select field with the ajax function call to
          //update_devices action that would fill the filter_device <select> tag
          //but don't know how to pass the filter_location id selected in this
          //<select> to the ajax request ?>
        <select id="filter_location" name="filter[location]"
            onchange="<?php echo $prototype_helper->remote_function(array(
            'update' => 'filter_device',
            'url' => array('action' => 'update_devices' ))); ?>">
    <?php // This fills the options (<option value="location_id">location_name</option>)
          // of the <select> tag ($locations_dp is an array filled with collect() function) ?>
    <?php echo  $form_options_helper->options_for_select( $locations_dp, 
          $location_sel); ?>
    <?php // This select will be filled with devices that belongs to the location selected
       // in the previous <select> through an Ajax request ?>
    <label for="filter_device">_{Device}</label>
    <select id="filter_device" name="filter[device]"
        onchange="<?php echo $prototype_helper->remote_function(array(
        'update' => 'filter_port',
        'url' => array('action' => 'update_sockets' ))); ?>">

    I know the problem must reside in the remote_function() function, probably a parameter that I don't know or something like that.

    Any ideas? Thanks in advance :)

    • CommentAuthorasejua

    Ok, solved it ^^'

    Founded that there was an option in remote_function() that allows to add javascript parameters to the prototype Ajax.Updater function... so adding the next line

    'with' => '{ filter_location: $(filter_location).value }'

    inside the array, will add parameters to the URL being called with Ajax, like this.


    So, the full <select> tag code ends like this:

    <select id="filter_location" name="filter[location]"
        onchange="<?php echo $prototype_helper->remote_function(array(
            'update' => 'filter_device',
            'url' => array('action' => 'update_devices' ),
            'with' => '{ filter_location: $(filter_location).value }' )); ?>">

    Once with this id passed, the update_devices action would just have to do the find of that location's childs (devices).

    Well, hope this helps somebody :)

      CommentAuthorjulio montoya
    Hi asejua,
    How do you fill the filter_location select in the controller?
    I view a typo also:

    <select id="filter_device" name="filter[device]"
    instead of
    <select id="filter_device" name="filter[device}]"
    • CommentAuthorasejua

    Hello Julio,

    First, thanks for the typo mistake, I've edited it ^^

    The filter_location select it's filled through a find in the controller, something like this:

    $this->location_list =& $this->Location->collect($this->Location->find('all'),'name','id');

    And then in the view, I put this code inside the <select> tag code in my solution comment:

    <option value="0">-- _{Pick a site} --</option>
    <?php echo  $form_options_helper->options_for_select( $location_list ); ?>
    • CommentAuthorGKSR

    I have a similar kind of requirement. I have followed your steps. but i wasn't unable to fill the 2nd select box, after selecting an option in the 1st.


    <td class="bluefont"><label for="state_country_id">_{Select Country}</label></td>
    <td><select id="state_country_id" name="state[country_id]"
    onchange="<?php echo $prototype_helper->remote_function(array(
    'update' => 'state_region_id',
    'url' => array('action' => 'update_regions' ),
    'with' => '{state_country_id: $(state_country_id).value }' )); ?>">
    <option value="">Please Select</option>
    <?php echo $form_options_helper->options_for_select( $countries ); ?>
    <td colspan="2">&nbsp;</td>
    <td class="bluefont"><label for="state_region_id">_{Select Region}</label></td>
    <td><select id="state_region_id" name="state[region_id]"></select> </td>


    function update_regions()
    $this->regions = & $this->Region->collect($this->Region->find('all', array('conditions' => "country_id = $this->params['state_country_id']", 'order' => "name ASC")),'name','id');

    this is how my code looks like. How are you able to fill the 2nd drop down upon selecting the first?
    • CommentAuthorasejua

    Hello GKSR,

    first of all, sorry for the delay answering, I've been pretty busy in the last months :-)

    Your code looks ok, but you need a view for 'update_regions()' method (/views/states/update_regions.tpl). I've read the "solution" in my previous post and forget to say where to place the view code, my fault :P

    As you have done, in the controller you've place the update_regions() function, that's okay.

    You must then create an update_regions.tpl (in the same controller's view folder) like this:

    <option value="0">Please select region</option>
    <?php echo  $form_options_helper->options_for_select( $regions ); ?>

    So when the AJAX calls the update_regions, the controller will gather the required regions, the view will generate the options, and returned by ajax inserting it inside the state_region_id <select> tag.

    Hope it helps :)

    • CommentAuthorGKSR
    Thanks Asejua, I got the solution for that but in a different way(with out view tpl).
    It's working fine with all the browsers except IE6. The second drop down does fill on selection of the first.
    Are you facing the same problem?