How to integrate a jQuery plugin into Yii Framework

I have been studying up on Yii framework as a potential alternative to Zend. It has its pluses and minuses. Yii framework comes with jQuery included at the core. It was ridiculously easy to download a jQuery plugin, drop it in as a black box, follow the instructions for the front end, and it just works. I used the star-rating plugin. If you have a rating for a piece of content represented as a number such as 3.642/4 on a scale of 0-4, it is much more Web 2.0 friendly if you represent that graphically. Star-rating uses pimped up radio buttons to represent this number as five fractional stars. It also does the front end of dynamic interactive ratings, and as soon as I get my ajax back-end working on that I’ll post that too. Since the actual code being typed in is illegible in the video, I have included it in this article.


Star-rating folder dropped into:
/js

Code inserted in specific view:
/protected/views/joke/show.php

$cs=Yii::app()->clientScript;
$cs->registerScriptFile(Yii::app()->baseUrl . '/js/star-rating/jquery.rating.pack.js', CClientScript::POS_HEAD);
$cs->registerScriptFile(Yii::app()->baseUrl . '/js/star-rating/jquery.MetaData.js', CClientScript::POS_HEAD);
$cs->registerCssFile(Yii::app()->baseUrl . '/js/star-rating/jquery.rating.css');

Core jQuery included in main layout:
/protected/views/layouts/main.php

Yii::app()->clientScript->registerCoreScript('jquery');

method in /protected/models/Joke.php

public function rate($cellno)
{
    $magic = round($this->avgRating * 5);
    if ($cellno == $magic) {
        return ("checked='checked'");
    }  else {
        return("");
    }
}

HTML code in /protected/views/joke/show.php

<?php for($i=0; $i<20; $i++):?>
<input name="star1" type="radio" class="star {split:4}" disabled="disabled"  <?php echo $model->rate($i); ?>/>rate($i); 
<?php endif; ?>

7 comments to How to integrate a jQuery plugin into Yii Framework

  • salv

    hai.. can u help me…
    im newbie for this framework and need help.

    can i have chat with u?? u have yahoo messenger, etc, thanks!!

  • Thanks for this tutorial, it helped me a lot.

  • Thanks. It did help. But I just made it simple, enough for my need for now. So, I just pasted code in front page view))) Look:

    Yii::app()->clientScript->registerCoreScript(‘jquery’);

    $cs=Yii::app()->clientScript;
    $cs->registerScriptFile(Yii::app()->baseUrl . ‘/common/js/jquery/fancybox/jquery.fancybox-1.3.1.pack.js’, CClientScript::POS_HEAD);
    $cs->registerScriptFile(Yii::app()->baseUrl . ‘/common/js/jquery/fancybox/jquery.mousewheel-3.0.2.pack.js’, CClientScript::POS_HEAD);
    $cs->registerCssFile(Yii::app()->baseUrl . ‘/common/js/jquery/fancybox/jquery.fancybox-1.3.1.css’);

  • I know this comment is really weird
    Can i use your RSS news for my artificial intelligence?

    thanks a lot
    the big experiment TheRobot

  • I think, there should be
    Yii::app()->getClientScript()->registerCoreScript(‘jquery’);

    instead of:

    Yii::app()->clientScript->registerCoreScript(‘jquery’);

  • pavlm

    this article is obsolete.
    use CStarRating instead of this code.

  • Colleen

    fair enough, except that this article is about how to break it up and put it in, and which plugin you use doesn’t matter. So no, don’t put that nearly two years old code into your yii, but the technique is still worth looking at if you don’t have a clue.

A sample text widget

Etiam pulvinar consectetur dolor sed malesuada. Ut convallis euismod dolor nec pretium. Nunc ut tristique massa.

Nam sodales mi vitae dolor ullamcorper et vulputate enim accumsan. Morbi orci magna, tincidunt vitae molestie nec, molestie at mi. Nulla nulla lorem, suscipit in posuere in, interdum non magna.