Problem using Starbox with Code Igniner

[eluser]geshan[/eluser]
Hello all Code Igninter users/coders,

In a project of mine I had to implement a rating feature, so I tried to used Starbox (http://www.nickstakenburg.com/projects/starbox/) for it as it was easy to implement and the graphical aspect of the product was also good. But the problem is I does not work. If I set a Breakpoint in Scripts tab of "FireBug" it seems to work somewhat but without the breakpoint it only ghosts but does not highlight the starts on mouseover they are of the default color. Please suggest me what to do.

The code is something like this:

Code:

function get_rating_box(no){
    //new Starbox('rating_place_'+no, 2, { stars: 10, buttons: 20, max: 10 });
    new Starbox('rating_place_'+no, 2, {
                                        stars: 5,
                                        className : 'default',
                                        buttons: 10,
                                        max: 5,
                                        overlay: 'big.png',
                                        indicator: '#{average}/#{max} out of #{total} votes',
                                        ghosting: true,
                                        total: 10,                
                                         rerate: false,
                                        //onRate: starClicked('rating_place_'+no, info){}{info='a'}
                                        //{info = { identity: test1,rated: rated,average: 2.5,max: 5,total: 10}}
            });
    
     $('rating_place_'+no).observe('starbox:rated', starboxThankYou);
    
}//function get_rating_box_close

It is loaded in a view which is called via AJAX using Prototype framework. I can't get it to work Help.

[eluser]geshan[/eluser]
So I got 50 views in a day but no Reply hope some are facing the same problem but can't find a solution well I've got the solution myself here.

Code:

[b]The JS Code[/b]

function get_rating_box(no,a,t){
    //new Starbox('rating_place_'+no, 2, { stars: 10, buttons: 20, max: 10 });
    new Starbox('rating_place_'+no, a, { /*notice a in place of average passed from the call which take a value form the database */
                                        stars: 5,
                                        className : 'default',
                                        buttons: 10,
                                        max: 5,
                                        overlay: 'big.png',
                                        indicator: '#{average}/#{max} out of #{total} votes',
                                        identity: no,
                                        ghosting: true,
                                        total: t, /*t is passed here from a php call that gets total value from the database */                
                                         rerate: false
                                        
    
     $('rating_place_'+no).observe('starbox:rated', starboxThankYou);
    
}//function get_rating_box_close


function starboxThankYou(event) {
/* Here's how to show a simple thank you message,
Some demos use it using the custom event 'starbox:rated', but this could also be used on onRate.

You could use the same technique to show error/success using the callback function in your Ajax.Request:*/
para=event.memo;
p= event.memo.rated;
gid=event.memo.identity;
/*new Ajax.Request('savestar.php', {
    parameters: event.memo,
    onComplete: function() { ... }
  );
}*/

new Ajax.Request('/xyz/index.php/ratcom/add_rating', { /* ratcom is a model handling rating and comments*/
                  parameters: event.memo,
                  method: 'post',
     onSuccess: function() {  
        var msg = $('rating_msg_'+gid);
        msg.update('Rating Added successfully.').setStyle({ background: '#dfd' });
        window.setTimeout(function() { msg.update("") }, 2000);
         },
     onFailure: function() {
         var msg = $('rating_msg_'+gid);
         msg.update('Rating Add Failed.').setStyle({ background: '#ff0' });
         window.setTimeout(function() { msg.update("") }, 2000);
         },
     onLoading: function() {
          var msg = $('rating_msg_'+gid);
         msg.update('Adding Rating.');
         }
    
    });

/* More on Ajax.Request: http://www.prototypejs.org/api/ajax/request
*/
var indicator = event.element().down('.indicator');
var restore = indicator[removed];
indicator.update('Thanks for voting');
window.setTimeout(function() { indicator.update(restore) }, 2000);
}


[b]The call form .php [/b]

<div id="rating_place_&lt;?php echo $id; ?&gt;" onDblClick="get_rating_box(&lt;?php echo $id; ?&gt;,&lt;?php echo $a; ?&gt;,&lt;?php echo $t; ?&gt;);">Double click here to Rate...</div>    
        <div id="notify" style="display:none">
                   <div class="message"> You have clicked <span class="element"></span> <span class="rated"></span>
              </div>        
       </div>&lt;!-- Div notify close--&gt;
       <div id="rating_msg_&lt;?php echo $id; ?&gt;"></div> &lt;?php /* id is the id of the things to be rated */ ?&gt;

An important tip don't call "new starbox( parameters); " on OnMouseOver or even OnClick.
Happy coding and using Starbox with CI.