Django - reload div upon form submit - ajax

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)

Answer 1

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.

Answer 2

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.