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 1193 posts 2655 karma points c-trib
    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 6562 posts 15373 karma points MVP 2x c-trib
    Apr 11, 2011 @ 12:34
    Tim Geyssens
    0

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

  • Mike Chambers 621 posts 1203 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 621 posts 1203 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>

  • 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.

Please Sign in or register to post replies