Hi there, I've got some images (in the media section) that I want to show depending on the current value of a contour dropdown (as it changes need to run some ajax code).
Is there a way to acheive this with Contour?, Some sort of event handler override?
As far as I know there isn't something built in that can do this, but it is possible to do this using JQuery, and having a function that attached a JQuery event listener to the dropdown when the page loads. We've done that on a few forms for dropdowns with "other, please enter" that displays a field that we hide if it's selected, so they can enter the other option.
Don't spose you have some examples? I'm wanting to have similar functionality on a SimpleMediaPicker control I'm using for a dashboard admin task. (eg visually show which of the mediapickers have changed there values from the current stored one)
//$.each(["show", "toggle", "toggleClass", "addClass", "removeClass"], function(){ $.each(["show", "hide"], function(){ var _oldFn = $.fn[this]; $.fn[this] = function(){ //var hidden = this.find(":hidden").add(this.filter(":hidden")); var h = this.find('span[id*=SimpleMediaPicker1_title]'); var result = _oldFn.apply(this, arguments); //hidden.filter(":visible").each(function(){ h.each(function(){ $(this).triggerHandler("changed"); //No bubbling }); return result; } });
$('span[id*=SimpleMediaPicker1_title]').bind("changed", function(){ //ignore the initial set up of values when first entering the page if ( $(this).data("initialValue") != undefined){ if ($(this).is(":visible")) { if ($(this).text() != $(this).data("initialValue")){ $(this).parent().parent().css('background-color', 'bisque'); } else { $(this).parent().parent().css('background-color', ''); } } else { //but now the title is hidden as the delete function simply hides and doesn't change the text if ($(this).text() != '' && $(this).data("initialValue") != '' ){ $(this).parent().parent().css('background-color', 'bisque'); } else { $(this).parent().parent().css('background-color', ''); } } } });
//need to store all the initial values $('span[id*=SimpleMediaPicker1_title]').each(function(){ $(this).data('initialValue', $(this).text()); });
// extending the show function based on this solution //http://stackoverflow.com/questions/1225102/jquery-event-to-trigger-action-when-a-div-is-made-visible }); //]]> </script>
possible? Event handler on field changed
Hi there, I've got some images (in the media section) that I want to show depending on the current value of a contour dropdown (as it changes need to run some ajax code).
Is there a way to acheive this with Contour?, Some sort of event handler override?
Thanks!
As far as I know there isn't something built in that can do this, but it is possible to do this using JQuery, and having a function that attached a JQuery event listener to the dropdown when the page loads. We've done that on a few forms for dropdowns with "other, please enter" that displays a field that we hide if it's selected, so they can enter the other option.
:)
Comment author was deleted
Yup currently the best options is to do this client side with some JQuery
Don't spose you have some examples? I'm wanting to have similar functionality on a SimpleMediaPicker control I'm using for a dashboard admin task. (eg visually show which of the mediapickers have changed there values from the current stored one)
Here's a solution I came up with for anyone stumbling accross this.
(it's quite specific to the media picker...)
So from the base code [http://umbraco.codeplex.com/SourceControl/changeset/view/751c9aa11bbd#components%2feditorControls%2fmediapicker%2fMediaPicker.js]
We can use the .show() .hide() actions called on the $("#" + this._mediaTitleClientID).parent()
By extending the show/hide method to chain our own changed event too, something like
is working on a reply...