cannot get div to reload with ajax

[Shezan Kazi]

hi all,

i am trying to reload a div that is in an {% include %} tag when a form is submitted. This is what i have so far:

the page i am viewing:

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

the included template:

<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>

js

$("#notesTab form").submit(function(event){
 console.log("submitting form")
 // prevent page from being submitted and reloaded
 event.preventDefault();
 $('#notesList').remove();
 console.log('old notes removed')
 //var new_notes = '{% url candidate_notes %}';
 //console.log(new_notes);
 $.ajax({
 url: "{% url candidate_notes %}",
 success: function(data){
 $('#notesColumn').html('data');
 }
 })

views.py

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

urls.py

url(r'item/notes', views.item_notes, name='item_notes'),

Can yomeone please point me in the right direction? Thanks!!

[Vijay Khemlani]

And what error are you getting?

The only weird thing I see at first is

url: "{% url candidate_notes %}",

If your JS file is a standalone file served as a static file then you
have no "url" tag available inside it.

> --
> You received this message because you are subscribed to the Google Groups
> "Django users" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to django-users...@googlegroups.com.
> To post to this group, send email to django...@googlegroups.com.
> Visit this group at https://groups.google.com/group/django-users.
> To view this discussion on the web visit
> https://groups.google.com/d/msgid/django-users/b3fe4cf7-d423-4968-bf53-015db73c37db%40googlegroups.com.
> For more options, visit https://groups.google.com/d/optout.
>

[ludovic coues]

That's your code

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

I'm pretty sure you want to replace the content of notesColumn with
the value of data and not the string data.
I would also use the promise interface, to produce something like
that, with debug code:

$.ajax({url: "{% url candidate_notes %}"})
.done(function(data) {
console.log($('#notesColumn'))
$('#notesColumn').html(data)
})
.fail(function(xhr, errorType, error){
console.warn(errorType, error)
})

> To view this discussion on the web visit https://groups.google.com/d/msgid/django-users/CALn3ei1uR6o10C9pVtorFeLVT3dnR86Xx6pQ0ADZVhjw39GO_g%40mail.gmail.com.

> For more options, visit https://groups.google.com/d/optout.

--

Cordialement, Coues Ludovic
+336 148 743 42