CODEWITHSUNDEEP
javascriptjqueryjquery-uimulti-select
FeKuLa
FeKuLa

Reputation: 402

jQuery UI Multiselect Next - onChange - remove all, add all

I have jQuery UI Multiselect Next http://quasipartikel.at/multiselect_next I want to fire an event whenever the selection changes in any way.

This example works:

<script type="text/javascript">

$(function(){
$("#countries").multiselect();          
$('#countries').multiselect({ selected: function(event, ui) {change(); } });
$('#countries').multiselect({ deselected: function(event, ui) {change(); } });
});         

function change(){
alert('CHANGE');
}

</script>

When I move an element from a list, the function change() is called. The main problem is when I press "Remove all" or "Add all", because the function is called many times (the number of elements).

Is possible call the function change() only one time, when I press "Remove all" or "Add all"?

Thanks.

Upvotes: 0

Views: 7046

Answers (3)

FeKuLa
FeKuLa

Reputation: 402

I found the solution:

Open ui.multiselect.js

Add following line to selectAll function:

this.element.trigger('change');

Add following line to selectNone function {

this.element.trigger('change');

Add following line to stop function

that.element.trigger('change');

HTML:

<script type="text/javascript">
    $(function(){       
        $("#countries").multiselect();          
        $('#countries').bind('change', function() {alert('Change'); });
        });
</script>

Upvotes: 1

Steven Hunt
Steven Hunt

Reputation: 2321

You could use some sort of timing scheme to filter out the extra calls. Let's assume for a minute that a real human being is not going to be able to trigger the selected or deselected event more than once every 100 milliseconds. You could do the following:

var lastChange = 0;

function change() {

  //get current date, then the number of milliseconds since 1/1/1970
  var curr_date = new Date();
  var n = cur_date.getTime();

  //compute the difference.
  var diff = n - lastChange;

  //update our last change variable.
  lastChange = n;

  //if we're within 100 milliseconds of the last call, ignore.
  if (diff < 100)
     return;

  //proceed as normal.
  alert('change!');
}

You could tweak such an algorithm to meet your needs, I am using 100 milliseconds as an example. I'm not sure there's a cleaner way of doing this since you're basically trying to filter events coming from the UI control itself.

Upvotes: 0

Sender
Sender

Reputation: 6858

i am not sure. but you try jquery.one()

$("#foo").one("click", function() {
  alert("This will be displayed only once.");
});

Upvotes: 0

Related Questions