This discussion is archived
1 2 Previous Next 17 Replies Latest reply: Jan 26, 2011 6:45 AM by VANJ RSS

Star rating plugin in report?

666835 Newbie
Currently Being Moderated
I've got a page where the user selects skills in a selectlist and klicks a button to add them to their own (writes them to table X). On the same page is a report that selects skills belonging to the current user from a table X. The user can then rate his skill via a select list (based on named LOV) with the values 1-5 and then save to the same table.

I thought it'd be nice to change the skill-level select list to a star rating and so I installed the star rating plugin but I can't figure out if it's possible to display it in the report... The "Display as" for the column doesn't contain "star rating"...

Is there a way?
  • 1. Re: Star rating plugin in report?
    Roel Oracle ACE Director
    Currently Being Moderated
    You mean something like this : http://apex.oracle.com/pls/otn/f?p=41715:9 ??
    The code is still from the good ol' 3.2 days...
  • 2. Re: Star rating plugin in report?
    666835 Newbie
    Currently Being Moderated
    Yes, something like that, although I don't understand the step by step entirely.
  • 3. Re: Star rating plugin in report?
    Roel Oracle ACE Director
    Currently Being Moderated
    and where is your problem?

    Step 1: Get the source files from http://code.google.com/p/jquery-star-rating-plugin/ and install the jquery.rating.css and .js on your webserver or upload them as static files into your database. Then reference them in your Page Header.
    Step 2: Create the PL/SQL function as shown on the demo page and use it in your select ( so : select id, name, get_starts(id, rating) from whatever). Now it should show a report with the star rating...
    Step 3: Create a function in the HTML Header of your page (that binds a click event to all "start" items)
    $(function(){
    $('.star').click(function() {
    saveRating( $(this).attr("id"), $(this).children().attr("title") );
    });
    });

    Step 4: Create the saveRating function...a javascript function that calls an On Demand process that actually does the update.
  • 4. Re: Star rating plugin in report?
    666835 Newbie
    Currently Being Moderated
    I copied
    jquery.rating.css to images/css -folder on server and
    jquery.rating.js to images/javascript -folder on server

    also from zipfile i took jquery.js and copied to images/javascript -folder

    put

    <link rel="stylesheet" type="text/css" href="#IMAGE_PREFIX#css/jquery.rating.css" />
    <script type="text/javascript" src="#IMAGE_PREFIX#javascript/jquery.js"></script>
    <script type="text/javascript" src="#IMAGE_PREFIX#javascript/jquery.rating.js"></script>

    in html header.

    created a pl/sql function in the database called GET_STARS

    added GET_STARS(1, 5) to the select of the report (just to test it)

    but the column in the report writes out the html:

    <input class="star" id="1" name="star1" value="1" type="radio"><input class="star" id="1" name="star1" value="2" type="radio"><input class="star" id="1" name="star1" value="3" type="radio"><input class="star" id="1" name="star1" value="4" type="radio"><input class="star" id="1" name="star1" value="5" checked="checked" type="radio">ID

    Am I doing something wrong with the javascript/css files?
  • 5. Re: Star rating plugin in report?
    Roel Oracle ACE Director
    Currently Being Moderated
    Ok, almost there... Just change your Report Column from Display as text (escape..) to Standard Report Column.
  • 6. Re: Star rating plugin in report?
    666835 Newbie
    Currently Being Moderated
    Ok, great. I see stars!

    And then?

    I've copied (into the header) but then I'm a bit lost again...

    <script type="text/javascript">
    var votes = 0;
    function saveRating( pID, pRating)
    {
    var lRequest = new apex.ajax.ondemand( 'saveRating',
    function(){
    var l_s = p.readyState;
    if(l_s == 1||l_s == 2||l_s == 3){
    } else if(l_s == 4){
    gReturn = p.responseText;
    return gReturn;
    }else {return 0;}
    }
    );
    lRequest.ajax.addParam('x01',pID);
    lRequest.ajax.addParam('x02',pRating);
    lRequest._get();
    }


    $(function(){
    $('.star').click(function() {
    saveRating( $(this).attr("id"), $(this).children().attr("title") );
    });
    });

    </script>
  • 7. Re: Star rating plugin in report?
    Roel Oracle ACE Director
    Currently Being Moderated
    Seeing starts is always good ;-)

    You have to create an Application Process as well, called "saveRating" - that's the one you're calling with the apex.ajax.ondemand function.
    And that should be something like:
    declare
      l_product_id demo_product_info.product_id%type := to_number(wwv_flow.g_x01);
      l_rating     demo_product_info.rating%type := to_number(wwv_flow.g_x02);
    begin
      update demo_product_info
      set    rating = l_rating
      ,      votes = votes + 1
      where  product_id = l_product_id;
    end
    Of course you have to replace the approriate table/column names with your own ones.
  • 8. Re: Star rating plugin in report?
    VANJ Journeyer
    Currently Being Moderated
    Roel - Thanks. But to followup on this AJAX  Callbacks  & apex.ajax.ondemand     -  APEX 4.0, does this mean that these ondemand processes can NOT be defined on the page where they are used (new to 4.0, as Patrick points out Re: Ajax Callbacks?) but all of them have to defined under Shared Components/Application Processes? That would seem to defeat the purpose of adding the page-level callback feature.

    Also, while on the topic, both apex.ajax.ondemand and htmldb_get seems to be undocumented. Is this an oversight or does this mean that Oracle does not recommend/support using these functions?

    Also, just curious, I noticed that all the code that uses apex.ajax.ondemand in Apex distribution, has the same form described in this thread i.e test for values of the XHR readyState property and only do something when the value is 4. Is this necessary, couldn't this be shortened to simply
    var foo = new apex.ajax.ondemand( 'process_name', function(){
        if (p.readyState==4) return p.responseText;
        else return false;
        }
    );
    foo.ajax.addParam(...);
    foo.ajax.addParam(...);
    foo._get();
    foo=null;
    Thanks
  • 9. Re: Star rating plugin in report?
    666835 Newbie
    Currently Being Moderated
    I've created the unconditional ondemand process (application level)

    declare
    an_id BI_REGISTER_COMPETENCE.ID%type := to_number(wwv_flow.g_x01);
    a_rating BI_REGISTER_COMPETENCE.COMP_VALUE%type := to_number(wwv_flow.g_x02);
    begin
    update BI_REGISTER_COMPETENCE
    set COMP_VALUE = a_rating
    where ID = an_id and
    USER_NAME = :APP_USER
    ;
    end


    but I'm not getting any ratings saved to the db table.
    ...and wtf, now suddenly I only see radiobuttons?!
    Any ideas?
  • 10. Re: Star rating plugin in report?
    666835 Newbie
    Currently Being Moderated
    Alright! after some fiddling the updating of the db table works but I'm not seeing any stars or radiobuttons for that matter... The table cell is empty in each row but on mouseover I get a small tooltip with 1, 2, 3, 4, 5, depending on where I keep the mouse, so I'm able to cklick the invisible stars and get the result in the DB.

    Is it the star.gif in the downloaded zipfile I'm supposed to put somewhere, if so where?

    I've copied it (and delete.gif) to the image directory and to the theme folder but no go... Where can I find the path specification that points to the images to use???

    Regards

    Andreas
  • 11. Re: Star rating plugin in report?
    Roel Oracle ACE Director
    Currently Being Moderated
    The processes itself are defined on Application Level, but you can define an AJAX Callback to this process in your Page.
    I expected that I could use this callback in a Dynamic Action, but that isn't possible. So not quite sure yet how this helps.. Have to investigate.

    Regarding your shortened code: Yes you can do that too.
  • 12. Re: Star rating plugin in report?
    666835 Newbie
    Currently Being Moderated
    Hmm, when I add a star-rating item using the first plugin I downloaded, then I get stars in the report!

    /A
  • 13. Re: Star rating plugin in report?
    Roel Oracle ACE Director
    Currently Being Moderated
    Upload both GIFs to either your webserver or into the APEX Repos. Then edit the css file to point the background of both divs to the locations where you uploaded them.
  • 14. Re: Star rating plugin in report?
    666835 Newbie
    Currently Being Moderated
    Can't thank you enough for all your patience Roel, it works!

    A small question though... The stars look a bit iffy as I have alternating row colours as the background in the table. Is there an easy way to make the background colour of that particular column white?

    Regards

    Andreas
1 2 Previous Next

Legend

  • Correct Answers - 10 points
  • Helpful Answers - 5 points