javascript - bootstrap 标签输入加载失败

标签 javascript jquery css django twitter-bootstrap

我有一个 Django 应用程序,它使用 jqueryinput field 中加载标签,如代码所示。在运行代码时,我观察到应用程序无法找到 bootstrap-tagsinput.cssbootstrap-tagsinput.js。我应该将这些文件放在哪里,以便可以检测到它们。

错误

[28/Feb/2018 12:14:23]  "GET /scripts/bootstrap-tagsinput.css HTTP/1.1" 404 2191
Not Found: /scripts/bootstrap-tagsinput.js
[28/Feb/2018 12:14:23] "GET /scripts/bootstrap-tagsinput.js HTTP/1.1" 404 2188
Not Found: /scripts/bootstrap-tagsinput.js
[28/Feb/2018 12:14:23] "GET /scripts/bootstrap-tagsinput.js HTTP/1.1" 404 2188

元素目录结构

<project_name>
|--<app_name>
|     |--templates
|            |--index.html
|--<project_name>
|--scripts
|     |--bootstrap-tagsinput.css
|     |--bootstrap-tagsinput.js
|--manage.py

代码

<!DOCTYPE html>
<html lang="en">
<head>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css">

    <link rel="stylesheet" href="../scripts/bootstrap-tagsinput.css">

    <title>Sample</title>

</head>

<body>

    <input type="text" id="tagbar" />

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

    <script src="../scripts/bootstrap-tagsinput.js"></script>

    <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $('#tagbar').tagsinput('add', { "value": 1 ,"text": "Amsterdam"  ,"continent": "Europe"    });
            $('#tagbar').tagsinput('add', { "value": 2 ,"text": "Washington" ,"continent": "America"   });
            $('#tagbar').tagsinput('add', { "value": 3 ,"text": "Sydney"     ,"continent": "Australia" });
            $('#tagbar').tagsinput('add', { "value": 4 ,"text": "Beijing"    ,"continent": "Asia"      });
            $('#tagbar').tagsinput('add', { "value": 5 ,"text": "Cairo"      ,"continent": "Africa"    });
         });
      </script>
</body>
</html>

最佳答案

在 Django 中,您需要将静态文件(css、js)放在 static 目录中,如 https://docs.djangoproject.com/en/2.0/howto/static-files/ 中所述。

关于javascript - bootstrap 标签输入加载失败,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49030093/

相关文章:

javascript - 创建一个元史诗,其工作方式类似于combineEpics,但根据 namespace 选择一个史诗

javascript - 使用 Meteor-ui-progress-circle(访问在 HTML 中创建的模板变量)

javascript - &lt;script&gt; block 的视差效果

javascript - 在 HTML 中使用 token 时 CSRF 保护的意义是什么

javascript - 网格无法正常工作

javascript - 邮政编码输入可以在全局范围内验证吗?

python - Django嵌套表单集动态添加表单

css - 需要创建响应式内容悬停元素的技巧

css - 在 React 中使用 setState 更改样式属性

html - Unicode 字符对齐