from django import forms
from django.conf import settings
from django.utils.safestring import mark_safe


class ColorPickerWidget(forms.TextInput):
    class Media:
        css = {
            "all": ("%s/%s" % (settings.STATIC_URL, "paintstore/css/colorpicker.css"),)
        }

        js  = (
            ("%s/%s" % (settings.STATIC_URL, "paintstore/jquery_1.7.2.js")),
            ("%s/%s" % (settings.STATIC_URL, "paintstore/colorpicker.js"))
        )

    input_type = 'colorpicker'

    def render(self, name, value, attrs=None):
        script = u"""<script type='text/javascript'>
                        $(document).ready(function(){
                            $('#%s').ColorPicker({
                                onSubmit: function(hsb, hex, rgb, el, parent) {
                                    $(el).val('#' + hex);
                                    $(el).ColorPickerHide();
                                },
                                onBeforeShow: function () {
                                    $(this).ColorPickerSetColor(this.value);
                                }
                            }).bind('keyup', function(){
                                $(this).ColorPickerSetColor(this.value.replace('#', ''));
                            });
                        });
                    </script>
                    """ % ("id_%s" % name,)

        super_render = super(ColorPickerWidget, self).render(name, value, attrs)
        return mark_safe(u"%s%s" % (super_render, script))

from django import forms
from django.conf import settings
from django.utils.safestring import mark_safe


class ColorPickerWidget(forms.TextInput):
    class Media:
        css = {
            "all": ("%s/%s" % (settings.STATIC_URL, "paintstore/css/colorpicker.css"),)
        }

        js  = (
            ("%s/%s" % (settings.STATIC_URL, "paintstore/jquery_1.7.2.js")),
            ("%s/%s" % (settings.STATIC_URL, "paintstore/colorpicker.js"))
        )

    input_type = 'colorpicker'

    def render(self, name, value, attrs=None):
        script = u"""<script type='text/javascript'>
                        $(document).ready(function(){{
                            $('#{0}').ColorPicker({{
                                onSubmit: function(hsb, hex, rgb, el, parent) {{
                                    $(el).val('#' + hex);
                                    $(el).ColorPickerHide();
                                    $('#{0}').css('background-color', '#' + hex);
                                }},
                                onBeforeShow: function () {{
                                    $(this).ColorPickerSetColor(this.value);
                                }}
                            }}).bind('keyup', function(){{
                                $(this).ColorPickerSetColor(this.value.replace('#', ''));
                            }});
                            $('#{0}').css('background-color', $('#{0}').val());
                        }});
                    </script>
                    """.format(u'id_'+name)

        super_render = super(ColorPickerWidget, self).render(name, value, attrs)
        return mark_safe(u"%s%s" % (super_render, script))

Change the background to reflect the color chosen
Change the background to reflect the color chosen
  from django import forms
  from django.conf import settings
  from django.utils.safestring import mark_safe
  
  
  class ColorPickerWidget(forms.TextInput):
      class Media:
          css = {
              "all": ("%s/%s" % (settings.STATIC_URL, "paintstore/css/colorpicker.css"),)
          }
  
          js  = (
              ("%s/%s" % (settings.STATIC_URL, "paintstore/jquery_1.7.2.js")),
              ("%s/%s" % (settings.STATIC_URL, "paintstore/colorpicker.js"))
          )
  
      input_type = 'colorpicker'
  
      def render(self, name, value, attrs=None):
          script = u"""<script type='text/javascript'>
-                         $(document).ready(function(){
+                         $(document).ready(function(){{
-                             $('#%s').ColorPicker({
+                             $('#{0}').ColorPicker({{
-                                 onSubmit: function(hsb, hex, rgb, el, parent) {
+                                 onSubmit: function(hsb, hex, rgb, el, parent) {{
                                      $(el).val('#' + hex);
                                      $(el).ColorPickerHide();
+                                     $('#{0}').css('background-color', '#' + hex);
-                                 },
+                                 }},
-                                 onBeforeShow: function () {
+                                 onBeforeShow: function () {{
                                      $(this).ColorPickerSetColor(this.value);
-                                 }
+                                 }}
-                             }).bind('keyup', function(){
+                             }}).bind('keyup', function(){{
                                  $(this).ColorPickerSetColor(this.value.replace('#', ''));
-                             });
+                             }});
+                             $('#{0}').css('background-color', $('#{0}').val());
-                         });
+                         }});
                      </script>
-                     """ % ("id_%s" % name,)
+                     """.format(u'id_'+name)
  
          super_render = super(ColorPickerWidget, self).render(name, value, attrs)
          return mark_safe(u"%s%s" % (super_render, script))
  
Change the background to reflect the color chosen
## Code Before:
from django import forms
from django.conf import settings
from django.utils.safestring import mark_safe


class ColorPickerWidget(forms.TextInput):
    class Media:
        css = {
            "all": ("%s/%s" % (settings.STATIC_URL, "paintstore/css/colorpicker.css"),)
        }

        js  = (
            ("%s/%s" % (settings.STATIC_URL, "paintstore/jquery_1.7.2.js")),
            ("%s/%s" % (settings.STATIC_URL, "paintstore/colorpicker.js"))
        )

    input_type = 'colorpicker'

    def render(self, name, value, attrs=None):
        script = u"""<script type='text/javascript'>
                        $(document).ready(function(){
                            $('#%s').ColorPicker({
                                onSubmit: function(hsb, hex, rgb, el, parent) {
                                    $(el).val('#' + hex);
                                    $(el).ColorPickerHide();
                                },
                                onBeforeShow: function () {
                                    $(this).ColorPickerSetColor(this.value);
                                }
                            }).bind('keyup', function(){
                                $(this).ColorPickerSetColor(this.value.replace('#', ''));
                            });
                        });
                    </script>
                    """ % ("id_%s" % name,)

        super_render = super(ColorPickerWidget, self).render(name, value, attrs)
        return mark_safe(u"%s%s" % (super_render, script))

## Instruction:
Change the background to reflect the color chosen
## Code After:
from django import forms
from django.conf import settings
from django.utils.safestring import mark_safe


class ColorPickerWidget(forms.TextInput):
    class Media:
        css = {
            "all": ("%s/%s" % (settings.STATIC_URL, "paintstore/css/colorpicker.css"),)
        }

        js  = (
            ("%s/%s" % (settings.STATIC_URL, "paintstore/jquery_1.7.2.js")),
            ("%s/%s" % (settings.STATIC_URL, "paintstore/colorpicker.js"))
        )

    input_type = 'colorpicker'

    def render(self, name, value, attrs=None):
        script = u"""<script type='text/javascript'>
                        $(document).ready(function(){{
                            $('#{0}').ColorPicker({{
                                onSubmit: function(hsb, hex, rgb, el, parent) {{
                                    $(el).val('#' + hex);
                                    $(el).ColorPickerHide();
                                    $('#{0}').css('background-color', '#' + hex);
                                }},
                                onBeforeShow: function () {{
                                    $(this).ColorPickerSetColor(this.value);
                                }}
                            }}).bind('keyup', function(){{
                                $(this).ColorPickerSetColor(this.value.replace('#', ''));
                            }});
                            $('#{0}').css('background-color', $('#{0}').val());
                        }});
                    </script>
                    """.format(u'id_'+name)

        super_render = super(ColorPickerWidget, self).render(name, value, attrs)
        return mark_safe(u"%s%s" % (super_render, script))
