1 2 Previous Next 17 Replies Latest reply: Jan 26, 2011 8:45 AM by VANJ RSS

    Star rating plugin in report?

    666835
      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 Hartman
          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
            Yes, something like that, although I don't understand the step by step entirely.
            • 3. Re: Star rating plugin in report?
              Roel Hartman
              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
                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 Hartman
                  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
                    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 Hartman
                      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
                        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
                          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
                            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 Hartman
                              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
                                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 Hartman
                                  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
                                    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