21288 Posts in 5733 Topics by 2602 members
General Questions
SilverStripe Forums » General Questions » JavaScript / AJAX / dynamically changing values on forms
General questions about getting started with SilverStripe that don't fit in any of the categories above.
Moderators: martimiz, Howard, Sean, Ryan M., biapar, Willr, Ingo, swaiba, simon_w
|
Page:
1
|
Go to End | |
| Author | Topic: | 1574 Views |
-
JavaScript / AJAX / dynamically changing values on forms
7 January 2010 at 4:20am
I have a specific question - but also a general point to! ;-)
General: when looking at the docs on Forms, I have not really come across anything that shows me how I can add javascript calls to my form fields. Pretty 101 if you are familiar with HTML, but using SS to build forms leaves me a bit stumped. Something to think about (or give me a link to if I just haven't found it!! )
Specific: I have a set of related dataObjects - Song, Theme and SubTheme. Each song can have MANY sub themes and each THEME can have many SubThemes. (i.e. Song related to SubTheme (MM), SubTheme related to Theme (MO) by association song is related to a theme via SubTheme.Theme.fieldName) All very lovely. I am currently building a search form allowing users to search for a song by Title (Text field) Author (Text field), Lyrics (Text field). Also lovely and working fine. I've added two drop down sto allow searching by theme and subtheme and am populating them from the DataObjects. What I really want to do is this:
1. User is presented with form with the text boxes and drop down for THEME.
2. If user selects a THEME (i.e. changes the drop down box) I want to then show the second drop down containing ONLY the related subthemes.
3. I don't care how this is done (page refresh, no refresh - not really fussed) I'd usually do an onChange() using javascript and fire Theme.ID at a PHP query to get the relevant list of SubThemes. Can't work out how using the Forms stuff in SS. Have looked at the Ajax docs and also the FormResponse.... not much to go on and leaving me a little lost. -
Re: JavaScript / AJAX / dynamically changing values on forms
7 January 2010 at 4:25am
Here is the code for the form (in case it helps!!)
class SongLibrary_Controller extends Page_Controller {
public function SearchForm() {
$context = singleton('Song')->getCustomSearchContext();
$TopOption = array('' => 'Any Theme');
$SubThemeList = array_merge($TopOption, Dataobject::get("SubTheme","","Title ASC")->toDropdownMap("Title", "Title"));
$fields = new FieldSet(
new TextField("Title", "Song Title"),
new TextField("Lyrics", "Lyrics"),
new TextField("Author", "Author"),
new DropdownField(
'SubThemes__Title',
'Please Select a theme from the list below:',
$SubThemeList
)
);
// $fields = $context->getSearchFields();
$form = new Form($this, "SearchForm",
$fields,
new FieldSet(
new FormAction('doSearch','SEARCH')
)
);
return $form;
}public function doSearch($data, $form) {
$context = singleton('Song')->getCustomSearchContext();
$results = $this->getResults($data);
return $this->customise(array(
'Results' => $results
))->renderWith(array('SongSearch_results', 'Page'));
}
function getResults($searchCriteria = array()) {
$start = ($this->request->getVar('start')) ? (int)$this->request->getVar('start') : 0;
$limit = 10;
$context = singleton('Song')->getCustomSearchContext();
$query = $context->getQuery($searchCriteria, null, array('start'=>$start,'limit'=>$limit));
$records = $context->getResults($searchCriteria, null, array('start'=>$start,'limit'=>$limit));
if($records) {
$records->setPageLimits($start, $limit, $query->unlimitedRowCount());
}
return $records;
} -
Re: JavaScript / AJAX / dynamically changing values on forms
8 February 2010 at 9:06pm Last edited: 8 February 2010 9:09pm
I just made a copy of silverstripe/sapphire/forms/TextField.php in mysite/code/MyField.php
renamed the class to MyField and added an onChange value to the attributes array, this is passed to the createTag function that makes the HTML, now I have an onChange attribute in my element that fires when I edit the field in IE8.
Your Mileage My Vary
class MyField extends FormField {
function Field() {
$attributes = array(
'type' => 'text',
'class' => 'text' . ($this->extraClass() ? $this->extraClass() : ''),
'id' => $this->id(),
'name' => $this->Name(),
'value' => $this->Value(),
'tabindex' => $this->getTabIndex(),
'maxlength' => ($this->maxLength) ? $this->maxLength : null,
'size' => ($this->maxLength) ? min( $this->maxLength, 30 ) : null,
'onChange' => "collapse('adresses2');return false"
);
if($this->disabled) $attributes['disabled'] = 'disabled';
return $this->createTag('input', $attributes);
}
}collapse() is a javascript function that is in my custom form/page template, I haven't progressed to an include .js file yet
| 1574 Views | ||
|
Page:
1
|
Go to Top |
