Imagine being paid to improve your favorite CMS!

It could be you! Umbraco HQ are hiring and are looking for both talents and senior developers. Wonderful workplace, friendly colleagues and competitive salary.

Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • BaconBeastNz 40 posts 60 karma points
    Apr 06, 2011 @ 03:45
    BaconBeastNz
    0

    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!

  • Tim 1184 posts 2630 karma points
    Apr 11, 2011 @ 12:31
    Tim
    0

    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 6299 posts 14586 karma points core
    Apr 11, 2011 @ 12:34
    Tim Geyssens
    0

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

  • Mike Chambers 571 posts 1072 karma points c-trib
    Jan 13, 2012 @ 13:52
    Mike Chambers
    0

    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)

  • Mike Chambers 571 posts 1072 karma points c-trib
    Jan 16, 2012 @ 15:04
    Mike Chambers
    0

    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 Sign in or register to post replies

Write your reply to:

Draft