I had a problem with CStarRating in CListView with ordering headers (such sort by date), and apart from on the original loading there was no way to get it working (neither with the id "#qwerty" trick, because the whole page was sent again and nor rendering the order as desired.
My bulldozer solution was to refactor the CStarRating::rendeStars() function to display gif images when the widget is readOnly, rather than the disguised radiobutton referencing some images through the css…
The only requirement is that you have the stars image below your public web folder (in my case html_public/images
I have attached the images as gif with transparent background for convenience…
This solved it for though it is a bit rough…
For sure the star images included could be put in the assets folder of the CStarRating widget and referenced properly in the renderStars function… to make it cleaner
In case anyone else has the same issue as I did - it is important to set unique ‘name’ for each widget if you have multiple ones (e.g. using CListView) on the page. Otherwise all the stars would be rendered right next to each other where the first widget is placed, assuming you have processOutput (4th parameter of renderPartial) set to false. If you set this parameter to true, stars would be rendered fine, but it breaks all other jQuery plugins since it loads core jQuery libraries multiple times.
$this->widget('CStarRating',array(
'model' => $rating,
'id' => 'itemRating-'.$data->id,
'name' => 'itemRating-'.$data->id, // NB: important to set unique id for multiple widgets to be rendered independantly
'attribute' => 'value',
'starCount' => 10,
'readOnly' => false,
'resetText' => 'Remove rating for this item',
'starWidth' => 3,
'callback' => $ratingSubmitCallback,
)); ?>
in CListView, it have an error “Uncaught Error: Syntax error, unrecognized expression: ##tutor” “jQuery(’##tutor’).yiiListView({‘ajaxUpdate’:[’#tutor’],‘ajaxVar’:‘ajax’,‘pagerClass’:‘pagination-container’,‘loadingClass’:‘list-view-loading’,‘sorterClass’:‘sorter’,‘enableHistory’:false});”