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.
:)
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...
This forum is in read-only mode while we transition to the new forum.
You can continue this topic on the new forum by tapping the "Continue discussion" link below.