х-редактируемые не работает с начальной загрузки 3 в Джанго

Question

Я пытаюсь интегрировать x-editable библиотеку в моем веб-приложения, так что я могу создавать редактируемые элементы на моей странице

Я следовал шаги в official link из 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> 

Но я не знаю, почему это не работает? Любая помощь очень ценится

EDIT

Я заметил, что, возможно, проблема связана с идентификатором дублируется, потому что у меня есть for loop и идентификатор должен быть уникальным!

Как я могу избежать этого?

Есть ли способ создать класс и вызвать все элементы по классам? Я не очень хорош на css и html.

Заранее спасибо

Answer 1

Я решил эту проблему путем:

1. изменить версию x-editable 1.5 адаптирован к bootstrap 3

2. удалить id="pub_date" и переключить его data-name="pub_date"

3. и положите этот скрипт:

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

надеюсь, что это помогает кто-то другой.