Search code examples
djangobootstrap-4popoverdjango-2.2

bootstrap popover with form in data-content working in Django 1.11 and 2.0 but not in Django 2.1-3.1


I have code below and it is working as it should in django 1.11 and after upgrading it works in django 2.0 but for some reason it is not working in higher versions of django starting from 2.1 till 3.1.4.

<button 
      type="button" 
      class="btn btn-sm btn-secondary" 
      id="dodaj-poziv-za-clanove-tijela" 
      data-container="body" 
      data-toggle="popover" 
      title="Da li želite da dodate članove tijela u sastanak ?"
      data-content=
      "<form method='POST' action='{% url 'poziv_clanovi_dodaj' poziv_id=poziv.id %}'>
          <button type='submit' class='btn btn-success btn-sm clanovi float-right'>Dodaj</button>
          {% csrf_token %}
        </form>"
      > Dodaj poziv za članove tijela</button>

In browser this button looks normal for working django versions 1.11 and 2.0 but in those that are not witch is every version above 2.0 including 2.1,2.2 and 3.0,3.1 it button has "> in it and after submitting i get csrf token error


Solution

  • I found a solution here How to use Django {% csrf_token %} in bootstrap popver

    Strange thing that {% csrf_token %} works in django 1.11 and django 2.0 but since django 2.1 you have to go with <input type="hidden" name="csrfmiddlewaretoken" value="{{ csrf_token }}" > instead

    Now my working popover looks like:

    <button 
      type="button" 
      class="btn btn-sm btn-secondary" 
      id="dodaj-poziv-za-clanove-tijela" 
      data-container="body" 
      data-toggle="popover" 
      title="Da li želite da dodate članove tijela u sastanak ?"
      data-content=
      "<form method='POST' action='{% url 'poziv_clanovi_dodaj' poziv_id=poziv.id %}'>
    
          <button type='submit' class='btn btn-success btn-sm clanovi float-right'>Dodaj</button>
          <input type='hidden' name='csrfmiddlewaretoken' value='{{ csrf_token }}' >
        </form>
        "
      >Dodaj poziv za članove tijela</button>