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"/>
/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" />
<label id="j_19_label" for="j_19"></label>
</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.
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$(".star").rating();/code
add this code in JS on Page show event after this line
codeAppery("starsPanel").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);
});
$(".star").rating();/code
Hello Marina.
The star rating for just one time works now! I only had to add
code
$(".star").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]").each(function(index){
inputText = '<input name="star1" type="radio" class="star" disabled="disabled"/>';
allInputs = '';
for (var i = 0; i < starsNumb; i++) {
allInputs += inputText;
}
$(this).append(allInputs);
});
$(".star").rating();/code
What's wrong?
Thanks in advance.