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>

Answer 1

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

Answer 2

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