I’m using jQuery Raty and I have the following script:
<script type="text/javascript" charset="utf-8" src="{{ STATIC_URL }}js/raty/js/jquery.raty.min.js"></script>
<script type ="text/javascript">
(function($) {
$(function() {
$('.yourrating').each(function(index,elem){
$(elem).raty({
readOnly: false,
path: "{{ STATIC_URL }}js/raty/img/",
score: $(elem).children("span:first").text(),
click: function(score, evt) {
var vote_url = "/spice/rate/" + this.id.substring(2) + "/" + score + "/";
$.ajax({
url: vote_url,
success: function(){
alert('vote successful');
}
});
}
});
$('.thingrating').raty({
readOnly: true,
path: "{{ STATIC_URL }}js/raty/img/",
score: $(elem).children("span:first").text(),
});
});
});
})(jQuery);
</script>
The first script yourrating is working and allows people to rate the item. It is implemented as follows:
<div class="yourrating" id="t_{{ item.id }}"><span style="display:none;">{{score}}</span></div>
The second script thingrating is not working. It should show the current score of the model. It is implemented in the template as follows:
<div class="thingrating" id="t_{{ item.id }}"><span style="display:none;">{{score}}</span></div>
Why isn’t the second script working? It’s displaying the stars, but not the score. If I hardcode the score with 4 instead of {{score}} that also has no effect — the stars remain blank.
Here’s live code from my browser:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr"
xml:lang="en-us" lang="en-us">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>
Welcomes
component Description
</title>
<!--[if IE]>
<style>
div { zoom: 1; /* trigger hasLayout */ }
</style>
<![endif]-->
<link rel="stylesheet" href="/site_media/static/pinax/css/reset.css" />
<link rel="stylesheet" href="/site_media/static/pinax/css/bootstrap/less/bootstrap.css" />
<!--Scripts -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
if (typeof jQuery == 'undefined') {
document.write(unescape("%3Cscript src='/site_media/static/js/jquery-1.7.2.min.js' type='text/javascript'%3E%3C/script%3E"));
}
</script>
<script src="/site_media/static/pinax/js/base.js" type="text/javascript"></script>
<script src="/site_media/static/uni_form/uni-form.jquery.js" type="text/javascript"></script>
<script type="text/javascript" src="/site_media/static/js/bootstrap.js"></script>
<link rel="stylesheet" href="/site_media/static/pinax/css/comments.css" />
<link href='http://fonts.googleapis.com/css?family=Ubuntu+Condensed' rel='stylesheet'
type='text/css'>
<!-- <link rel="stylesheet" href="/site_media/static/css/reset_tabs.css"
/>
<link rel="stylesheet" href="/site_media/static/css/site_tabs.css" />
<link rel="stylesheet" href="/site_media/static/pinax/css/avatar.css" />
<link rel="stylesheet" href="/site_media/static/pinax/css/base.css" />
<link rel="stylesheet" href="/site_media/static/pinax/css/blogs.css" />
<link rel="stylesheet" href="/site_media/static/pinax/css/friends.css" />
<link rel="stylesheet" href="/site_media/static/pinax/css/groups.css" />
<link rel="stylesheet" href="/site_media/static/pinax/css/locations.css"
/>
<link rel="stylesheet" href="/site_media/static/pinax/css/nav.css" />
<link rel="stylesheet" href="/site_media/static/pinax/css/messages.css" />
<link rel="stylesheet" href="/site_media/static/pinax/css/microblogging.css"
/>
<link rel="stylesheet" href="/site_media/static/pinax/css/pagination.css"
/>
<link rel="stylesheet" href="/site_media/static/pinax/css/photos.css" />
<link rel="stylesheet" href="/site_media/static/pinax/css/tabs.css" />
<link rel="stylesheet" href="/site_media/static/pinax/css/topics.css" />
<link rel="stylesheet" href="/site_media/static/pinax/css/wiki.css" />
<link rel="stylesheet" href="/site_media/static/bookmarks/css/bookmarks.css"
/>
<link rel="stylesheet" href="/site_media/static/spices/css/spices.css"
/>
-->
</head>
<body class="">
<div id="wrapper">
<div class="navbar">
<div class="navbar-inner">
<div class="container" style="width: auto;">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="/"><img src="/site_media/static/pinax/images/logo_small_55.png " alt="book" width="173.4" height="46.75" /></a>
<div class="nav-collapse">
<ul class="nav"><li id="tab_profile"><a href="/profiles/profile/admin/">PROFILE</a></li><li id="tab_product_library"><a href="/spices/">PRODUCT DATA</a></li><li id="tab_product_library"><a href="/spices/book_library">book LIBRARY</a></li><li class="dropdown pull-right" id = "community"><a class="dropdown-toggle" href="#">COMMUNITY</a><ul class="dropdown-menu"><li><a href="/profiles">Search </a></li><li><a href="/questions/">Questions and Answers</a></li><li><a href="/spices/view_requests/"> Requests</a></li><li><a href="/">Latest Updates</a></li></ul></li></ul>
<ul class="nav pull-right">
<li class="dropdown pull-right">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<span class="badge badge-warning">(2)</span>
</a>
<ul class="dropdown-menu">
<li><a href="/notices/">All notifications</a></li>
<li class="divider"></li>
<li><a href="/messages/inbox/">Messages</a></li>
<li class="divider"></li>
<li><a href="/invitations/">Invitations</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<!--<b>
admin
</b> -->
<img src="/site_media/static/pinax/images/icons/gear.png" width = "20" height = "20" alt="" />
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="/profiles/edit">Edit Profile</a></li>
<li><a href="/spices/your_components">Manage Parts</a></li>
<li>
<a href="/account/email/">Account</a>
</li>
<li><a href="/admin/">Admin</a></li>
<li class="divider"></li>
<li><a href="/account/logout/">Logout</a></li>
</ul>
</li>
</ul>
<form class="navbar-search pull-right" value = "" action="/search/?q=">
<input type="text" class="search-query span2" name = "q" placeholder="Search">
<i class="icon-search icon-white" onclick=""></i>
</form>
</div>
<!-- /.nav-collapse -->
</div>
</div>
<!-- /navbar-inner -->
</div>
<div class="container-fluid ">
<div id="left_tabs"></div>
<div id="right_tabs" ></div>
<div id="body">
<div class=" row-fluid" id="subnav-outer">
<div class="pull-right" id="subnav-inner">
</div>
</div>
<script type="text/javascript" charset="utf-8" src="/site_media/static/js/raty/js/jquery.raty.min.js"></script>
<script type ="text/javascript">
(function($) {
$(function() {
$('.yourrating').each(function(index,elem){
$(elem).raty({
readOnly: false,
path: "/site_media/static/js/raty/img/",
score: $(elem).children("span:first").text(),
click: function(score, evt) {
var vote_url = "/spices/rate/" + this.id.substring(2) + "/" + score + "/";
$.ajax({
url: vote_url,
success: function(){
alert('vote successful');
}
});
}
});
$('.thingrating').raty({
readOnly: true,
path: "/site_media/static/js/raty/img/",
score: $(elem).children("span:first").text(),
});
});
});
})(jQuery);
</script>
<div class="row-fluid">
<!-- component image -->
<div class="span2">
<div class="row-fluid align-center">
<img src="/site_media/static/pinax/images/library_placeholders/component.png">
<br><br>
<!-- Future CODE <div class="coverart"><img src=/site_media/media/ /></div>-->
</div>
</div>
<div class="span6">
<!-- component Name -->
<div class="row-fluid">
<div class="span6">
<h3>
Book123: component for Books
</h3>
</div>
<fieldset class="inlineLabels">
<div class="thingrating" id="t_5"><span style="display:none;">3</span></div>
</fieldset>
<div class="span6">
</div>
</div>
<!-- Download Button -->
<div class="row-fluid align-left">
<a href="/site_media/media/bookParts/Book123-SDFKSDfsdfasd-component-Books-7.jpg" class="btn btn-medium btn-success" type="submit">Download component</a>
<br>
<br>
<br>
</div>
Please rate the quality of the component after downloading.
<br>
<br>
<div class="yourrating" id="t_5"><span style="display:none;">3</span></div>
<br>
<br>
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active">
<a href="#relatedproducts" data-toggle="tab"><h6>Related Products (26)</h6></a>
</li>
<li>
<a href="#relatedbookparts" data-toggle="tab"><h6>Related book Parts (2)</h6></a>
</li>
<li>
<a href="#comments" data-toggle="tab"><h6>Comments (3)</h6></a>
</li>
</ul>
<div class="tab-content">
<!-- SPECIFICATIONS - Use a for loop to run through the different specifications
If not a spec sheet, just show the description -->
<div class="tab-pane active" id="relatedproducts">
<table class="table">
<tr>
<td><a href = "/spices/323/view_part">OAK 7-140</a></td>
<td><img src="/site_media/static/pinax/images/company_logos/thumbs/Other Vendor.jpg" height="30" width='100' /></td>
</tr>
<tr>
<td><a href = "/spices/327/view_part">OAK 7-14MM</a></td>
<td><img src="/site_media/static/pinax/images/company_logos/thumbs/Other Vendor.jpg" height="30" width='100' /></td>
</tr>
<tr>
<td><a href = "/spices/325/view_part">Book123AMH</a></td>
<td><img src="/site_media/static/pinax/images/company_logos/thumbs/Book Vendor.jpg" height="30" width='100' /></td>
</tr>
<tr>
<td><a href = "/spices/320/view_part">Book123CH</a></td>
<td><img src="/site_media/static/pinax/images/company_logos/thumbs/Book Vendor.jpg" height="30" width='100' /></td>
</tr>
<tr>
<td><a href = "/spices/324/view_part">Book123MH</a></td>
<td><img src="/site_media/static/pinax/images/company_logos/thumbs/Book Vendor.jpg" height="30" width='100' /></td>
</tr>
<tr>
<td><a href = "/spices/322/view_part">Book123H</a></td>
<td><img src="/site_media/static/pinax/images/company_logos/thumbs/Book Vendor.jpg" height="30" width='100' /></td>
</tr>
<tr>
<td><a href = "/spices/329/view_part">Book123H883C</a></td>
<td><img src="/site_media/static/pinax/images/company_logos/thumbs/Book Vendor.jpg" height="30" width='100' /></td>
</tr>
<tr>
<td><a href = "/spices/326/view_part">Book123H883</a></td>
<td><img src="/site_media/static/pinax/images/company_logos/thumbs/Book Vendor.jpg" height="30" width='100' /></td>
</tr>
<tr>
<td><a href = "/spices/321/view_part">Book123AH</a></td>
<td><img src="/site_media/static/pinax/images/company_logos/thumbs/Book Vendor.jpg" height="30" width='100' /></td>
</tr>
<tr>
<td><a href = "/spices/328/view_part">Book123MH883</a></td>
<td><img src="/site_media/static/pinax/images/company_logos/thumbs/Book Vendor.jpg" height="30" width='100' /></td>
</tr>
<tr>
<td><a href = "/search/?q=Book123">View more</a></td>
</tr>
</table>
</div>
<div class="tab-pane active" id="relatedbookparts">
<table class="table">
<tr>
<td><a href = "/spices/5/view_component">Book123</a></td>
<td>component</td>
</tr>
<tr>
<td><a href = "/spices/4/view_component">Book123</a></td>
<td>component</td>
</tr>
<tr>
<td><a href = "/search/?q=Book123">View more</a></td>
<td></td>
</tr>
</table>
</div>
<div class="tab-pane active" id="comments">
<ul class="responses">
<li class="even thread-0 clearfix">
<div class="meta">
<div class="avatar"><img src="/site_media/media/avatars/mary/resized/40/avatars/mary/Beta.jpg" alt="mary" width="40" height="40" /></div>
<div class="details"><a href="/profiles/profile/mary/">mary</a></div>
Oct. 30, 2012
</div>
<div class="bulk">
<div class="body"><p>It's ok but not great.</p></div>
<a class="btn pull-left" href="javascript:toggle_comment_form(2)">Reply</a>
<form class="hidden" method="POST" action="/comments/comment/76/5/2/" id="comment_form_2">
<div style='display:none'><input type='hidden' name='csrfmiddlewaretoken' value='745d1d9de808f6067468636314711afa' /></div>
<table><tr><td><textarea rows="10" cols="40" name="comment"></textarea></td></tr>
<tr><td><input type="submit" value="Post Response" /></td></tr></table>
<input type="hidden" name="next" value="/spices/5/view_component/" />
</form>
</div>
</li>
<li class="odd thread-1 clearfix">
<div class="meta">
<div class="avatar"><img src="/site_media/media/avatars/mary/resized/40/avatars/mary/Beta.jpg" alt="mary" width="40" height="40" /></div>
<div class="details"><a href="/profiles/profile/mary/">mary</a></div>
Oct. 30, 2012
</div>
<div class="bulk">
<div class="body"><p>You should be cooler</p></div>
<a class="btn pull-left" href="javascript:toggle_comment_form(4)">Reply</a>
<form class="hidden" method="POST" action="/comments/comment/76/5/4/" id="comment_form_4">
<div style='display:none'><input type='hidden' name='csrfmiddlewaretoken' value='745d1d9de808f6067468636314711afa' /></div>
<table><tr><td><textarea rows="10" cols="40" name="comment"></textarea></td></tr>
<tr><td><input type="submit" value="Post Response" /></td></tr></table>
<input type="hidden" name="next" value="/spices/5/view_component/" />
</form>
</div>
</li>
<li class="even thread-0 clearfix">
<div class="meta">
<div class="avatar"><img src="/site_media/media/avatars/mary/resized/40/avatars/mary/Beta.jpg" alt="mary" width="40" height="40" /></div>
<div class="details"><a href="/profiles/profile/mary/">mary</a></div>
Oct. 30, 2012
</div>
<div class="bulk">
<div class="body"><p>Ok cool</p></div>
<a class="btn pull-left" href="javascript:toggle_comment_form(3)">Reply</a>
<form class="hidden" method="POST" action="/comments/comment/76/5/3/" id="comment_form_3">
<div style='display:none'><input type='hidden' name='csrfmiddlewaretoken' value='745d1d9de808f6067468636314711afa' /></div>
<table><tr><td><textarea rows="10" cols="40" name="comment"></textarea></td></tr>
<tr><td><input type="submit" value="Post Response" /></td></tr></table>
<input type="hidden" name="next" value="/spices/5/view_component/" />
</form>
</div>
</li>
</ul>
<fieldset class="inlineLabels">
<form class="uniForm" method="POST" action="/comments/comment/76/5/">
<div style='display:none'><input type='hidden' name='csrfmiddlewaretoken' value='745d1d9de808f6067468636314711afa' /></div>
<div class="ctrlHolder">
<label for="id_comment">Comment</label>
<textarea id="id_comment" rows="10" cols="40" name="comment"></textarea>
</div>
<div class="form_block">
<input type="hidden" name="next" value="/spices/5/view_component/" />
<input type="submit" value="Post Response" />
</div>
</form>
</fieldset>
</div>
<br>
<br>
</div>
</div>
</div>
<div class="span4">
<div class="row-fluid">
<table class="table" id="information-table">
<tbody>
<tr>
<td>
<div id="profile_avatar">
<img src="/site_media/media/avatars/mary/resized/27/avatars/mary/Beta.jpg" alt="mary" width="27" height="27" />
</div> </td>
<td>Added by</td>
<td><a href="/profiles/profile/mary/">mary</a></td>
</tr>
<tr>
<td>
<img src="/site_media/static/pinax/images/icons/addedicon.png">
</td>
<td>
Added on
</td>
<td>October 30, 2012</td>
</tr>
<tr>
<td>
<img src="/site_media/static/pinax/images/icons/handsnap.png">
</td>
<td>
Downloads
</td>
<td>
193
</td>
</tr>
</tbody>
</table>
</div>
<!-- Twitter Button -->
<div class="row-fluid align-center">
<a href="#twitterlink" class="btn valign-middle">
Share
<img class="small-twitter-icon" src="/site_media/static/pinax/images/icons/twitter-icon.png" alt="" width="22" height="18" />
</a>
</div>
<br>
<div class="row-fluid align-center">
<br>
<h4>Find More Books Libraries</h4>
<br>
<div class="details inline">
<a rel="tooltip" href="/spices/bookparts/Books/component" title="components"><img src="/site_media/static/pinax/images/library_placeholders/component.png" width = "20%"></a> <a rel="tooltip" href="/spices/bookparts/Books/component" title="components"><img src="/site_media/static/pinax/images/library_placeholders/component.png" width = "20%"></a> <a rel="tooltip" href="/spices/bookparts/Books/component" title="components"><img src="/site_media/static/pinax/images/library_placeholders/component.png" width = "20%"></a>
</div>
</div>
<br>
<div class="row-fluid">
<div class="span8">
<h3>
</h3>
</div>
<div class="span4 align-center">
</div>
</div>
<script type="text/javascript">
//javascript to send messages
jQuery(document).ready(function($) {
//activate tooltips
$('[rel=tooltip]').tooltip();
});
function sendMessage(){
//retrieve the inputs
var form = $('#sendMessageForm');
var recipient = form.find('#message_recipient');
var subject = form.find('#message_subject');
var body = form.find('#message_data');
var fields = [recipient, subject, body];
for(var i = 0; i <fields.length; i++){
var field = fields[i];
if(field.val() == ""){
field.closest('.control-group').addClass('error');
field.next('.help-inline').text('Please enter this field');
}
else{
field.closest('.control-group').removeClass('error');
}
}
if(!fieldsNotFilled){
$.ajax({
url: '/messages/compose/',
type: 'POST',
data: {
csrfmiddlewaretoken: '745d1d9de808f6067468636314711afa',
recipient: recipient.val(),
subject: subject.val(),
body: body.val(),
},
complete: function(xhr, textStatus) {
},
});
}
}
</script>
</div>
<script src="/site_media/static/pinax/js/facebox.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('a[rel*=facebox]').facebox({
loadingImage: '/site_media/static/pinax/img/facebox/loading.gif',
closeImage: '/site_media/static/pinax/img/facebox/closelabel.gif'
});
$(document).bind('reveal.facebox', function() {
$("form.in_facebox").submit(function() {
form = this;
jQuery.facebox(function($) {
fields = jQuery(form).find("input[type='text']").filter(":enabled");
params = {}
fields.each(function() {
params[this.name] = this.value;
});
jQuery.post(form.action, params,
function(data, textStatus) {
jQuery.facebox(data);
}
);
});
return false;
});
});
});
</script>
<script type="text/javascript" src="/site_media/static/pinax/js/topics.js">
</script>
</div>
<div id="push-footer"></div>
</div>
<div id="footer">
<aside><p style="color:#1E90FF;background-color:white;text-align:center;font-size:125%;">
Hi there, early book member! Want to provide a suggestion or report a bug? <a href="mailto:mary@book.com?subject=book: I have a comment&body=[sub]" onclick="this.href = this.href.replace('[sub]',window.location)"> Send Feedback</a>
</p></aside>
<div id="footer-inner" class="row-fluid align-center">
<div class="row-fluid">
<div id="legal">
<span>© 2012 book</span> -
<a href="/about/">ABOUT US</a>
-
<a href="/about/terms/">TERMS OF SERVICE</a>
-
<a href="/about/privacy/">PRIVACY POLICY</a>
-
<a href="/blog/"> BLOG </a>
</div>
</div>
</div>
</div>
Maybe the problem is that you are initializing
ratyon'.thingrating'inside$.each()? Try this: