Initialize jscolor after ajax post that resets form

StackOverflow https://stackoverflow.com/questions/11642723

  •  23-06-2021
  •  | 
  •  

Question

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>
Était-ce utile?

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

Autres conseils

I know this is an old post, but I had the same issue and found a simpler solution, assuming that the form elements are jscolor inputs with the class 'color'

$('.color').each(function() {
    $(this).focus();
});
$('#someotherinput').focus();

Getting focus triggers the jscolor mojo and sets cell background and text color appropriately.

I found this as a good solution. After setting the value (JavaScript), I call this function:

document.getElementById('<your_id>').jscolor.importColor();

Then the new color is shown.

By firing installByClassName by passing input class value 

jscolor.installByClassName('jscolor');
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top