Star rating control in Titanium Alloy?

Question

I need to get the feedback star ratings for 5 questions, I'm using titanium alloy mobile development. For the same reason I have used the star rating widget from the below link,

https://github.com/AppceleratorSolutions/AlloyWidgets/tree/master/starrating

From the above link there is only one set of stars, But I need to use the star ratings for 5 times. How can I do that. I need the following format

1. Question?

    *****
2. Question?

    *****
3. Question?

    *****
4. Question?

    *****
5. Question?

    *****

The widget is working fine but the stars are displaying only for one question, I need the stars for all the five questions, below is my current output,

enter image description here

questionnaire.xml:

<Alloy>
    <Window id="questionnaireWin" title="Plan India" platform="android,ios">
        <View id="header">
              <Label id="title">Feedback</Label>
        </View>

        <Label id="question1" class="question">1. Question 1?</Label>
         <Require type="widget" src="starrating" id="widget" name="widget" />

         <Label id="question2" class="question">2. Question 2?</Label>
         <Require type="widget" src="starrating" id="widget" name="widget" />  

         <Button class="button" onClick="submitRatings">Proceed</Button>

    </Window>
</Alloy>

Though, I'm using widget twice it is showing only once. Please help how to do this?

Else any easy way to do this using any plugins or something esle?

LHIOUI LHIOUI · Accepted Answer · 2014-09-20T09:22:54

You have required the same widget tow times using the same id. you should define different id.

<Alloy>
   <Window id="questionnaireWin" title="Plan India" platform="android,ios">
    <View id="header">
          <Label id="title">Feedback</Label>
    </View>

    <Label id="question1" class="question">1. Question 1?</Label>
     <Require type="widget" src="starrating" id="widget1" name="widget" />

     <Label id="question2" class="question">2. Question 2?</Label>
     <Require type="widget" src="starrating" id="widget2" name="widget" />  

     <Button class="button" onClick="submitRatings">Proceed</Button>

</Window>

and the in you js file initialize widget1 & widget2 ...

$.widget1.init();
$.widget2.init();

EDIT you can test this example that i have created ...

Star rating control in Titanium Alloy?

1 Answers