Question

I’m working on a colorpicker.
My idea is to update a MySQL database thru Ajax requests, while clicking a color inside a colorpicker.
I’m using farbtastic colorpicker.
My problem is that if you move mouse while the button is down, I have a lot of requests, because the color is changing (I hope it’s clear what happens).
This is my code:

$('.colorpicker').live('click', function() {
    $this = $(this);
    $.farbtastic('#picker').linkTo(function(color){
            $this.css({'backgroundColor':color});
            $.ajax({
                    type:"GET",
                    url:"data.php?color="+color,
                    success: function(data){
                    /* SOME EVENTS */
                    }
            });
    });
    return false;
});

.colorpicker it’s my div (where I change background color)

#picker it’s the farbstatic colorpicker

How to “skip” all (AJAX) requests while clicking and moving mouse? I want to catch only the last request just before “mouseup”?

Answer 1

I would either use a hidden field or javascript variable to capture the color selected and then on mouse up fire off the ajax request. Something like this:

var colorselected = null;

$('.colorpicker').live('click', function() {
  $this = $(this);
  $.farbtastic('#picker').linkTo(function(color){
        $this.css({'backgroundColor':color});
        colorselected = color;
  });
  return false;
});

$("#picker").mouseup(function() {
  $.ajax({
    type:"GET",
     url:"data.php?color="+colorselected,
      success: function(data){
       /* SOME EVENTS */
       }
  });
});

This should avoid all of the unnecessary ajax requests.