Event handler not working anymore

[sticilface]

I've had this working for some time now, in a project. (using version from before xmas)

I just updated it, and my event handler is no longer working.

Here is a link to the html file with the full js.. https://github.com/sticilface/Melvanimate/blob/master/examples/Melvanimate-example/data/index.htm

the code for the render is here

                $('.color').colorPicker({
                    preventFocus: true,
                    renderCallback: function($elm, toggled) {
                        if (toggled === true) { // simple, lightweight check
                            // ... like an open callback
                        } else if (toggled === false) {
                              console.log("RENDER TRIGGERED");
                            // ... like a close callback
                            //var nameof = $(this).attr("name"); 
                            //var $form = $(this).closest('input');

                            //console.log($form.attr('name'));
                            var colors = this.color.colors,
                                rgb = colors.RND.rgb;
                            //console.log(rgb.r + ', ' + rgb.g + ', ' + rgb.b + ', ' + colors.alpha);

                            var $form = $elm.closest('form');
                            var inputName = $elm.attr('name');

                            $("#status").empty().append("Waiting ").css("color", "blue");;

                            $.post("data.esp", inputName + "=" + rgb.r + "," + rgb.g + "," + rgb.b 
                                // function(data) {
                                //     console.log(data);
                                // }
                            ).success(function(e) {
                              if (e) {
                                processJSON(e); 
                              }
                            $("#status").empty().append("Success").css("color", "green");;
                        })
                        .error(function() {
                            $("#status").empty().append("Error").css("color", "red");;
                        })
                        .complete(function() {});

                            $elm.css('color', "rgb(" + colors.RND.rgb.r + "," + colors.RND.rgb.g + "," + colors.RND.rgb.b + ")");
                            $elm.css('text-shadow', 'none');
                        }
                    },
                    buildCallback: function($elm) {
                        var colorInstance = this.color,
                            colorPicker = this,
                            random = function(n) {
                                return Math.round(Math.random() * (n || 255));
                            };
                        $elm.append('<div class="cp-memory">' +
                            '<div></div><div></div><div></div><div></div>' +
                            '<div></div><div></div><div></div><div class="cp-store">S</div>').
                        on('click', '.cp-memory div', function(e) {
                          console.log("Colour picker click"); 
                            var $this = $(this);

                            if (this.className) {
                                $this.parent().prepend($this.prev()).children().eq(0).
                                css('background-color', '#' + colorInstance.colors.HEX);
                            } else {
                                colorInstance.setColor($this.css('background-color'));
                                colorPicker.render();
                            }
                        }).find('.cp-memory div').each(function() {
                            !this.className && $(this).css({
                                background: 'rgb(' + random() + ', ' + random() + ', ' + random() + ')'
                            });
                        });
                    },
                    opacity: false,
                    cssAddon: // could also be in a css file instead
                        '.cp-memory {margin-bottom:6px; clear:both;}' +
                        '.cp-xy-slider:active {cursor:none;}' +
                        '.cp-memory div {float:left; width:17px; height:17px; margin-right:2px;' +
                        'background:rgba(0,0,0,1); text-align:center; line-height:17px;}' +
                        '.cp-memory .cp-store {width:21px; margin:0; background:none; font-weight:bold;' +
                        'box-sizing:border-box; border: 1px solid; border-color: #666 #222 #222 #666;}' +
                        '.cp-color-picker{z-index:16777271}'
                });

                // $("#brightness").on('slidestop', function() {
                //     $("#status").empty().append("Waiting...").css("color", "blue");;
                //     $.post("data.esp", $(this).serialize())
                //         .success(function(e) {
                //             processJSON(e); 
                //             $("#status").empty().append("Success").css("color", "green");;
                //         })
                //         .error(function() {
                //             $("#status").empty().append("Error").css("color", "red");;
                //         })
                //         .complete(function() {});
                // });

                // $("#speed").on('slidestop', function() {
                //     $("#status").empty().append("Waiting...").css("color", "blue");;
                //     $.post("data.esp", $(this).serialize())
                //         .success(function(e) {
                //             processJSON(e); 
                //             $("#status").empty().append("Success").css("color", "green");;
                //         })
                //         .error(function() {
                //             $("#status").empty().append("Error").css("color", "red");;
                //         })
                //         .complete(function() {});
                // });
            });

the colour picker seems to work fine. appears... selects colours... but it doesn't fire to send it off... and I've no idea why

[sticilface]

investigating further. 1.0.6 - works fine 1.0.7 broken

hope that helps

[PitPik]

Hi @sticilface, I was testing your snipped but I don't see the problem. What do mean by '... but it doesn't fire to send it off...'. Do you mean $.post("data.esp", inputName ... inside buildCallback? I was testing all kinds of situations but I don't see a difference using 1.0.6 and 1.0.7.

Please give me more information about what's going wrong then I might be able to help you...

Cheers

[sticilface]

sorry not particularly accurate language.

the callback does not get triggered for whatever reason. even if i place a console.log right at the top, it doesn't log anything.

apart from that i can't really help you any more. you've got all the code, and the commit that breaks it.
reverting causes it to work straight away. There is no messages in the web inspector.

I can try and use a different browser. i use safari, but didn't check if it occurs with chrome or firefox.

Is there anything else i might be able to provide to help?

[PitPik]

Hi @sticilface , Now I see the problem... The only thing that changed since the last version is, that you now can make multiple instances with different callbacks etc. So, every time you call $('.something').colorPicker(); you make a new instance with new options. In your case, you call .colorPicker() twice, but the second time without options and therefore you don't have any callback any more: The first time you call:

$('.color').colorPicker({
    preventFocus: true,
    renderCallback: function($elm, toggled) {
    ...
});

and the second time you go like:

$( '#effectoptions > .input_textbox_rgb')
    .find("#input_" + key)
    .val("rgb(" + value[0] + "," + value[1] + "," + value[2] + ")")
    .colorPicker();

but without options (and therefore without a callback function). So, either skip the second call (if that works for you) or make a general option setup like:

var colorPickerOptions = {
    preventFocus: true,
    renderCallback: function($elm, toggled) {
    ...
}

and then call colorPicker with those options like:

$('.color').colorPicker(colorPickerOptions);
// and
$( '#effectoptions > .input_textbox_rgb')
    .find("#input_" + key)
    .val("rgb(" + value[0] + "," + value[1] + "," + value[2] + ")")
    .colorPicker(colorPickerOptions);

This will do it ;o) Let me know if it worked

[sticilface]

Ah ok. thanks for taking a look at it. I will modify and let you know how i get on