jquery tokenInput how to change the ajax call url to script dynamically

Question

I'm using this powerful and beautiful plugin http://loopj.com/jquery-tokeninput/, but I encountered a problem.

Is there a way to dynamically change or alter the URL of the ajax call in my tokenInput.

So for example.

jQuery("#selector").tokenInput("http://mysite.com?name=John");

and when I click a button on my page, I wanted to change the url from http://mysite.com?name=John to http://mysite.com?name=Adam

So the whole logic would be something like this one:

jQuery("#myButton").click(function(){
    //Change the URL of the jQuery("#selector").tokenInput();
});

At first what I did was literally like this:

jQuery("#myButton").click(function(){
        jQuery("#selector").tokenInput("http://mysite.com?name=Adam");
});

The problem of doing that one is it creates a duplicate of the class token-input-list-facebook, Just to see what i'm talking about.

From like this:

To

So as you can see, it duplicates the textinput or the class token-input-list-facebook.

I'm just showing you a simple logic of what i'm trying to do in my application.

Is there a way how to do that one? Your help would be greatly appreciated and rewarded! :-)

By the way, i'm using the facebook theme that's why the class name is token-input-list-facebook.

Answer 1

From the code of this component : instead of providing a string as a url, you can give a function which returns a string. So you should be able to write :

function setupMyTokenInput($input, $btn){
   //this "protected" var will hold the target url
   var url = 'http://mysite.com?name=John';

   $input.tokenInput( 
   //instead of a string, give a function which returns the variable's value
   function(){
     return url;
   });

   $btn.click(function(){
       //clicking the button changes the var's value
       url = 'http://mysite.com?name=Adam';
   });
}

$(function(){
   setupMyTokenInput( $('#selector'), $('#button') );
});

I haven't tried it, but something close to this should work.

Answer 2

I solved it by myself. This is what I did.

jQuery("#selector").tokenInput("http://mysite.com?name=John");

jQuery("#myButton").click(function(){
    jQuery(".token-input-list-facebook").remove();
    jQuery("#selector").tokenInput("http://mysite.com?name=Adam");
});

I just remove() the class token-input-list-facebook since that's the class being added every time we initialized the tokenInput. then re-initialize again the tokenInput with the desired ajax URL.

Too bad the I'm not seeing a good documentation in TokenInput's on how to do that one.

Answer 3

The solution was mentioned here: https://github.com/loopj/jquery-tokeninput/pull/77#issuecomment-1291896

pass the callback function to the url:

$("#searchKeywords").tokenInput(function() {
  return 'ajax_scripts/keyword_search.php?gameId=' + $('#gameId').val();
}, {theme: "facebook"});

Answer 4

You need to pass the URL calling a function when you init your tokeninput. Like this

function buildURL(){
    url=[build your url here]
    return url
}

jQuery("#selector").tokenInput(buildURL);

That's all, then when the user press a key tokeinput call to function before call by ajax.

Answer 5

if you want that tokenInput work with ajax here is example for you with handler in asp.net (vb) https://github.com/yanivsuzana/jquery-tokeninput-ajax-asp.net-vb

Answer 6

function buildURL(){
    url=[build your url here]
    return url
}

jQuery("#selector").tokenInput(buildURL);