X编辑不与引导3在Django

工作我想x-editable库在我的web应用程序集成，这样我可以创造我的网页上进行编辑的元素X编辑不与引导3在Django

我按照在X-editable

（只是frontEnd部分）

这是我在我的模板代码：

{% block extra_stylesheets %} 
    <link href="{% static "data_management/plugins/bootstrap/css/bootstrap.min.css" %}" rel="stylesheet" /> 

<link href="{% static 'data_management/plugins/DataTables/media/css/dataTables.bootstrap.min.css' %}" 
    rel="stylesheet"/> 
<link href="{% static 'data_management/plugins/DataTables/extensions/Responsive/css/responsive.bootstrap.min.css' %}" 
    rel="stylesheet"/> 

<link href="{% static 'data_management/plugins/bootstrap-editable/css/bootstrap-editable.css' %}" rel="stylesheet"> 

{% endblock %} 
{% block extra_head_javascript %} 
    <script src="{% static "data_management/plugins/jquery/jquery-1.9.1.min.js" %}"></script> 

<script src="{% static 'data_management/plugins/bootstrap/js/bootstrap.min.js' %}"></script> 

<script src="{% static 'data_management/plugins/bootstrap-editable/js/bootstrap-editable.min.js' %}"></script> 


{% endblock%} 

{% block content %} 
<table class="table table-stripped"> 
             <tr> 
              <th class="text-center">Visit Identifier</th> 
              <th class="text-center">Visit Date<br/> 
               <small style="font-weight: normal;">(Click to change the date) 
               </small> 
              </th> 
</tr> 
             {% for course in course.books_set.all %} 
              <tr> 
               <td class="text-center">{{ course.name }}</td> 
               <td class="text-center"><a href="#" id="pub_date" data-type="combodate" 
                  data-value="1984-05-15" data-format="YYYY-MM-DD" 
                  data-viewformat="DD/MM/YYYY" 
                  data-template="D/MMM/YYYY" data-pk="1" 
                  data-title="Select published Date " 
                  class="editable editable-click editable-open" 
                  data-original-title="" title="" 
                  style="background-color: rgba(0, 0, 0, 0);">12/12/2012</a> 
           </td> 

</tr> 
             {% endfor %} 
            </table> 

{% endblock %}

和我已将此脚本集成在模板的页脚中：

<script> 
    $(document).ready(function() { 
$('#pub_date').editable(); 
}); 
</script>

但我不知道为什么这不起作用？任何帮助，非常感谢

编辑

我注意到，也许问题是由于ID重复，因为我有一个for loop和ID必须是唯一的！

我该如何避免这种情况？

有没有办法创建一个类，并通过类调用所有元素？我对css和html不太擅长。

在此先感谢

来源

2016-10-21 pietà

我已经解决了这个问题，通过：

变化版本的x-editable 1.5适应bootstrap 3
删除id="pub_date"和data-name="pub_date"

并把这个脚本：

<script> 

    $.fn.editable.defaults.mode = 'popup'; 

$(document).ready(function() { 
    $('[data-name=pub_date]').editable(); 
}); 
</script>

希望它可以帮助别人。

来源

2016-10-25 11:05:56

X编辑不与引导3在Django

回答

相关问题