DZone
Web Dev Zone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
  • Refcardz
  • Trend Reports
  • Webinars
  • Zones
  • |
    • Agile
    • AI
    • Big Data
    • Cloud
    • Database
    • DevOps
    • Integration
    • IoT
    • Java
    • Microservices
    • Open Source
    • Performance
    • Security
    • Web Dev
DZone > Web Dev Zone > Detect Changes to Spectrum Colorpicker

Detect Changes to Spectrum Colorpicker

In this blog post, we will see how to manage the default value of colorpicker so that we can detect when a color is changed without accidentally detecting changes that never occurred. Let's see how it's done.

Tadit Dash user avatar by
Tadit Dash
·
Apr. 07, 16 · Web Dev Zone · Tutorial
Like (5)
Save
Tweet
4.46K Views

Join the DZone community and get the full member experience.

Join For Free

In this blog post, we will see how to manage the default value of colorpicker so that we can detect if a color is changed.

Background

In my current project, a requirement came to check if there are changes on the page upon a button click and show a modal alerting the user that "There are changes, do you want to save?". I found a script which can be triggered to check the changes on the page. It worked perfectly with all input, select, and textarea controls.

But if I have a colorpicker on the page, then it always told me that you have changes, even if I did not change the color in the picker. Allow me to elaborate. The colorpicker used is Spectrum.

Step by Step

Suppose I have one input, select, and textarea on my page—one button to check if we have any change on these controls, meaning if we edited/changed the field values.

<input />

<select>
    <option value="1">1</option>
    <option value="2" selected="selected">2</option>
    <option value="3">3</option>
</select>

<textarea>Hello World</textarea>

<button onclick="CheckForChanges()">
    Check For Changes
</button>

Now, let’s check the click event code.


function CheckForChanges() {
  if (GetHasChanges()) {
      alert("Yes we have changes!!!");
  } else {
      alert("No changes!!!");
  }
}

I am not posting the GetHasChanges function here, you can see it in the JSFiddle Demo.

So, see the picture below which shows what it looks like before you click the button and what happens after you edit some field and click the button. It's perfectly checking that we have a change.

Image title

Before and After Changes Done

With Colorpicker

Let’s add a colorpicker now.

<input id="colorpicker" style="display:none;" value="#000" />
$(document).ready(function() {
  $('#colorpicker').spectrum({
    preferredFormat: "hex"
  });
});

Demo – Demo With a Colorpicker

As you see in the picture below, everything is perfect.

Image title

Detecting Changes With Colorpicker

Implementing Input Field inside the Colorpicker

This can be done by setting the showInput property to true

$(document).ready(function() {
  $('#colorpicker').spectrum({
    showInput: true,
    preferredFormat: "hex"
  });
});

Image title

Spectrum Colorpicker With ShowInput True

What do we get by doing this? Just a new input field inside the colorpicker so that we can give color hex.

Let’s get back to what we were doing.

Oops! With no change, it is now saying incorrectly that "Yes we have changes!!!".

Image title

Checking changes with ShowInput true in Spectrum Colorpicker

Demo – Demo to check changes with ShowInput true in Spectrum Colorpicker

So, I have not picked any color, but still its detecting changes. What is going on? We will uncover the problem in the next paragraph.

Research

I started research from Developer tool and debugged the method which is checking the changes. What I found was very interesting...

Image title

Debugging GetHasChanges Function in Developer Tool

So, as you see, it is detecting the change for an input. I, then, found it inside the HTML.

<input class="sp-input" type="text" spellcheck="false">

This is the same input which is inside the colorpicker. The problem is that it detected a change because it does not have a default value in place and the value given to it is the color we provided (#000).

Solution

Have you guessed the solution? It’s easy. We just need to provide the default value as the same color value. Thus, it will only detect the change when an actual change is made. The final code can be seen below. Lines 7-9 revealthe code we used to assign the default value.

$(document).ready(function() {
  $('#colorpicker').spectrum({
    showInput: true,
    preferredFormat: "hex"
  });

  $('.sp-container .sp-input').each(function() {
    this.defaultValue = this.value;
  });
});

Demo – Final Demo Detecting Colorpicker Change

Feedback

I would definitely appreciate it if you offer any feedback in the comments. If you find this interesting and useful, then please share it with your friends and colleagues. Thanks!

code style dev IT Requirement POST (HTTP) Property (programming) HTML Event Blog

Published at DZone with permission of Tadit Dash, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • Testing Strategies for Microservices
  • Everything You Need to Know About Web Pentesting: A Complete Guide
  • Java Class Loading: Performance Impact
  • How API Management Can Ease Your Enterprise Cloud Migration

Comments

Web Dev Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • MVB Program
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends:

DZone.com is powered by 

AnswerHub logo