x First time here? Check out the FAQ

Come work for Umbraco - The Umbraco HQ are hiring Project managers, .NET developers and DevOps people!

  • Avatar40posts60karma

    possible? Event handler on field changed

    BaconBeastNz started this topic April 6, 2011 @ 03:45

    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!


  • Avatar1078posts2169karma
    Comment with ID: 73363
    Tim posted this reply April 11, 2011 @ 12:31

    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.

    :) 


  • Tim Geyssens posted this reply April 11, 2011 @ 12:34

    Yup currently the best options is to do this client side with some JQuery


  • Avatar468posts802karma
    Comment with ID: 103223
    Mike Chambers posted this reply January 13, 2012 @ 01:52

    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)


  • Avatar468posts802karma
    Comment with ID: 103466
    Mike Chambers posted this reply January 16, 2012 @ 03:04

    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

    <script language="javascript">
    //<![CDATA[
    $(document).ready(function(){
        //alert("here");
        
        //$.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>


Please login or Sign up To post replies