jquery tokenInput如何将ajax调用url动态更改为脚本

Posted 2023-05-09

【中文标题】jquery tokenInput如何将ajax调用url动态更改为脚本

【英文标题】：jquery tokenInput how to change the ajax call url to script dynamically

【发布时间】：2012-09-18 07:20:05

【问题描述】：

我正在使用这个强大而漂亮的插件http://loopj.com/jquery-tokeninput/，但是遇到了一个问题。

有没有办法在我的 tokenInput 中动态更改或更改 ajax 调用的 URL。

例如。

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

当我点击页面上的按钮时，我想将网址从 http://mysite.com?name=John 更改为 http://mysite.com?name=Adam

所以整个逻辑应该是这样的：

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

一开始我的做法是这样的：

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

这样做的问题是它创建了 token-input-list-facebook 类的副本，只是想看看我在说什么。

从这样的：

收件人

如您所见，它复制了 textinput 或 token-input-list-facebook 类。

我只是向您展示我在我的应用程序中尝试执行的操作的简单逻辑。

有没有办法做到这一点？您的帮助将不胜感激和奖励！ :-)

顺便说一句，我使用的是 facebook 主题，这就是为什么类名是 token-input-list-facebook。

【参考方案1】：

我自己解决了。这就是我所做的。

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");
);

我只是 remove() 类 token-input-list-facebook 因为这是每次我们初始化 tokenInput 时添加的类。然后使用所需的 ajax URL 再次重新初始化 tokenInput。

太糟糕了，我在 TokenInput 中没有看到关于如何做到这一点的好文档。

【参考方案2】：

从该组件的代码中：您可以提供一个返回字符串的函数，而不是提供一个字符串作为 url。所以你应该可以写：

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') );
);

我还没有尝试过，但接近这个的东西应该可以工作。

【参考方案3】：

这里提到了解决方案： https://github.com/loopj/jquery-tokeninput/pull/77#issuecomment-1291896

将回调函数传递给url：

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

【参考方案4】：

您需要在初始化令牌输入时传递调用函数的 URL。像这样

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


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

就是这样，那么当用户按下一个键tokeinput调用函数之前，通过ajax调用。

【参考方案5】：

如果您希望 tokenInput 与 ajax 一起使用 这是给你的例子 在 asp.net (vb) 中使用处理程序 https://github.com/yanivsuzana/jquery-tokeninput-ajax-asp.net-vb

【讨论】：

在此处添加相关代码会很有帮助，以防链接随时间发生变化。这将使您的答案更加完整。

【参考方案6】：

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


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