rateit test

dynamically added add row with cell containing rateit star rating

HTML

<script src="http://sharethecure.org/js/rateit/src/jquery.rateit.min.js"></script>
<div>
  <button type="button" id="cl" onclick="checkit()">Check I'm working</button>
    </div>    
<p><b> Please enter an item, rate it, and click <i>Add to Remedy</i> thanks</b></p><br><br>        
<div class="form-group">
            <div>
                <label id="inp-title" class="control-label" for="formInput1">Field label</label>
                <input type="text" class="form-control" id="formInput1" placeholder="Placeholder text"></input>
           </div>
           <div>
                    <div id="rateit_id"  class="rrateit"></div>
          </div><br><br>
        <button type="button" id="add-to-remedy" class="btn btn-default">Add to Remedy</button><br><br><br>
    <div>
        <table class="table" id="remedy-tbl">
            <thead>
                <tr>
                    <th>Remedy Item</th>
                    <th>Item Rating</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
    <p> This is an example of what should appear under Item Rating in table above </p>   
<div class="rateit" data-rateit-value="2.5" data-rateit-ispreset="true" data-rateit-readonly="true"></div>

CSS

.rateit {
  display: inline-block;
  position: relative;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.rateit .rateit-range {
  position: relative;
  display: inline-block;
  background: url('http://sharethecure.org/js/rateit/src/star.gif');
  height: 16px;
  outline: none;
}
.rateit .rateit-range * {
  display: block;
}
/* for IE 6 */
* html .rateit,
* html .rateit .rateit-range {
  display: inline;
}
/* for IE 7 */
* + html .rateit,
* + html .rateit .rateit-range {
  display: inline;
}
.rateit .rateit-hover,
.rateit .rateit-selected {
  position: absolute;
  left: 0px;
}
.rateit .rateit-hover-rtl,
.rateit .rateit-selected-rtl {
  left: auto;
  right: 0px;
}
.rateit .rateit-hover {
  background: url('http://sharethecure.org/js/rateit/src/star.gif') left -32px;
}
.rateit .rateit-hover-rtl {
  background-position: right -32px;
}
.rateit .rateit-selected {
  background: url('http://sharethecure.org/js/rateit/src/star.gif') left -32px;
}
.rateit .rateit-selected-rtl {
  background-position: right -32px;
}
.rateit .rateit-preset {
  background: url('http://sharethecure.org/js/rateit/src/star.gif') left -48px;
}
.rateit .rateit-preset-rtl {
  background: url('http://sharethecure.org/js/rateit/src/star.gif') left -48px;
}
.rateit button.rateit-reset {
  background: url('http://sharethecure.org/js/rateit/src/dud.gif') 0 0;
  width: 0;
  height: 0;
  display: inline-block;
  float: left;
  outline: none;
  border: none;
  padding: 1em;
}
.rateit button.rateit-reset:hover,
.rateit button.rateit-reset:focus {
  background-position: 0 -16px;
}
.tbl-txt {
  max-width: 25em;
}

JavaScript

var rateval= 0; 
$('div#rateit_id').rateit();

    
$("#rateit_id").click(function() {
      rateval = ($(this).rateit('value'));
});	                               
    
$("#add-to-remedy").click(function() {  
    var htmlToAppend = '<tr><td>' + $('input[type=text].form-control').val() + '</td><td><div class="rateit" data-rateit-value="' + rateval + '" data-rateit-ispreset="true" data-rateit-readonly="true"></div></td></tr>';
    $("#remedy-tbl").append( htmlToAppend );			          
});