Forum | Appery.io

I want to add a rating stars scale to my project so that users can rate each item. Can I use a plugin that someone else already created such as http://www.fyneworks.com/jquery/star-... to help me to accomplish this?

This plugin downloads as a zip file and when I extract it, the files are js, css and html. How can I add this plugin to my project to get the functionality?

Thanks

You can load the JavaScript file as described here: http://docs.tiggzi.com/documentation/...

You can upload a CSS file via Create New - CSS

You can then use the Panel component - to add the widget to the page.

In general, this will require some HTML/JavaScript coding.

Hello.

Following your steps, I could upload the .js and .css files to my project, but how do I upload and access the two .gif files included in the plugin?

You can add an Image component to your page and in the properties of Image - Asset: click "Change" - and in opened window you can upload your image files.

When you added all this files in your project you can use plug-in in the App.

Hello.

Ok, I've uploaded the images using the Image component.

Now I have added a Radio component (with 5 items). I have to specify the class, I've seen that I can only specify the class in the group of radio buttons, so I assigned the class "star", but doesn't work.

I've seen in the source code that the class is saved this way for the group:
code
<div data-role="fieldcontain" class="star mobileradiogroup1" id="j_18" dsid="regaloRating">
/code

The manual of Star Rating says that the code of each radio button should be:
code
<input name="star1" type="radio" class="star"&#47;>
/code

But the source code of one button that I have is:
code
<span dsid="regaloRating1" class="mobileradiobutton1">
<input type="radio" name="regaloRating" id="j_19" style='display:none' checked="checked" tabIndex="2" data-theme="a" value="j_19" &#47;>
<label id="j_19_label" for="j_19"><&#47;label>
<&#47;span>
/code

Using "More Properties" of the radio button I can't add the class, because it says that is a reserved code.

How can I use the special class?

Hello.

Working on it. I'll update.

1. You should create an CSS (with names of image files in it) like this:
   code
   &#47;* jQuery&#46;Rating Plugin CSS - http:&#47;&#47;www&#46;fyneworks&#46;com&#47;jquery&#47;star-rating&#47; &#47;
   div&#46;rating-cancel,div&#46;star-rating{float:left;width:17px;height:15px;text-indent:-999em;cursor:pointer;display:block;background:transparent;overflow:hidden}
   div&#46;rating-cancel,div&#46;rating-cancel a{background:url('&#46;&#46;&#47;image&#47;delete&#46;gif') no-repeat 0 -16px}
   div&#46;star-rating,div&#46;star-rating a{background:url('&#46;&#46;&#47;image&#47;star&#46;gif') no-repeat 0 0px}
   div&#46;rating-cancel a,div&#46;star-rating a{display:block;width:16px;height:100%;background-position:0 0px;border:0}
   div&#46;star-rating-on a{background-position:0 -16px!important}
   div&#46;star-rating-hover a{background-position:0 -32px}
   &#47; Read Only CSS &#47;
   div&#46;star-rating-readonly a{cursor:default !important}
   &#47; Partial Star CSS &#47;
   div&#46;star-rating{background:transparent!important;overflow:hidden!important}
   &#47; END jQuery&#46;Rating Plugin CSS *&#47;
   /code
   
   1. create a JS code from here: http://jquery-star-rating-plugin.goog...
   2. put panel component on a page with type: "span" and name it: "starsPanel"
   3. on a page show event write code:
      codevar inputText = '<input name="star1" type="radio" class="star"&#47;>', allInputs = '';
      var starsNumb = 5;
      for (var i = 0; i < starsNumb; i++) {
      allInputs += inputText;
      }
      Appery("starsPanel")&#46;append(allInputs);
      /code

Hello Illya.

I've done everything you say, even I've copied the CSS (with the modification of adding '../image), but I only get radio buttons without the stars.

What can be wrong?

Hi, plugin should be applied automatically for all radio buttons with class "star". If it won't happened you can call plugin manually. For example:

code$("&#46;star")&#46;rating();/code
add this code in JS on Page show event after this line
codeAppery("starsPanel")&#46;append(allInputs);/code

There is one more thing. If you want to use it in mapping (to add a rating to each record which you get with mapping), you should use the code not on Page show event, but on success service event. Also you should change the code, because each rating should have it's own name. On service success event add the following code:

codevar inputText, allInputs, starsNumb = 5;
$("[dsid=starsPanel]").each(function(index){
inputText = '';
allInputs = '';
for (var i = 0; i < starsNumb; i++) {
allInputs += inputText;
}
$(this).append(allInputs);
});
$("&#46;star")&#46;rating();/code

Hello Marina.

The star rating for just one time works now! I only had to add
code
$("&#46;star")&#46;rating();
/code
on Page show.

Great!!!

But as you've said, I want to repeat the stars for each item. To do that I've deleted the JS defined on my page to show the static rating during Page Show. After that I have created your Javascript in Data - My page - Page Show - Run Javascript, but didn't work.

I've tried leaving "inputText" empty (as in your example), but as it didn't work, I some source code of "inputText" (which also didn't work):

codevar inputText, allInputs, starsNumb = 5;
$("[dsid=starsPanel]")&#46;each(function(index){
inputText = '<input name="star1" type="radio" class="star" disabled="disabled"&#47;>';
allInputs = '';
for (var i = 0; i < starsNumb; i++) {
allInputs += inputText;
}
$(this)&#46;append(allInputs);
});
$("&#46;star")&#46;rating();/code

What's wrong?

Thanks in advance.