Django - reload div upon form submit

Question

I am trying to refresh a certain div in a django application when a form is submitted.

index.html

<div class="col-md-8" id="notesColumn">
  {% crispy note_form %}
  {% include 'item/item_notes.html' %}
</div>

item_notes.html

<div class="panel-group panel-group-simple m-b-0" id="notesList" aria-multiselectable="true" role="tablist">
    {% for note in object.itemnote_set.all reversed %}
        <div class="panel">
            <div class="panel-heading" id="noteHeading{{ forloop.counter }}" role="tab">
                <a class="panel-title collapsed" data-parent="#notesList"
                   data-toggle="collapse" href="#noteCollapse{{ forloop.counter }}"
                   aria-controls="noteCollapse{{ forloop.counter }}" aria-expanded="false">
                    <span class="tag tag-default">{{ note.owner.first_name }}</span>
                    {{ note.get_action_display|upper }}
                    <small class="panel-actions">{{ note.date_added }}</small>
                </a>
            </div>
            <div class="panel-collapse collapse" id="noteCollapse{{ forloop.counter }}"
                 aria-labelledby="noteHeading{{ forloop.counter }}" role="tabpanel" aria-expanded="false"
                 style="height: 0px;">
                <div class="panel-body">
                    {{ note.content }}
                </div>
            </div>
        </div>
    {% endfor %}
</div>

app.js (included in index.html)

$(document).ready(function () {
  $("#notesTab form").submit(function(event){
      event.preventDefault();

  $('#notesList').remove();

  $.ajax({
    url: "{% url item_notes %}",
    success: function(data){
      $('#notesColumn').html('data');
    }
  })
})

views.py

def item_notes(request):
  return render_to_response(request, 'candidate/candidate_notes.html')

urls.py

url(r'item/profile/(?P<pk>[0-9]+)/$', views.ItemProfile.as_view(), name='item_profile'),
  url(r'item/notes', views.item_notes, name='item_notes'),

The error I get from chrome is:

http://127.0.0.1:8000/crm/item/profile/45/%7B%%20url%20item_notes%20%%7D 
Failed to load resource: the server responded with a status of 404 (Not Found)

Have you tried this: {% url 'item_notes' %}. Note the quotes surrounding item_notes. — nik_m
– nik_m, Commented Mar 17, 2017 at 9:44
Yes I did try this. It gave me this error: GET 127.0.0.1:8000/crm/item/profile/45/… 404 (Not Found) send @ jquery.js:9175 ajax @ jquery.js:8656 (anonymous) @ candidate_details.js:15 dispatch @ jquery.js:4737 elemData.handle @ jquery.js:4549 — Shezan Kazi
– Shezan Kazi, Commented Mar 17, 2017 at 9:46
Maybe you are missing a forward slash inside url(r'item/notes/', ...) — nik_m
– nik_m, Commented Mar 17, 2017 at 9:48

Daniel Roseman · Accepted Answer · 2017-03-17 09:49:14Z

3

You can't use Django template tags in your external JS file - Django does not parse that file, which is why you can see the literal tag being appended to your Ajax URL.

You will need to set that value as a global JS var inside an inline script in your template itself.

answered Mar 17, 2017 at 9:49

Daniel Roseman

602k68 gold badges911 silver badges924 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Shezan Kazi Over a year ago

thank you, didn't know that. Which value do I need to set as a gobal JS var? The "r'item/notes"?

RodrigoDela Over a year ago

You can just use the template tag url, just in your index.html: <script> var url = '{%url 'item_notes' %}';</script> and than use the variable url in your script.

Özer · Accepted Answer · 2017-03-17 14:43:07Z

0

First, try to use an absolute URL to see, if it's the URL that causes the error:

  $.ajax({
    url: "item/notes",
    success: function(data){
      $('#notesColumn').html('data');
    }
  })

Second, why do you GET the notes URL? Aren't you using 'item_profile' for that? In that case, try to GET that URL:

  $.ajax({
    url: "item/profile/" + "{{ object.pk }}",
    success: function(data){
      $('#notesColumn').html('data');
    }
  })

Third, check you JS code, you are missing a closing bracket on $("#notesTab form").submit.

Fourth, try to escape the URL. I am not sure which method to use in JS, but I had that problem multiple times where it broke because of unescaped code.

These are just some tips of the top of my head. Hope that helps.

answered Mar 17, 2017 at 14:43

Özer

2,11420 silver badges23 bronze badges

1 Comment

Shezan Kazi Over a year ago

Thanks Özer! including the {{ object.pk }} does not work since django does not seem to include these template tags.

Collectives™ on Stack Overflow

Django - reload div upon form submit

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related