6


I have a page with raty divs. With the classic code $('.raty').raty({...}); the plugin works perfectly on these existing divs. But when I load new raty divs thanks to an ajax function, new divs are "not transformed into stars". Could you please help me to find my mistake ?

$.ajax({
    url: '/ws/player/reviews/p/1',
    context: document.body,
    contentType: "application/json; charset=utf-8",
    dataType: "jsonp",
    jsonp: "callback",
    jsonpCallback: "jsonpCallbackfunction",
    success: function(data) {
        $.each(data.response.reviews, function( key, value ) {
            html = '';
            html += '<div class="raty read" data-rating="5"></div>';
            $('#reviews').append(html);
        });

    }
    data: {player_id: player_id, from: $('#reviews').data('from')}
}).done(function() {
    $(this).find('.raty').raty({
        path: '/img/raty/',
        readOnly: true,
        score: function() {return $(this).data('rating');}
    });
});

Although, if I try $(this).find('.raty').html('blablabla'); "blablabla" is correctly written in all my '.raty' divs.

Thank you for you help,

Jeremy

OptimizedQuery
  • 1,262
  • 11
  • 21
Jeremy
  • 73
  • 4
  • You will have to initialize the raty plugin against the dynamically loaded divs in the success callback of the ajax function - either within or after the $.each call. – mccannf Feb 27 '13 at 09:15
  • this is what I thought I were doing with "done" after the ajax call. In this ajax call, as mentioned, if I replace .raty( by .html( it works well. Therefore I don't how to re-initialize the raty plugin ? (I also tried the code into the each function, but it doesn't work either. Moreover, I really want to write ('.raty') once and not '#raty098098' for each div) – Jeremy Feb 27 '13 at 11:05
  • Are you sure your success callback is being called? Try removing the `jsonp:` and `jsonpCallback:` options, and just add `?callback=?` to the end of your url to see if that works. BTW, it works in a fiddle: http://jsfiddle.net/mccannf/Z75xQ/7/ – mccannf Feb 27 '13 at 21:09
  • 1
    Did u ever find a solution for this? – Zabs Oct 21 '13 at 13:17
  • This might help you.. http://stackoverflow.com/questions/19495461/jraty-jquery-plugin-doesnt-seem-to-work-with-ajax-json/19495752#19495752 – Zabs Oct 21 '13 at 14:02

1 Answers1

1

you have done little mistake

see this code

$.ajax({
url: '/ws/player/reviews/p/1',
context: document.body,
contentType: "application/json; charset=utf-8",
dataType: "jsonp",
jsonp: "callback",
jsonpCallback: "jsonpCallbackfunction",
success: function(data) {
    $.each(data.response.reviews, function( key, value ) {
        html = '';
        html += '<div class="raty read" data-rating="5"></div>';
        $('#reviews').append(html);
    });
}
data: {player_id: player_id, from: $('#reviews').data('from')}}).done(function() {
$(this).find('#reviews .raty').raty({ // Changes
    path: '/img/raty/',
    readOnly: true,
    score: function() {return $(this).data('rating');}
});});

Hope, this code will work

Vikram
  • 710
  • 8
  • 12