CODEWITHSUNDEEP
jqueryjquery-plugins
MrCooL
MrCooL

Reputation: 926

The Star Rating widget with jQuery ajax load

It works fine when the page first loads into browser

Without problem

However, problem starts when the the DIV container contains this star rating, was loaded again with Ajax load. It was reset to its original radio button:

with problem

The code to made this rating star works was just as simple as following:

Star Rating Widget Plugin:

$("#stars-wrapper").stars({
  cancelShow: false,
  disabled: true
});

<span id="stars-wrapper">
                <input type="radio" id="rate1" name="newrate" value="1" title="Poor" />
                <input type="radio" id="rate2" name="newrate" value="2" title="Not that bad" />
                <input type="radio" id="rate3" name="newrate" value="3" title="Average" />
                <input type="radio" id="rate4" name="newrate" value="4" title="Good" />
                <input type="radio" id="rate5" name="newrate" value="5" title="Perfect" />
 </span>

Ajax Load:

$('#content_pane').load( href );

Does anyone have idea how to tackle this problem? It seems to be not working well with Ajax load.

Upvotes: 1

Views: 1080

Answers (1)

Josh Smith
Josh Smith

Reputation: 15028

The problem you're encountering is that you're currently only binding to elements that already exist on the page. When you load new data into the page using an AJAX request, your stars widget is not live and is thus not bound to these new elements.

You would need to re-bind to these elements within your AJAX load like so:

$('#content_pane').load( href, function() {
  $("#stars-wrapper").stars({
    cancelShow: false,
    disabled: true
  });
});

Perhaps your widget includes a live API, but live has since been deprecated in jQuery.

Upvotes: 2

Related Questions