pietà pietà - 1 month ago 31
CSS Question

x-editable not working with bootstrap 3 in django

I'm trying to integrate

x-editable
library in my web application so that I can create editable elements on my page

I have followed the steps in the official link of
X-editable


(Just the
frontEnd
part)

This is my code in my template :

{% 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 %}


and I have integrated this script in the footer of the template :

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


But I don't know why this is not working ?
Any help is really appreciated

EDIT

I have noticed that maybe the problem is due to the id is duplicated because I have a
for loop
and the id must be unique !

How can I avoid this ?

Is there a way to create a class and call all the elements by class? I'm not really good on
css
and
html
.

Thanks in advance

Answer

I have solved this problem by :

  1. change the version of x-editable to 1.5 adapted to bootstrap 3

  2. remove id="pub_date" and switch it by data-name="pub_date"

  3. and put this script :

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

hope that it helps someone else.