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

Update drop down filter onchange


8 Posts   4967 Views


14 July 2009 at 10:53pm Community Member, 39 Posts


Here's what I would like to do on a portfolio site for the marketing agency I work for:

A CLIENTPAGE has a one to many relationship with a BRAND

A CASESTUDYPAGE has a one to many relationship with both BRAND and CLIENTPAGE

I have managed to get two drop downs to appear in the cms, the client one pre-populated dynamically with CLIENTPAGE titles, and the brand one pre-populated with all BRAND objects with a clientID that matches the clientID of the CASESTUDYPAGE.

However, when I update the client drop down, the brand drop down needs to update itself using AJAX, or I need to trigger a full page refresh. Otherwise the brand drop down is going to be out of date.

Any idea how I can do this easily?

Thanks in advance,


Attached Files

15 July 2009 at 8:13pm Community Member, 39 Posts

Got a bit further with this.

Using Requirements to pull in my own JavaScript file, I have been able to fire a test AJAX call when updating the first drop down.

However, what I ned to be able to do now is to call a function (presumably within CaseStudyPage.php) which will then do a query on the data against the selected drop down value.

Any idea how I do this? What would the ajax url be for this?



15 July 2009 at 11:27pm Community Member, 39 Posts

Finally got this working. For those people who are interested:

1. In CaseStudyPage.php I added this:


2. I then created the above javascript file, which uses the same prototype library already running in the cms (a bit depreciated)

header = '<label for="Form_EditForm_BrandID" class="left">Brand</label><div class="middleColumn">';
footer = '</div>'
   '#Form_EditForm_ClientID' : {
   onchange : function() {
         backupHTML = $('BrandID').innerHTML;
         $('BrandID').innerHTML = header + "loading brands <img src='cms/images/network-save.gif' alt='loading' />" + footer;
    new Ajax.Request('/myadmin/getBrands/?clientid='+this.value,
             onSuccess: function(transport){
             var response = transport.responseText || "no response text";
                $('BrandID').innerHTML = header + response + footer;
                $('BrandID').innerHTML = header + "there was a problem while loading brands. Please refresh the page and try again." + footer;
             onFailure: function(){ $('BrandID').innerHTML = backupHTML}


3. Finally, I created an Admin controller which entends LeftAndMain, just adding a new custom method

class MyAdmin extends LeftAndMain {

    * Form that will be shown when we open one of the items
   public function getBrands() {
         if($brands = DataObject::get("Brand","ClientID = ".Convert::raw2sql($_GET['clientid']))){
            $brands = $brands->toDropdownMap();
            $dropdown = new DropdownField('BrandID','Brand',$brands);
            $dropdown->setEmptyString("Please select");
            $dropdown = new DropdownField('BrandID','Brand',array());
            $dropdown->setEmptyString("There are no brands available for this client");
      return "false";

Hope this helps someone!

I think it would be nice to keep the javascript libraries up to date, because I know I can make this a little better, by getting rid of the harcoded header and footer wrapper, but it was more complex to get the specific bit of html i needed using 1.4 of prototype. 1.6 seems to have some beter selection functions. I prefer JQuery anyway, but for the sake of not wanting to cause JS collisions I went with Prototype in this case.


16 October 2009 at 12:04pm Community Member, 6 Posts


I am working on something similar to this but on the front end. I have a select box and when an item is selected the text box below shows a bit more detail about the item.

I have tried implementing something similar to your code but I dont quite understand whats going on.


16 October 2009 at 9:04pm Community Member, 39 Posts


If you want to do this in the front end, then create a function in your controller using DataObject:get to get the appropriate data from your CMS, then simply use AJAX call to call this function. Let me know if you need some further guidance on the code.



16 October 2009 at 10:36pm Community Member, 6 Posts

I've decided to scrap that idea and went off into another completely complicated tangent.
Do you know if it's possible to pass javascript values to php in SilverStripe without using the Url?


17 October 2009 at 1:04am Community Member, 901 Posts

You mean without the URL query string? You'll have to use a URL for all cases.. if you use GET, variables will be appended to the URL (query string), if you use post, the variables will be sent inside the request header.
This might help you:


11 September 2010 at 4:36am (Last edited: 11 September 2010 4:37am), Community Member, 56 Posts

If your reading this post you should also note that IE requires variables be defined properly ie;

var header = '<label for="Form_EditForm_BrandID" class="left">Brand</label><div class="middleColumn">';
var footer = '</div>';