Search code examples
jqueryajaxjscolor

Initialize jscolor after ajax post that resets form

How do you run jscolor after an ajax post that resets a forms elements back to their default value?

The ajax below successfully posts to the in page iframe and restores in page form values to default when you click the "Restore Default" button. The problem is that the inputs that have jscolor attached to them don't change their background color back to their defaults.

The research I have done leads me to believe that I need to re-initiate jscolor with jscolor.init(); after the ajax post but I can't get it to work. I also tried building a function outside of the ajax post (that resets form values then jscolor.init();) and binding it to the "Restore Default" button with onclick but that didn't work.

How can I get jscolor to run again after the ajax post?

Javascript:

<script type="text/javascript">
$(document).ready(function() {
    $('#restore_form').click(function() {
        $.ajax({
            data: $('#build_form').serialize(),
            type: $('#build_form').attr('method'),
            url: $('#build_form').attr('action')+'?type=restore',
            success: function(response) {
                $('#preview').contents().find('html').html(response);
                $('#build_form')[0].reset();
                jscolor.init();
            }
        });
        return false;
    });
});
</script>

HTML:

<iframe id="preview" src="preview.php" width="100%" height="120"></iframe>

<form id="build_form" class="build_form" action="preview.php" method="post">
    <input type="text" name="background_color" value="#0CA0E2" class="color {adjust:false,hash:true}" />
    <input id="restore_form" name="restore" type="submit" value="Restore Default" class="button" />
    <input id="save_form" name="submit" type="submit" value="Save Changes" class="button" />
</form>
Solution

  • Try to reset the color. Seeing your markup, I think that your default color is 0CA0E2. Am I corret? If so, you just need to (if you used the jscolor constructor and assign the new object to the myJsColorVar var):

    myJsColorVar.color.fromString("0CA0E2"); // instead of jscolor.init()

    In the docs, it is used:

    document.getElementById("myColorInput").color.fromString("0CA0E2");

    I think that the last example is better for you, since I saw that you didn't create your jscolor in JS, but applied the "color class".

    You will just need to configure an id for your color input:

    <form id="build_form" class="build_form" action="preview.php" method="post">
    <input id="myColorInput" type="text" name="background_color" value="#0CA0E2" class="color {adjust:false,hash:true}" />
    <input id="restore_form" name="restore" type="submit" value="Restore Default" class="button" />
    <input id="save_form" name="submit" type="submit" value="Save Changes" class="button" />
</form>

    Take a look here: http://jscolor.com/try.php#setting-color

    Edit: I created a custom jscolor.

    <html>
    <head>
        <title>jscolor demo</title>
    </head>
    <body>
        <script type="text/javascript" src="jscolor.js"></script>
        <script type="text/javascript">

            function CustomJSColor( applyIn, defaultColor, opts ) {

                this.jscolor = new jscolor.color( document.getElementById( applyIn ), opts );
                this.defaultColor = defaultColor;
                this.jscolor.fromString( this.defaultColor );

                this.reset = function() {
                    this.jscolor.fromString( this.defaultColor );
                };

            }

        </script>
    <body>
        <input id="myField">
        <script>

            // the input with id "myField" will be the color picker
            // 0099cc is the default color
            // {} is the other options
            var myPicker = new CustomJSColor( "myField", "0099cc", {} );

            // to reset the color you just need to call reset
            myPicker.reset();

        </script>
    </body>
</html>

    I tried to inherit from jscolor.color but it seems that is not a constructor, so I created that class, that have one jscolor inside it. To reset the color of a component, you just need to call the reset method. Take care, because just using the "color" class will not create a CustomJSColor. You need to create it programmatically.