Refresh a div to shows new rating in Django using JQuery and AJAX

Question

I’m new to django and can’t find the way to refresh only the div and that the div shows me current rating with stars. My idea is that user can see average rating and rate something by clicking on the star, and after the click I want stars to show new average rating without refreshing the whole page.

This is the div:

<div id="rating">
    <div class="movierating" id="o_{{ object.id }}">
        <span style="display:none;">{{ object.rating_vote.get_rating }}</span>
        {{ object.rating_vote.get_rating }}
    </div>
</div>

And javascript is:

  <script type="text/javascript" charset="utf-8">
    $(document).ready(function() {  
         $('.movierating').each(function(index){
          $(this).raty({
            readOnly:  false,
            path: "{{ STATIC_URL }}images/",
            start: $(this).children("span:first").text(),
            click: function(score, evt) {
                var vote_url = "/rate/" + this.attr('id').substring(2) + "/" + score + "/";
                var div = this.attr('id');
                $.ajax({
                  url: vote_url,
                  success: function(){
                    alert('Vote successful!);
                $('#rating').load('#rating');
                  },
                });
            }
          });
        });
    });
  </script>

With this code

$('#rating').load('#rating');

I get the whole page into the div, and when I use

$('#rating').load('# rating');

I get only value without the stars.

score 6 · Accepted Answer · edited Apr 10 '16 at 21:51

6

First, copy the code inside the <div id="rating"></div> and save it to another file. Lets say,

rating.html

 <div class="movierating" id="o_{{ object.id }}">
    <span style="display:none;">{{ object.rating_vote.get_rating }}</span>
    {{ object.rating_vote.get_rating }}
</div>

Now in your page, it will be,

your.html

............
<div id="rating">
    {% include 'rating.html' %}
</div>
............

Then, create new view and new url for rating.html

urls.py

url(r'^rating/$', 'rating', name='rating'),

views.py

def rating(request):
    //rating object here

    return render(request, 'rating.html', {
        //call rating object variable here
    })

Finally, in your ajax

.........
$.ajax({
    url: vote_url,
    success: function(){
        alert('Vote successful!);
        $("#rating").load("/app_name/rating/");
    },
});
...........

edited Apr 10 '16 at 21:51

Alex McLean

2,524
5
30
53

answered Apr 10 '13 at 14:45

catherine

22,492
12
61
85

one more question, how to send id from rated object (which object is rated) to a view? – aleksandar Apr 11 '13 at 12:22
in your ajax, you can define GET and data to pass the id to your view – catherine Apr 11 '13 at 12:28
I tried with $('#rating').load($.get("/rating/", {values: values})); where values is id, but the div isn't reloaded – aleksandar Apr 11 '13 at 19:39
No, that's not the correct way to pass a value. Put that in the ajax not in the rating load – catherine Apr 12 '13 at 02:18
if I use $('#rating').load($.get("/rating/", {values: values})); I don't get any error but it doesn't refresh and if I put $.get("/rating/", {values: values}) in ajax, I get 500 INTERNAL SERVER ERROR, "Key 'values' not found in ". I can't figure it out – aleksandar Apr 14 '13 at 14:20
i am following your solution but facing some problem...please have a look http://stackoverflow.com/questions/16335106/django-include-can-not-find-template – Vaibhav Jain May 02 '13 at 10:13

Refresh a div to shows new rating in Django using JQuery and AJAX

1 Answers1

Linked