show default star rating on rateYo jquery star plugin

Question

I want to show a preset value for a star rating and I have already used this but nothing is happening.

<div class='rateYo' data-rateyo-rating='3' data-rateyo-score='4'></div>
<span class='score'>0</span>
<span class='result'>0</span>

$(function () {
  $(".rateyo").rateYo().on("rateyo.change", function (e, data) {
    var rating = data.rating;
    $(this).parent().find('.score').text('score :'+ $(this).attr('data-rateyo-score'));
    $(this).parent().find('.result').text('rating :'+ rating);
   });
}); 

I have an ajax call which on after success does

$.each(arr, function(idx, obj) {
    PAmount = parseFloat(obj['price']) * parseFloat(obj['qty']);
    docc = "<div class='col-md-3'>"+obj['name']+"</div><div class='col-md-2'>"+obj['price']+"</div><div class='col-md-2'>"+obj['qty']+"</div><div class='col-md-2'>"+PAmount.toFixed(2)+"</div><div class='col-md-3 rateYo' data-rateyo-rating='3' data-rateyo-score='4'></div><div class='col-md-12'><br></div>"; 

    $('#productDataDetails'+b).append(docc);
});

Answer 1

Your problem is that your calling the rate plugin before ajax finishes the call , so it won't find any div with rateYo class,

you have to call this last after ajax result was added to dom (after all append ) as below :

I have an ajax call which on after success does

//ajax call function {

$.each(arr, function(idx, obj) {
   PAmount = parseFloat(obj['price']) * parseFloat(obj['qty']);
   docc = "<div class='col-md-3'>"+obj['name']+"</div><div class='col-md-2'>"+obj['price']+"</div><div class='col-md-2'>"+obj['qty']+"</div><div class='col-md-2'>"+PAmount.toFixed(2)+"</div><div class='col-md-3 rateYo' data-rateyo-rating='3' data-rateyo-score='4'></div><div class='col-md-12'><br></div>"; 


    $('#productDataDetails'+b).append(docc);
    
});

$(".rateyo").rateYo().on("rateyo.change", function (e, data) {
    var rating = data.rating;
    $(this).parent().find('.score').text('score :'+ $(this).attr('data-rateyo-score'));
    $(this).parent().find('.result').text('rating :'+ rating);
   
}); 

// } end ajax call 

See example snippet :

$(function() {
  $("#add").on("click", function() {
    docc = "<div><div class='rateYo' data-rateyo-rating='3' data-rateyo-score='1'></div><div class='col-md-12'><br><span class='score'>0</span> <span class='result'>0</span></div></div>";
    console.log("eee");
    $('#productDataDetails').append(docc);
    $(".rateYo").rateYo().on("rateyo.change", function(e, data) {
      var rating = data.rating;
      $(this).parent().find('.score').text('score :' + $(this).attr('data-rateyo-score'));
      $(this).parent().find('.result').text('rating :' + rating);
    });
  });


  $(".rateYo").rateYo().on("rateyo.change", function(e, data) {
    var rating = data.rating;
    $(this).parent().find('.score').text('score :' + $(this).attr('data-rateyo-score'));
    $(this).parent().find('.result').text('rating :' + rating);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/rateYo/2.3.2/jquery.rateyo.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/rateYo/2.3.2/jquery.rateyo.min.js"></script>
<div id="productDataDetails">
  <div>
    <div class='rateYo' data-rateyo-rating='3' data-rateyo-score='4'></div>
    <span class='score'>0</span> 
    <span class='result'>0</span>
  </div>
</div>

<br><br>
<button id="add">add</button>