Jump to:

5450 Posts in 1672 Topics by 1197 members

Customising the CMS

SilverStripe Forums » Customising the CMS » show/hide divs in CMS based on dropdown doesn't work

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

Page: 1
Go to End
Author Topic: 1022 Views
  • theAlien
    Avatar
    Community Member
    131 Posts

    show/hide divs in CMS based on dropdown doesn't work Link to this post

    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!

    1022 Views
Page: 1
Go to Top

Want to know more about the company that brought you SilverStripe? Then check out SilverStripe.com

Comments on this website? Please give feedback.