Fatal编程技术网
  • javascript/
  • Javascript 将JQuery Tokeninput或Tagit与Django一起使用

Javascript 将JQuery Tokeninput或Tagit与Django一起使用

javascript jquery django

Javascript 将JQuery Tokeninput或Tagit与Django一起使用,javascript,jquery,django,jquery-tokeninput,tag-it,Javascript,Jquery,Django,Jquery Tokeninput,Tag It,我正在尝试将jquery令牌输入与django一起使用。我尝试使用来自的“简单本地数据搜索”示例。它在我的代码中不起作用。我已经下载了这个示例，并将css和js文件粘贴到了我的静态文件夹中，这些文件确实被加载到了我的模板中，但我只是无法让它工作。这是正在工作的demo.html文件 <html> <head> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquer

我正在尝试将jquery令牌输入与django一起使用。我尝试使用来自的“简单本地数据搜索”示例。它在我的代码中不起作用。我已经下载了这个示例，并将css和js文件粘贴到了我的静态文件夹中，这些文件确实被加载到了我的模板中，但我只是无法让它工作。这是正在工作的demo.html文件

<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js">    </script>
<script type="text/javascript" src="src/jquery.tokeninput.js"></script>

<link rel="stylesheet" href="styles/token-input.css" type="text/css" />
<link rel="stylesheet" href="styles/token-input-facebook.css" type="text/css" />

<script type="text/javascript">
$(document).ready(function() {
    $("input[type=button]").click(function () {
        alert("Would submit: " + $(this).siblings("input[type=text]").val());
    });
});
</script>
</head>

<body>
<h1>jQuery Tokeninput Demos</h1>


<h2>Simple Local Data Search</h2>
<div>
    <input type="text" id="demo-input-local" name="blah" />
    <input type="button" value="Submit" />
    <script type="text/javascript">
    $(document).ready(function() {
        $("#demo-input-local").tokenInput([
            {id: 7, name: "Ruby"},
            {id: 11, name: "Python"},
            {id: 13, name: "JavaScript"},
            {id: 17, name: "ActionScript"},
            {id: 19, name: "Scheme"},
            {id: 23, name: "Lisp"},
            {id: 29, name: "C#"},
            {id: 31, name: "Fortran"},
            {id: 37, name: "Visual Basic"},
            {id: 41, name: "C"},
            {id: 43, name: "C++"},
            {id: 47, name: "Java"}
        ]);
    });
    </script>
</div>
</body>
</html>


$（文档）.ready（函数（）{
$（“输入[类型=按钮]”）。单击（函数（）{
警报（“将提交：”+$（this）.sibbins（“输入[type=text]”）.val（））；
});
});
jQuery令牌输入演示
简单本地数据搜索
$（文档）.ready（函数（）{
$（“#演示输入本地”）.tokenInput([
{id:7，名称：“Ruby”}，
{id:11，名称：“Python”}，
{id:13，名称：“JavaScript”}，
{id:17，名称：“ActionScript”}，
{id:19，名称：“Scheme”}，
{id:23，名称：“Lisp”}，
{id:29，姓名：“C#”}，
{id:31，名称：“Fortran”}，
{id:37，名称：“Visual Basic”}，
{id:41，姓名：“C”}，
{id:43，名称：“C++”}，
{id:47，名称：“Java”}
]);
});
现在，这个演示运行良好。我在模板中使用了相同的代码，但根本不起作用。这是我的模板代码-

{% extends "base.html" %}
{% load django_markdown %}

{% load crispy_forms_tags %}
{% block content %}

{{form.media}}

<h2>Simple Local Data Search</h2>
<div>
    <input type="text" id="demo-input-local" name="blah" />
    <input type="button" value="Submit" />
    <script type="text/javascript">
    $(document).ready(function() {
        alert('working');
        $("#demo-input-local").tokenInput([
            {id: 7, name: "Ruby"},
            {id: 11, name: "Python"},
            {id: 13, name: "JavaScript"},
            {id: 17, name: "ActionScript"},
            {id: 19, name: "Scheme"},
            {id: 23, name: "Lisp"},
            {id: 29, name: "C#"},
            {id: 31, name: "Fortran"},
            {id: 37, name: "Visual Basic"},
            {id: 41, name: "C"},
            {id: 43, name: "C++"},
            {id: 47, name: "Java"}
        ]);
    });
    </script>
</div>
{% endblock %}

{%extends“base.html”%}
{%load django_markdown%}
{%load crispy_forms_tags%}
{%block content%}
{{form.media}
简单本地数据搜索
$（文档）.ready（函数（）{
警报（“工作”）；
$（“#演示输入本地”）.tokenInput([
{id:7，名称：“Ruby”}，
{id:11，名称：“Python”}，
{id:13，名称：“JavaScript”}，
{id:17，名称：“ActionScript”}，
{id:19，名称：“Scheme”}，
{id:23，名称：“Lisp”}，
{id:29，姓名：“C#”}，
{id:31，名称：“Fortran”}，
{id:37，名称：“Visual Basic”}，
{id:41，姓名：“C”}，
{id:43，名称：“C++”}，
{id:47，名称：“Java”}
]);
});
{%endblock%}
这是base.html文件，该文件从中扩展。它包含所有必要的标题-

<head>
 <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
{{ form.media }}
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript" src="/static/js/jquery.tokeninput.js"></script>
  <script src="/static/js/djtokeninput.js"></script>
  <script src="/static/js/jquery-tokeninput-1.6.0-min.js"></script>
  <script type="text/javascript">
$(document).ready(function() {
    $("input[type=button]").click(function () {
        alert("Would submit: " + $(this).siblings("input[type=text]").val());
    });
});
</script>
 <link rel="stylesheet" href="/static/css/token-input.css">
<link rel="stylesheet" href="/static/css/token-input-facebook.css" type="text/css" />
<link rel="icon" href="{% static 'img/favicon.ico' %}">
</head>


{{form.media}
$（文档）.ready（函数（）{
$（“输入[类型=按钮]”）。单击（函数（）{
警报（“将提交：”+$（this）.sibbins（“输入[type=text]”）.val（））；
});
});
javascript函数正在运行，当我单击submit时，我还能够从base.html获取“将提交”警报框。但我没有得到任何其他tokeninput功能

我试着用TagIt很好。简单的代码。正在加载所有js和css文件。我在tag it docs和django模板中修改的示例文件中有完全相同的代码，下面是结果的差异- 首先是my example.html文件-

这是我的django页面，使用相同的代码

我不知道为什么会这样

newbase.html-

 <head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <meta name="description" content="">
 <meta name="author" content="">
 {{ form.media }}

<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="/static/js/tag-it.js" type="text/javascript" charset="utf-8"></script>

<script>
    $(function(){
        var sampleTags = ['c++', 'java', 'php', 'coldfusion', 'javascript', 'asp', 'ruby', 'python', 'c', 'scala', 'groovy', 'haskell', 'perl', 'erlang', 'apl', 'cobol', 'go', 'lua'];



        //-------------------------------
        // Preloading data in markup
        //-------------------------------
        $('#myULTags').tagit({
            availableTags: sampleTags, // this param is of course optional. it's for autocomplete.
            // configure the name of the input field (will be submitted with form), default: item[tags]
            itemName: 'item',
            fieldName: 'tags'
        });

        //-------------------------------
        // Tag events
        //-------------------------------
        var eventTags = $('#eventTags');

        var addEvent = function(text) {
            $('#events_container').append(text + '<br>');
        };

        eventTags.tagit({
            availableTags: sampleTags,
            beforeTagAdded: function(evt, ui) {
                if (!ui.duringInitialization) {
                    addEvent('beforeTagAdded: ' + eventTags.tagit('tagLabel', ui.tag));
                }
            },
            afterTagAdded: function(evt, ui) {
                if (!ui.duringInitialization) {
                    addEvent('afterTagAdded: ' + eventTags.tagit('tagLabel', ui.tag));
                }
            },
            beforeTagRemoved: function(evt, ui) {
                addEvent('beforeTagRemoved: ' + eventTags.tagit('tagLabel', ui.tag));
            },
            afterTagRemoved: function(evt, ui) {
                addEvent('afterTagRemoved: ' + eventTags.tagit('tagLabel', ui.tag));
            },
            onTagClicked: function(evt, ui) {
                addEvent('onTagClicked: ' + eventTags.tagit('tagLabel', ui.tag));
            },
            onTagExists: function(evt, ui) {
                addEvent('onTagExists: ' + eventTags.tagit('tagLabel', ui.existingTag));
            }
        });

    });
</script>

<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/flick/jquery-ui.css">
<link href="/static/css/jquery.tagit.css" rel="stylesheet" type="text/css">
<link href="/static/css/tagit.ui-zendesk.css" rel="stylesheet" type="text/css">
<link rel="icon" href="{% static 'img/favicon.ico' %}">

<title>Pythonic Verses</title>

<!-- Bootstrap core CSS -->
<link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet">

<!-- Custom styles for this template -->
<link href="{% static 'css/starter-template.css' %}" rel="stylesheet">
</head>


{{form.media}
$（函数（）{
var sampleTags=['c++'、'java'、'php'、'coldfusion'、'javascript'、'asp'、'ruby'、'python'、'c'、'scala'、'groovy'、'haskell'、'perl'、'erlang'、'apl'、'cobol'、'go'、'lua']；
//-------------------------------
//在标记中预加载数据
//-------------------------------
$（“#myULTags”）.tagit({
availableTags:sampleTags，//此参数当然是可选的。它用于自动完成。
//配置输入字段的名称（将与表单一起提交），默认值：项[标记]
itemName:'项目'，
字段名：“标记”
});
//-------------------------------
//标记事件
//-------------------------------
var eventTags=$（“#eventTags”）；
var addEvent=函数（文本）{
$（“#事件_容器”）。追加（text+”
”；
};
eventTags.tagit({
可用标签：样本标签，
添加之前：函数（evt、ui）{
如果（！ui.duringInitialization）{
addEvent（'beforeTagAdded:'+eventTags.tagit（'tagLabel'，ui.tag））；
}
},
后加：函数（evt、ui）{
如果（！ui.duringInitialization）{
addEvent（'Aftertaged:'+eventTags.tagit（'tagLabel'，ui.tag））；
}
},
删除之前：函数（evt、ui）{
addEvent（'beforeTagRemoved:'+eventTags.tagit（'tagLabel'，ui.tag））；
},
后处理删除：函数（evt、ui）{
addEvent（'PostAgremoved:'+eventTags.tagit（'tagLabel'，ui.tag））；
},
onTagClicked：函数（evt、ui）{
addEvent（'onTagClicked:'+eventTags.tagit（'tagLabel'，ui.tag））；
},
onTagExists：函数（evt、ui）{
addEvent（'onTagExists:'+eventTags.tagit（'tagLabel'，ui.existingTag））；
}
});
});
蟒蛇诗
如果您想使用“从预定义列表中选择多个项目”，使用“自动完成”，我可以建议您尝试使用JQuery标记它，因为我发现它非常简单和简单easy@CY5，我也试过用它，即使它不起作用，我只是按照文档做，没有做任何更改，但仍然没有任何效果，我将添加有问题的详细信息。是否有理由引用三个不同版本的jQuery？这可能不是一件好事。@Chris我已经编辑了代码并删除了除最新版本之外的所有代码，我把它们放在这里是为了看看它是否适用于任何人。开发人员控制台中是否有错误？如果要使用从预定义列表中选择多个项目，使用自动完成，我可以建议您尝试使用JQuery标记它，因为我发现它非常简单和简单easy@CY5，我也试着使用它，即使它不起作用，我只是按照文档进行操作，没有做任何更改，但仍然没有任何更改