Quantcast

cannot get div to reload with ajax

Previous Topic Next Topic
 
classic Classic list List threaded Threaded
3 messages Options
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

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

--
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 [hidden email].
To post to this group, send email to [hidden email].
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.
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: cannot get div to reload with ajax

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.

On 3/17/17, Shezan Kazi <[hidden email]> wrote:

> 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!!
>
> --
> 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 [hidden email].
> To post to this group, send email to [hidden email].
> 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.
>

--
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 [hidden email].
To post to this group, send email to [hidden email].
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/CALn3ei1uR6o10C9pVtorFeLVT3dnR86Xx6pQ0ADZVhjw39GO_g%40mail.gmail.com.
For more options, visit https://groups.google.com/d/optout.
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: cannot get div to reload with ajax

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

2017-03-17 13:34 GMT+01:00 Vijay Khemlani <[hidden email]>:

> 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.
>
> On 3/17/17, Shezan Kazi <[hidden email]> wrote:
>> 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!!
>>
>> --
>> 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 [hidden email].
>> To post to this group, send email to [hidden email].
>> 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.
>>
>
> --
> 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 [hidden email].
> To post to this group, send email to [hidden email].
> 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/CALn3ei1uR6o10C9pVtorFeLVT3dnR86Xx6pQ0ADZVhjw39GO_g%40mail.gmail.com.
> For more options, visit https://groups.google.com/d/optout.



--

Cordialement, Coues Ludovic
+336 148 743 42

--
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 [hidden email].
To post to this group, send email to [hidden email].
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/CAEuG%2BTbsf-sR64MtjtqpAO%3DLHTE1u%2BZr9XMos%2BW8HOmiwoLioQ%40mail.gmail.com.
For more options, visit https://groups.google.com/d/optout.
Loading...