Search code examples
phpjqueryajaxcodeigniterrating

Cant get the value in div class="rateit" readonly mode after ajax call

I am using Jquery RateIt plugin with the view more button. so In my project i am showing restaurant rating with these plugin by default i am displaying first 5 rating.Then after 5 records i am displaying other content through ajax so in the content loded through ajax rating is not being showd i am using readonly mode..If anyone can help thanks in advance 

foreach($list_review as $row): ?>
 <div class="user_reviews_data">
       <div class="width-20 float-left">
           <span class="padleft-10"><?php echo $row->User; ?> </span>
              <br/>
             <span class="padleft-10">
    **<div class="rateit" data-rateit-value="<?php echo $row->Rating;?>" data-rateit-ispreset="true" data-rateit-readonly="true"></div>**
    </span>
          <div class="muted padleft-10 float-left"><small><?php echo date('dS M Y' ,strtotime($row->CreatedDate)); ?></small></div>
           </div>
                 <div class="width-80 float-left"><?php echo $row->Feedback;?></div>
                        <span class="report_span"><a href="<?php echo site_url('report_form/index/review/'.$rest_detail->Id.'/'.$row->Id);?>" class="pop-up" data-element_id="<?php echo $row->Id; ?>">Report this Feedback <img src="<?php echo base_url();?>themes/images/FLAG_GREY.png"></a></span>    
                  </div>
        <?php 
            $msg_id=$row->Id;
            endforeach;?>  
                        </div>

        <div id="more<?php echo $msg_id; ?>" class="btn-container center_text morebox">
                        <a href="javascript:;" class="more btn orange_signup" id="<?php echo $msg_id; ?>" data-restid="<?php echo $rest_detail->Id; ?>" title="view more">View More</a>
          </div>

Now code of jquery 

/*view More Button*/
    $('.more').live("click",function() 
    {
        var this_tag = $(this);
        var ID = $(this).attr("id");
        if(ID)
    {
        $.post(siteUrl+"ajax/ajax_more",{lastmsg:ID,restid:$(this_tag).data("restid")},function(html){
        $("ol#updates").append(html);
        $("#more"+ID).remove();// removing old more button
        });
    }
    else
    {
        $(".morebox").html('The End');// no results
    }
    return false;
    });

I am adding content on view more button click through ajax ajax code is same as above code I am Using this plugin http://www.radioactivethinking.com/rateit/example/example.htm

Solution

  • In the $.post success handler you should invoke rateit again via JavaScript after you append the HTML like so:

     $("ol#updates").append(html);
 $(".rateit").rateit();