Readonly mode with backing range field

Oct 15, 2012 at 3:53 PM
Edited Oct 15, 2012 at 3:54 PM

Hello, I'm trying to use a backing range field in conjunction with readonly mode, and it simply isn't working.

Markup:

<input type="range" step="1" min="0" max="5" id="cereview-concept_coverage-input-rating" name="cereview[concept_coverage[rating]]" value="" data-rateit-readonly="true" readonly="true" />
<div class="rateit rating" data-rateit-backingfld="#cereview-concept_coverage-input-rating" data-rateit-readonly="true"></div>

Rateit Call (CoffeeScript)

@ratings.rateit
   step: 1
   min: 0
   max: 5
   ispreset: true
   resetable: false

No matter what I do, the fields are still editable. Can anyone tell me why this shouldn't work?

Coordinator
Oct 17, 2012 at 12:06 PM

Hi,

Sorry for the late reaction.

There are two issues here:

1)  A bug in rateit. When you have a backingfield, it will only look if that field is "disabled". If it is disabled it will set rateit to be "readonly", if it is not disabled it will set rateit to "not readonly", no matter what you define anywhere else. I hope to fix this on friday.

In the meantime, your workaround would be to set the input field to "disabled"

2) Also,you have a bit of a mess in your code. The "data-rateit-*" attributes should only be on the div.

Your div also has the class name "rateit", so it will be automatically instantiated by rateit. So your JS call is not necessary.

This would be the cleaned up code:

<input type="range" step="1" min="0" max="5" id="cereview-concept_coverage-input-rating" name="cereview[concept_coverage[rating]]" value="" disabled />
<div class="rateit rating" data-rateit-backingfld="#cereview-concept_coverage-input-rating"></div>

Coordinator
Oct 17, 2012 at 12:08 PM
This discussion has been copied to a work item. Click here to go to the work item and continue the discussion.