title: Set Bootstrap ColorPicker's color from external link
body: <p>I am using bootstrap color picker from: <a href="http://www.eyecon.ro/bootstrap-colorpicker/" rel="nofollow">http://www.eyecon.ro/bootstrap-colorpicker/</a></p>
  
  <p>HTML Code:</p>
  
  <pre><code>&lt;div class="well"&gt;
      &lt;div class="input-append color" data-color="rgb(255, 146, 180)" id="cp3"&gt;
          &lt;input type="text" class="span2" id="colorinput" value="" &gt;
          &lt;span class="add-on"&gt;&lt;i style="background-color: rgb(255, 146, 180)"&gt;&lt;/i&gt;&lt;/span&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;a href="#" id="external-link"&gt;Set Color&lt;/a&gt;
  </code></pre>
  
  <p>JavaScript code for external link:</p>
  
  <pre><code>$('#external-link').click(function(){
      //value = 'rgb(255, 255, 255)';
      value = '#ffffff';
      $('#colorinput').val(value);
      $('#colorinput').next().children().css('background-color',value);
      $('#cp3').colorpicker('setValue', value);
      $('#cp3').colorpicker('show');
      return false;
  });
  </code></pre>
  
  <p>See sample code here: 
  <a href="http://jsfiddle.net/bimaljr/xtSrq/14/" rel="nofollow">http://jsfiddle.net/bimaljr/xtSrq/14/</a></p>
  
  <p>I want to set color picker's color from external link. When you click on "Set Color" link than it will change input box's value and the color of the box. But, after that, when you click on the color box to open the colorPicker than it will show the old color. I want to set it with the color which is in the "value" string.</p>
  
  <p>Currently it's giving error "Cannot call method 'toLowerCase' of undefined". I think the "value" string is not passed via the setColor() or the .colorpicker('setValue', value) function.</p>