Question

In one of my applications, i am fetching json data from php and rendering the html from that using ajax/jquery

I render listing of products with some star rating plugin. The problem is that the plugin works fine when rendered initially with page refresh. When i apply a price filter (this actually fetches json and renders with ajax), the plugin stops working as it is unable to bind to dynamically inserted listing with ajax.

plugin initialization code goes like this

jQuery.noConflict ();
var jq = jQuery;
jq(document).ready(function(e) {
    jq('.auto-submit-starc').rating({
        callback: function(value, link){
            product_id=this.name;
            rating=value;
            jq.post('<?PHP echo base_url();?>index.php/showproducts/awardRating',{id:product_id,rating:rating},function(data){});
        }
    });   
});

And this is what fetches the json:

    // Price range
('select#valueA, select#valueB').selectToUISlider({
    labels:8,
    sliderOptions: {
        stop: function(e,ui) {
            jq(".list-items").css('width','100%').css('height','700px').css('background-color','#EFEFEF').css('opacity','0.5').css('text-align','center').html("<img src='http://tharhandloom.in/images/preloader.gif'/>");

            var startk = jq('#valueA').val();
            var endk = jq('#valueB').val();

            var start=startk.replace('k', '000')
            var end=endk.replace('k', '000')

            var catid="<?PHP echo @$category['id'];?>";   
           jq.post('<?PHP echo base_url()?>index.php/showproducts/ajaxFilterProducts',
                   {start:start,end:end,catid:catid},
                   function(data){          
                       var json=jQuery.parseJSON(data);                
                       var html="";
                       jq(json).each(function(index,element){
                           if(element.name.length>21)
                               productName=element.name.substring(0,21)+"...";
                           else
                               productName=element.name;
                           html+='<div class="single-item"><span class="title"><a href="#">'+productName+'</a></span><input class="auto-submit-starc" type="radio" name="'+element.id+'" value="1"/><input class="auto-submit-starc" type="radio" name="'+element.id+'" value="2" id="rate_second"><input class="auto-submit-starc" type="radio" name="'+element.id+'" value="3" id="rate_third" /><input class="auto-submit-starc" type="radio" name="'+element.id+'" value="4" id="rate_fourth" /><input class="auto-submit-starc" type="radio" name="'+element.id+'" value="5" id="rate_fifth"/><span class="price">Rs '+element.price+'</span><img src="http://tharhandloom.in/product_images/thumbnails/'+element.product_image+'" alt="Item"/><div style="text-align:center"><a href="<?PHP echo base_url();?>cart/'+element.id+'" class="general-button float-left"><span class="button">Add to cart</span></a></div><br class="clear"/></div>';     
                        });
                        jq(".list-items").css('background-color','').css('opacity','').css('text-align','').css('width','').css('height','').html(html);

                    });

             }
         }          
});

As can be seen that in the html i am inserting radio buttons. The plugin actually captures the classes of radio buttons and applies the functionalities to them. But when new radio buttons are inserted via ajax, the plugin is unable to capture there classes.

I guess it can be accomplished with .live method but don’t know how to use it.

Answer 1

You should simply run jq('.auto-submit-starc').rating(...); after this line:

jq(".list-items").css('background-color','').css('opacity','').css('text-align','').css('width','').css('height','').html(html);

.live is to bind events and it will not help you with applying plugin because it simply catches all events on document and looking for events related to event.target selector or something like that. It does not check if something is changed on a page. And besides, .live is deprecated in newer versions of jQuery. You should use .on instead.