Originally Posted by
aal_fareed
hello , thanks so much for trying to help me i appreciate all the time and effort you put to write all this sarah , but i am getting bit confused with he above code ,
u r providing the viewbox named rating
but in the for loop code
u wrote
var vbObj = {dialog.object}.getControl('VIEWBOX1');
viewbox1 should be rating ya ?
i have tried to apply the above code but i did not success and its coming vertical stars not horizontal its driving me crazy ,
can you please adjust the code in the component and submit it here to find where is my mistake ?
i honestly spent over 7 hours without any success i will keep trying till you post me back .
and for the record i don't need slider i want the user to click the star directly it should be saved and refreshed .
if you need mysql table i will upload it here just let me know please .
thank you again
Ahmed Sh
Hello Ahmed,
In the example I posted, I had omitted several tags from the original HTML to make it shorter. You should only have to replace [temp].value with Ratings and pass Picutre_Id as a parameter to the a5-item:
Code:
<div class="star {*if Ratings >=1}selected{*endif} " style="display:inline-block;" a5-item="starclick:{Picture_Id}" a5-value="1">
<svg width="30" height="30" viewBox="0 0 15 15" ><path d="M 3,14 L 4.5,9 L 1,6 L 5.5,5.5 L 7.5,1 L 9.5,5.5 L 14,6 L 10.5,9.5 L 12,14 L 7.5,11 L 3,14 z" /></svg>
</div>
'VIEWBOX1' is the viewbox in your UX Component. var vbObj = {dialog.object}.getControl('VIEWBOX1') gets the viewbox object for VIEWBOX1 in your component so you can call the refresh() method to refresh the viewbox.
The block of javascript goes in the onClick event for the starclick Item - you can find it on the Items tab in the ViewBox builder for your ViewBox.
Since you have expressed interest in submitting the data to a database immediately, you will need to write some server-side xbasic to update the value. Instead of the client-side modifications in the previous post, change your starclick onClick method to this:
Code:
var picture_id = ia
var value = v
{dialog.object}.ajaxCallback('','','starAjax','','picture_id='+picture_id+'&value='+value);
In your starAjax sever-side xbasic function, you can then update the appropriate record. The picture_id and value can be accessed through the e object. For example:
Code:
dim picture_id as c = e.picture_id
dim value as c = e.value
starAjax = "alert('Picture with ID " + picture_id + " was rated " + value + " stars.');"
After you make changes to the database that the ViewBox is based on, call {dialog.object}.refreshViewBoxData('VIEWBOX1'); to trigger a refresh of the data.
Also - I advise unchecking the "Selectable" property for the starclick Item. For whatever reason, having that enabled results in all instances of your star rating control to receive the actualStarSelected class rather than the one you selected. You can put conditionals in the ViewBox layout to make the selected star display larger than the others.
ViewBoxes: Build a Star Rating
Reply With Quote
Bookmarks