Edit from the future:
As discussed in the comments, the code is actually right, and the problem is a conflict between the .css files my project is using and the .css files used by tag-it (there seem to be conflicting names). I do not write this as an acceptable answer because I could not find an easy way to remove this conflict (although I know it is possible to do it in principle).
End of edit.
I am trying to use tag-it with my MVC project, but for some reason it is not working.
I have created a view where I have copied a minimal version of the source code provided in the example html by tag-it. I have removed the more complex cases so that it is easier to look through it.
I have jquery.tagit.css and tagit.ui-zendesk.css files in the folder Content. I also have the file tag-it.js in the folder Scripts. The contents of these files are exactly the same as in the tag-it Github.
In my controller for the model I am using I have included the method
public ActionResult PruebaTags()
{
return View();
}
(The model itself is very innocent, just some properties and a constructor.)
I am quite new to web development (HTML, js, MVC...), so it is very possible the mistake is an obvious one (it looks to me as if MVC were not finding the tag-it .js file or something similar?). I have taken some hours already trying to fix this by myself, but I seem to be stuck now.
This is the code in my view:
@{
ViewBag.Title = "PruebaTags";
}
<head>
<meta charset="utf-8">
<title>Tag-it! Example</title>
<!-- INSTRUCTIONS -->
<!-- 2 CSS files are required: -->
<!-- The base CSS and tagit.ui-zendesk.css theme are scoped to the Tag-it widget, so they shouldn't affect anything else in your site, unlike with jQuery UI themes. -->
<link href="~/Content/jquery.tagit.css" rel="stylesheet" type="text/css">
<link href="~/Content/tagit.ui-zendesk.css" rel="stylesheet" type="text/css">
<!-- jQuery and jQuery UI are required dependencies. -->
<!-- (I tried different versions here, the one from the source code and the one from the README.) -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js" type="text/javascript" charset="utf-8"></script>
<!-- The real deal -->
<script src="~/Scripts/tag-it.js" type="text/javascript" charset="utf-8"></script>
<script>
$(function () {
$('#myTags').tagit();
});
</script>
</head>
<body>
<div id="wrapper">
<div id="content">
<hr>
<h3>Minimal</h3>
<form>
<p>
Vanilla example — the absolute minimum amount of code required, no configuration. No autocomplete, either. See the other examples for that.
</p>
<ul id="myTags"></ul>
<input type="submit" value="Submit">
</form>
</div>
</div>
</body>
And this is what the result looks like (note there is no place to write the tags!):
