jqueryajaxjquery-tokeninput

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


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:

enter image description here

To

enter image description here

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.


Solution

  • 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.