Placement of JQuery Scripts with multiple other scripts?

Question

I wrote this script

 $.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);
     }
 })

The issue is but I don't know what should be the exact location of SCRIPTS

When I up it in this way:

<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" />

The results are the following

This means, I can use TokenField and TypeAhead but it is not replacing values $('#tokenfield-typeahead').val('Success 1, Success 2') which means I cannot access jQuery?

But when I switch location for Jquery script to this (moving JQUERY to the bottom):

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

I get the following results

I cannot use Tokenfield, I cannot use TypeAhead anymore.

What am I supposed to do?

Added new code I have added the new code, it seems like JQuery is unable to recognise tokenfiled as a function - How can I resolve this where i have added all required references - See the code below (i am getting same error in console and no matter where I test) - Please run the Code and click the button

$('#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>

score 4 · Answer 1 · answered Oct 19 '17 at 08:33

4

...which means I cannot access jQuery?

No, it doesn't mean that at all. It just means that val isn't doing what you expect.

That doesn't surprise me. It's extremely likely that the tokenfield plugin you're using needs you to use a tokenfield-specific method to set the values, not val. Glancing at the documentation, it seems to be tokenfield('setTokens', ...):

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

What am I supposed to do?

Put jQuery before any plugins, since the plugins need jQuery to be there in order to hook themselves up; always refer to documentation as your first action when things don't work as expected; and use the correct method for setting the "value" in the tokenfield.

answered Oct 19 '17 at 08:33

T.J. Crowder

1,031,962
187
1,923
1,875

I have looked again very deeply and trying to do this `$('#tokenfield-typeahead').tokenfield('setTokens', ['blue', 'red', 'white']);` but still no Luck – Ali Oct 19 '17 at 08:50
1

@aliusman: Please update your question with a **runnable** [mcve] demonstrating the problem, using Stack Snippets (the `[<>]` toolbar button), being sure to link all libs from the provided list or a CDN (like https://cdnjs.com/). – T.J. Crowder Oct 19 '17 at 08:54
I get the following error :( "message": "Uncaught SyntaxError: missing ) after argument list", – Ali Oct 19 '17 at 09:09
@aliusman: That's because you have a missing `)` after your argument list. Seriously, it's a basic syntax error, you should be able to resolve it yourself. – T.J. Crowder Oct 19 '17 at 09:11
sorry, yes, but i get an error, it says `$(...).tokenfield is not a function` – Ali Oct 19 '17 at 09:18
@aliusman: Open the web console and deal with the error there. – T.J. Crowder Oct 19 '17 at 09:23
ok but why i have lost so much REP for this question? I thought my question was well written with code and screenshots – Ali Oct 19 '17 at 10:18
Please see my code above, if you run and click the button, I get the same error here I get in my local browser console – Ali Oct 19 '17 at 15:15
@aliusman: Again: Open the web browser console (Ctrl+Shift+I, or F12, or on a Mac Cmd+Shift+I), and deal with the errors there. It's the same error as the last time I posted this comment, just on different resources. – T.J. Crowder Oct 19 '17 at 17:05
T.J ok thank you, what I am trying to understand why the error is showing up in stakoverflow's code snippet, it looks like it is universal and I all the solutions I get is to add jQuery.ui but that doesn't resolve the issue, any idea what is causing the issue, sorry to be annoying – Ali Oct 19 '17 at 23:27

score 0 · Accepted Answer · answered Oct 20 '17 at 06:10

Found the solution - Thanks for T.J to advising run the script in console

The issue was, Bootstrap.min.js needed to be loaded before Tokenfiled (JS) - Doing that fixed the issue and now JQuery can identify Tokenfield as a function and works as intended. I still don't under why Bootstrap was not loading because I had it in my _Layout page and in the Bundle. In any case i will see how can i re-arrange my script bundles -

Thanks

Placement of JQuery Scripts with multiple other scripts?

2 Answers2