使用多个其他脚本放置JQuery脚本?

时间:2017-10-19 08:27:23

标签: jquery html asp.net-mvc typeahead bootstrap-tokenfield

我写了这个脚本

 $.ajax({
     type: "POST",
     url: "/my/GetTagsByID",
     data: {
         Link_ID: LId
     },
     datatype: "json",
     success: function(result) {
         $('#tokenfield-typeahead').val('Success 1, Success 2')
     },
     error: function(jqXHR) {
         alert(jqXHR.status);
     }
 })

问题是,但我不知道SCRIPTS

的确切位置

当我以这种方式提升它时:

<script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="~/Scripts/dist/typeahead.bundle.js"></script>
<link href="~/Scripts/dist/css/tokenfield-typeahead.css" rel="stylesheet" />
<script src="~/Scripts/dist/bootstrap-tokenfield.js"></script>
<link href="~/Scripts/dist/css/bootstrap-tokenfield.css" rel="stylesheet" />

结果如下 enter image description here

这意味着,我可以使用TokenFieldTypeAhead,但它不会替换值$('#tokenfield-typeahead').val('Success 1, Success 2'),这意味着我无法访问jQuery?

但是当我将Jquery脚本的位置切换到此时(将JQUERY移到底部):

<script src="~/Scripts/dist/typeahead.bundle.js"></script>
<link href="~/Scripts/dist/css/tokenfield-typeahead.css" rel="stylesheet" />
<script src="~/Scripts/dist/bootstrap-tokenfield.js"></script>
<link href="~/Scripts/dist/css/bootstrap-tokenfield.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.10.2.js"></script>

我得到以下结果 enter image description here

我无法使用Tokenfield,我再也无法使用TypeAhead

我应该做什么?

添加了新代码 我添加了新代码,似乎JQuery无法将tokenfiled识别为函数 - 我如何解决这个问题,我已经添加了所有必需的引用 - 请参阅下面的代码(我在控制台中得到相同的错误,无论我在哪里测试) - 请运行代码并单击按钮

$('#bt').click(function() {

  $('#tokenfield-typeahead').tokenfield('setTokens', ['blue', 'red', 'white']);

});
<link href="http://sliptree.github.io/bootstrap-tokenfield/dist/css/bootstrap-tokenfield.css" rel="stylesheet" />
<link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="http://sliptree.github.io/bootstrap-tokenfield/dist/bootstrap-tokenfield.js"></script>



<input type="text" class="form-control" id="tokenfield-typeahead" value="Temp 1, Temp 2" data-limit="10" placeholder="Enter tags" />

<button id="bt">Click me</button>

enter image description here

2 个答案:

答案 0 :(得分:4)

  

...这意味着我无法访问jQuery?

不,这根本不是什么意思。这只是意味着val没有按照您的期望行事。

这并不让我感到惊讶。您强烈使用的令牌字段插件可能需要您使用特定于令牌字段的方法来设置值,而不是val非常。看一眼the documentation,似乎是tokenfield('setTokens', ...)

$('#tokenfield-typeahead').tokenfield('setTokens', 'Success 1,Success2');
  

我应该做什么?

在任何插件之前放置jQuery,因为插件需要jQuery才能将它们连接起来;当事情没有按预期发挥作用时,总是将文档称为您的第一个行动;并使用正确的方法来设置&#34;值&#34;在令牌场中。

答案 1 :(得分:0)

找到解决方案 - 感谢T.J建议在控制台中运行脚本

问题是,需要加载Bootstrap.min.js before Tokenfiled(JS) - 这样做解决了问题,现在JQuery可以将Tokenfield识别为函数并按预期工作。我仍然不知道为什么Bootstrap没有加载,因为我在我的_Layout页面和Bundle中有它。无论如何,我将看到如何重新安排我的脚本包 -

由于