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've moved the forum!

Please use forum.silverstripe.org for any new questions (announcement).
The forum archive will stick around, but will be read only.

You can also use our Slack channel or StackOverflow to ask for help.
Check out our community overview for more options to contribute.

Customising the CMS /

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

Update drop down filter onchange


Go to End


8 Posts   8220 Views

Avatar
adesweb

Community Member, 39 Posts

14 July 2009 at 10:53pm

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
Avatar
adesweb

Community Member, 39 Posts

15 July 2009 at 8:13pm

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

Avatar
adesweb

Community Member, 39 Posts

15 July 2009 at 11:27pm

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.

Avatar
Sanchez

Community Member, 6 Posts

16 October 2009 at 12:04pm

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.

Avatar
adesweb

Community Member, 39 Posts

16 October 2009 at 9:04pm

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

Avatar
Sanchez

Community Member, 6 Posts

16 October 2009 at 10:36pm

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?

Avatar
bummzack

Community Member, 904 Posts

17 October 2009 at 1:04am

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

Avatar
mattclegg

Community Member, 56 Posts

11 September 2010 at 4:36am

Edited: 11/09/2010 4:37am

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