Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

We're retiring the forums!

The SilverStripe forums have passed their heyday. They'll stick around, but will be read only. We'd encourage you to get involved in the community via the following channels instead:

Customising the CMS /

Moderators: martimiz, Sean, Ed, biapar, Willr, Ingo, swaiba

show/hide divs in CMS based on dropdown doesn't work


Go to End


1538 Views

Avatar
theAlien

Community Member, 131 Posts

13 July 2009 at 10:56am

Hi,

I hope someone can help me out, maybe I'm overlooking something.
In the CMS I would like to use a dropdown to determine what divs are displayed (in the CMS).

So at first I created mysite/code/TestPage.php

class TestPage extends Page {
	static $db = array (
		"choice" => "Int",
		"field" => "Varchar"
	);
	public function getCMSFields() {
		$fields = parent::getCMSFields();
		$fields->addFieldToTab("Root.Content.Main", new DropdownField('choice','choicefield', 
			array ('choice1' => 'option 1', 'choice2' => 'option 2', 'choice3' => 'option 3' )));

		$fields->addFieldToTab("Root.Content.Main", new LiteralField('field0a','<div id="choices">'));
		$fields->addFieldToTab("Root.Content.Main", new LiteralField('field1','<div id="choice1">tekst1</div>'));
		$fields->addFieldToTab("Root.Content.Main", new LiteralField('field2','<div id="choice2">tekst2</div>'));
		$fields->addFieldToTab("Root.Content.Main", new LiteralField('field3','<div id="choice3">tekst3</div>'));
		$fields->addFieldToTab("Root.Content.Main", new LiteralField('field0b','</div>'));	
		return $fields; }}

class TestPage_Controller extends Page_Controller {}

In the HTML the dropdownfield is rendered with the following HTML: <select id="Form_EditForm_choice" name="choice"><option value="choice1">option 1</option> etc.

Next I created mysite/javascript/TestPage.js

$(document).ready(function(){
$('#choice1').hide();
$('#choice2').hide();
$('#choice3').hide();
$("#Form_EditForm_choice").change(function(){
$("#" + this.value).show().siblings().hide();
});

$("#Form_EditForm_choice").change();
});

In order to activate this .js-file in the CMS I created mysite/code/TestPageScriptInit.php (as I saw UncleCheese doing in his modules):

class TestPageScriptInit extends Extension {
	public function augmentInit(){
		Requirements::javascript(THIRDPARTY_DIR . '/jquery/jquery.js'); // tried it with and without this line
		Requirements::javascript('mysite/javascript/TestPage.js');
	}
}

And in order to get this file recognized by SS/Sapphire, I added to mysite/_config.php (again as I saw UncleCheese doing):

// TestPage
Object::add_extension("LeftAndMain","TestPageScriptInit");

However... all three divs are shown, while (off course) just 1 option was selected.
So I tested the code in a plain HTML/js combination and everything just works fine.
So after spending hours on this: does anyone know what mistake I'm making?
Thanks alot!