Auto submit of ajax form with select
Another ajax question. If I'm using an ajax form that has a select in it, how do I make a change in the select cause the form to submit? I tried just passing the option 'onChange'='this.form.submit();' and also 'onChange'=>'event.returnValue = false; return false;' which was what the ajax helper put in the onsubmit event of the form. Of course, nothing worked, although 'this.form.submit()' did submit the form but without using ajax. I'm guessing there is a simple way to do it.
Thanks for your help
Asked by Matt, on 10/5/10
1 Answer
Bind the select field's onchange event to trigger your ajax form submit button.
$js->get('#selectList');
$js->event('onchange', $js->submit('Save', array('update' => '#content', 'div' => false, 'type' => 'json', 'async' => false));
...or whatever, that's the basic idea, didn't test that myself but I have gotten it to work - run with that cos it works for all kinds of stuff.
The Ajax (1.2) helper will assign random id such that you can't select elements by id, but you can still select them by class identifiers and you can get pretty tricky tucking in ajax url / requests, and also, to do your updates, the action you're calling needs to use an ajax / json layout. Also, you have to open the form and close the form as ajax if that's what you're using, such as:
$ajax->form(...);
and
$ajax->submit(...);
This is rather ambiguous in the docs, definitely. Also, don't know about the helper being picky about tables, but the browser might be tripping you up. Especially IE. Tables that aren't well-formed can be a problem of their own.
Answered by satyrwilderon 14/5/10
Your Answer
You can use Creole Wiki Syntax to format your text.
Tagged with
Rating
0
Viewed
465 times
Last Activity
on 14/5/10
This seems to be a weak point in the documentation, so now that I figured it out let me post the answer instead of deleting my question. Create a remote function like this:
$v = $ajax->remoteFunction(array(
'url'=>'/stuff/index',
'update' => 'ajax_content',
'indicator' => 'ajax_spinner',
'with' => 'Form.serialize(this.form)',
'loading'=> "javascript:document.getElementById('ajax_content').innerHTML='';",
'complete' => "javascript:document.getElementById('ajax_content').style.visibility='visible';set_size('content','user_groups','content_data');",
));
and then make your select inside the ajax form like this:
echo $form->select( 'group_id', $groups, $group_id, array('empty'=>array(''=>'All'), 'onChange'=>"$v;"), false);
I noticed that the ajax functions seemed to be picked about how the form was inserted into a table, not sure why. So basically I had to start the form, show the .... then end the form. If the form was inside the it didn't work. Strange.
Hope this helps someone
Matt - on 10/5/10