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.

Customising the CMS /

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


Reply


1127 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!