Jump to:

5519 Posts in 1734 Topics by 1223 members

Customising the CMS

SilverStripe Forums » Customising the CMS » Update drop down filter onchange

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

Page: 1
Go to End
Author Topic: 4869 Views
  • adesweb
    Avatar
    Community Member
    39 Posts

    Update drop down filter onchange Link to this post

    Hi,

    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,

    Adrian

    Attached Files
  • adesweb
    Avatar
    Community Member
    39 Posts

    Re: Update drop down filter onchange Link to this post

    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?

    Adrian

  • adesweb
    Avatar
    Community Member
    39 Posts

    Re: Update drop down filter onchange Link to this post

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

    1. In CaseStudyPage.php I added this:

    Requirements::javascript("bclweb/javascript/getBrand.js");

    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>'
    Behaviour.register({
       '#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,
                 {
                 method:'get',
                 onSuccess: function(transport){
                 var response = transport.responseText || "no response text";
                 if(response!="false"){
                    $('BrandID').innerHTML = header + response + footer;
                 }else{
                    $('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(isset($_GET['clientid'])&&$_GET['clientid']!=""){
             if($brands = DataObject::get("Brand","ClientID = ".Convert::raw2sql($_GET['clientid']))){
                $brands = $brands->toDropdownMap();
                $dropdown = new DropdownField('BrandID','Brand',$brands);
                $dropdown->setEmptyString("Please select");
             }
             else{
                $dropdown = new DropdownField('BrandID','Brand',array());
                $dropdown->setEmptyString("There are no brands available for this client");
                return($dropdown->forTemplate());
             }
             return($dropdown->forTemplate());
          }
          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.

  • Sanchez
    Avatar
    Community Member
    6 Posts

    Re: Update drop down filter onchange Link to this post

    Hey

    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.

  • adesweb
    Avatar
    Community Member
    39 Posts

    Re: Update drop down filter onchange Link to this post

    Hi,

    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.

    Adrian

  • Sanchez
    Avatar
    Community Member
    6 Posts

    Re: Update drop down filter onchange Link to this post

    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?

  • banal
    Avatar
    Community Member
    901 Posts

    Re: Update drop down filter onchange Link to this post

    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: http://docs.jquery.com/Ajax

  • mattclegg
    Avatar
    Community Member
    56 Posts

    Re: Update drop down filter onchange Link to this post

    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>';

    4869 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.