Question

I have a page with a dropdown list defined as follows

$memb=$this->api->db->dsql()->table('vscrum_member m')
     ->field('m.id')
     ->field('m.name')
     ->where('m.team_id',$p->api->auth->get('team_id'))
     ->order('m.xlastname, m.xfirstname')
     ->do_getAssoc();

    $f=$p->add('Form');
    $l1=$f->addField('dropdown','member')->setValueList($memb);

I need the page to be reloaded passing the current value of the dropdown when it is changed by the user (either GET or POST is fine).

In ATK4, i can cause a redirect of the page with this

$l1->js('change')->univ()->redirect($this->api->getDestinationURL(null));

and in theory, you can add an array of values as the second parameter which become GET variables

$l1->js('change')->univ()
   ->redirect($this->api->getDestinationURL(null, array('member'=>123);

but as i dont know the value chosen on the client side, this doesnt help.
In javascript, you can select the current value of a select box by using

 this.options[this.selectedIndex].value

and in jquery you can use

  $('#name').val();

but so far, the closest i’ve got is using

$l1->js('change')->univ()->redirect($this->api->getDestinationURL(null, 
          array('member'=>$l1->js(true)->val())));

This does the redirect to

http://localhost/test1/scrumwall?
      member=%24%28%27%23test1_scrumwall_form_member%27%29.val%28%29

So any ideas what the correct syntax would be so that it evaluates the id of the option chosen, rather than putting the name of the dropdown list as the parameter value ?

The $l1->js(‘change’) bit adds an onchange=”” to the dropdown list – maybe there is some way to
insert javascript directly between the quotes but couldnt see any examples.

I tried it this way

 $l1->js('change')->univ()->js(null, 
    "window.location='http://localhost/test1/scrumwall?member='+this.options[this.selectedIndex].value");

but it doesnt put this between the quotes on the onchange, instead it adds it as a jquery function (see result in browser view source below) bound to the dropdown but this also doesnt work.

$('#test1_scrumwall_form_member').bind('change',function(ev){    
   ev.preventDefault();ev.stopPropagation(); 
   $('#test1_scrumwall_form_member').univ().js(null,'window.location=\x27
      http://localhost/test1/scrumwall?member=\x27+this.options[this.selectedIndex].value')
 });

so i cant figure out how to do this with ATK4. Any assistance appreciated.

Thanks

Answer 1

OK, so i worked it out myself.

I needed to create a separate .js file in /templates/js called my_univ.js with the following contents

$.each({
viewMember: function(url, name){              
          document.location.href=url+'?member='+$(name).val();
}
},$.univ._import);

and in the page where i want the dropdown list, i added a line to load the new .js
$this->js()->_load(‘my_univ’);

get the values from the URL or the logged in user if none given

    if ($_GET['member']){
      $member=$_GET['member'];
    } else {
      $member=$p->api->auth->get('id');
    }

add lines to get populate the dropdown from a database table (including setting the current list value to either the logged in user or the GET parameter

$memb=$this->api->db->dsql()->table('vscrum_member m')
     ->field('m.id')
     ->field('m.name')
     ->where('m.team_id',$p->api->auth->get('team_id'))
     ->order('m.xlastname, m.xfirstname')
     ->do_getAssoc();

    $f=$p->add('Form');
    $l1=$f->addField('dropdown','member')->setValueList($memb)->set($member);

    $l1->js('change')->univ()->viewMember($p->api->getDestinationURL(null),$l1);

and finally, in the main model which is used to populate the page, add a condition

    $st = $p->add('Model_Story');
    $st->addCondition('team_id', $p->api->auth->get('team_id'));
    $st->addCondition('responsible', $member);

The last line tells it when the list changes, to call my above function passing it the name of the list so when the user changes the dropdown list, it creates a new URL with the vaue of the selected list and reloads the page using the URL http://localhost/test1/scrumwall?member=N where N is the member chosen in the list – fantastic.