Question

I am currently using jQuery .click() method to update 15 text fields with simple color hex values i.e. like this document.form1.top_menu_bgcolor.value = ‘#FFFFFF’;

I am also using ExColor for jQuery http://modcoder.org/ to display a killer color picker
http://modcoder.org/js/modcoder-1.1.js

The problem is that when you click to update the fields, the color picker swatches don’t get refreshed.

How can I simply reactivate or refresh the swatches when the fields are changed? What can I call in the .click function below to refresh the swatches to the new hex string, input value?

Here’s the JS:

<script type="text/javascript">

    $('document').ready(function() {

        // running ExColor
        $('#my_input_1').modcoder_excolor();
    $('#my_input_2').modcoder_excolor();
    $('#my_input_3').modcoder_excolor();
    $('#my_input_4').modcoder_excolor();
    $('#my_input_5').modcoder_excolor();
    $('#my_input_6').modcoder_excolor();
    $('#my_input_7').modcoder_excolor();
    $('#my_input_8').modcoder_excolor();
    $('#my_input_9').modcoder_excolor();
    $('#my_input_10').modcoder_excolor();
    $('#my_input_11').modcoder_excolor();
    $('#my_input_12').modcoder_excolor();
    $('#my_input_13').modcoder_excolor();
    $('#my_input_14').modcoder_excolor();
    $('#my_input_15').modcoder_excolor();    

        $('#theme01').click(function() {
            document.form1.top_menu_bgcolor.value = '#FFFFFF';
        document.form1.top_menu_bgcolor.focus();
        document.form1.top_menu_fontcolor.value = '#FFFFFF';
        document.form1.top_menu_bghovercolor.value = '#FFFFFF';
        document.form1.top_menu_fonthovercolor.value = '#FFFFFF';
        document.form1.left_menu_bgcolor.value = '#FFFFFF';
        document.form1.left_menu_fontcolor.value = '#FFFFFF';
        document.form1.left_menu_bghovercolor.value = '#FFFFFF';
        document.form1.left_menu_fonthovercolor.value = '#FFFFFF';
        document.form1.left_div_border.value = '#FFFFFF';
        document.form1.site_background_color.value = '#FFFFFF';
        document.form1.header_color.value = '#FFFFFF';
        document.form1.content_header_color.value = '#FFFFFF';
        document.form1.browser_bg_color.value = '#FFFFFF';
        document.form1.footer_color.value = '#FFFFFF';
        document.form1.footer_font_color.value = '#FFFFFF';

        });

</script>

And the HTML

<a href="#" id="theme01">Theme 1</a>


<input type="text" ID="my_input_1" name="top_menu_bgcolor" maxlength="7" value="#000000" size="10" />

Answer 1

You can try using something similar to:

   <script type="application/javascript">
      $(document).ready(function(){

      $("#theme01").click(function(){
       $("#myinput1").val('#aaafFF');   
       $('#myinput1').click();
       setTimeout( function(){
            $('#c3').blur();
            $('#c3').click();
            $('#c3').blur();}, 
       50);
   return false;
      });

      });
 </script>

where #c3 is a different div somewhere.

This will in effect, show and hide the modcoder fast enough the user does not see it.

Edit: Full Answer

        $("#theme01").click(function(){
            $("#myinput1").val('#aaaFFF');
            $('#myinput1').click();
            setTimeout( function(){$('#modcoder_ok').click();}, 50);
        });

        $("#theme02").click(function(){
            $("#myinput1").val('#222ccc');
            $('#myinput1').click();
            setTimeout( function(){$('#modcoder_ok').click();}, 50);
        });

And then in html:
Theme 1
Theme 2

I use two buttons, the delayed #modcode_ok.click() does a programmatically click of the ok button to select and refresh the color.
On my computer the setTimeout at 50ms is too fast and I cannot see the popup. Maybe you need to adjust on your needs.