0

I am having some problem with triggering on change event on jQuery Tokenize select box.I have following code snippet.

<select id="tokenize" multiple="multiple" class="tokenize-sample">
    <option value="1">Employee</option>
    <option value="2">Supplier</option>
    <option value="3">Other</option>
</select>

My requirement is that based on the item select on select box i want to execute a function.(Eg: appear div based on the selected item).Please let me know how can i trigger on change event in jQuery Tokenize select box.

gihan-maduranga
  • 4,381
  • 5
  • 41
  • 74

2 Answers2

1

After looking into the documentation there are couple of events like when a new element is added, when its removed, when its cleared, when its reorderd etc. I will give you the sample of adding and removing the element to trigger a event.

 $('#tokenize').tokenize({
    onAddToken: function(value, text, e){
                  alert('added new item :' + text);
                },
    onRemoveToken: function(value, text, e){
                  alert('removed item :' + text);
                },
 });

EDIT 1: Since you want to add events only for selected page and not all and this piece of code is reused in many places of your application , you can do this.

Define the functions that need to trigger when adding new items, make sure you define the function only in the selected pages and then on the api call check if the function exist.. if exist then execute else not, Below is the sample.

Define a function 

function AddNewItemHandler(value, text, e)
 {
   alert('added new item :' + text);
 }

then the changes in plugin must be something like below.

 $('#tokenize').tokenize({
    onAddToken: function(value, text, e){
                  if ($.isFunction(AddNewItemHandler)) { // check if func exists
                   AddNewItemHandler(value, text, e); // if true execute it
                  }
                }        
 });

So other pages will not have function defined and hence will not execute it..

Rajshekar Reddy
  • 18,647
  • 3
  • 40
  • 59
  • no this one https://www.zellerda.com/projects/jquery/tokenize it support multiple items select but my requirement is that i want to execute some logic on select item each time items added. – gihan-maduranga Feb 25 '16 at 11:21
  • Check my updated answer. And everything is in the documentation, Make sure you read the doc's completely when ever you are dealing with pluin'g as you will find everything you need there itself. – Rajshekar Reddy Feb 25 '16 at 11:29
  • this works but the problem is that when i called this function it add new select box also .in my case this API used several pages but i want this feature for one single page.if i modify this on API level its affect all of my other pages. – gihan-maduranga Feb 25 '16 at 11:38
  • 1
    See the issue is , its not a dropdown anymore, the plugin changes it into ul and li tags, and for the events you cant bind (or is complex work) as its a part of the plugin. What you can do is add a conditional check and then execute required functionalities. Like if its the desired page or not.. then do it – Rajshekar Reddy Feb 25 '16 at 11:43
  • @gihan I updated my answer with solution to your problem.Check and let me know – Rajshekar Reddy Feb 25 '16 at 11:51
  • I am also using this jquery tokenize() but on one page two tokenize inputs not working. Can anyone have knowledge about this? Please help on this. Thank you in advance! – Mitali Patel Mar 30 '22 at 14:27
0
$("#tokenize").change(function () {
    var value = $(this).children(":selected").val();
    if (value == 1) {
        $('#someDIv').show();
    }
    else if (value == 2) {
        $('#someDIv').hide();
    }
    else {
        //do something her
    }
});
Ibrahim Khan
  • 20,616
  • 7
  • 42
  • 55
santosh
  • 799
  • 5
  • 17