我正在嘗試使用rate it jquery創建一些簡單的ajax評級。 我可以看到星星並按下它們。但我的表單不提交。Rails如何創建ajax星級評分
如何使用ajax提交評分?
在我的表我有兩列:
rating_score => The current score
ratings => The number of ratings which led to the score
我的駕駛員學校放映視圖:
<h1><%= @kategori.h2.force_encoding("UTF-8") %></h1>
<div id="konkurrancer"><%= render 'konkurrencer', :remote => true %></div>
我konkurrencer部分:
<div id="tabel">
<table id="tabel1">
<tr id="toptr">
<td><%= sortable "name", "Navn" %></td>
</tr>
<% @konkurrancer.each do |vind| %>
<tr class="thumbnail-item" onclick="window.open('<%= vind.tracking %>')">
<td><%= truncate(vind.name.force_encoding("UTF-8"), :length => 45) %></td>
<td>
<div id="container">
<%= render :partial => "rating", :remote => true, :locals => { :vind => vind } %>
</div>
</td>
</tr>
<% end %>
</table>
<div id="pagenavi">
<%= hidden_field_tag :direction, params[:direction] %>
<%= hidden_field_tag :sort, params[:sort] %>
</div>
</div>
我的等級分:
<%= form_for(:vind, :url => rate_path(vind.id), :remote => true, :html => { :method => 'put', :id => "rateform"}) do |f| %>
<%= f.text_field :ratings, :size => 1, :min => 1, :max => 6, :value => 1, :type => 'range', :step => '1', :id => "#{vind.id}" %>
<div class="rateit" id="rateit10b" data-rateit-backingfld="#<%= vind.id %>" data-rateit-resetable="false" ></div>
<% end %>
<script type ="text/javascript">
$('.rateit').bind('rated reset', function (e) {
var ri = $(this);
//if the use pressed reset, it will get value: 0 (to be compatible with the HTML range control), we could check if e.type == 'reset', and then set the value to null .
var value = ri.rateit('value');
var frmurl = ri.closest('form').attr('action'); //get the url from the form
$.ajax({
url: frmurl, //your server side script
data: { ratings: value }, //our data
type: 'PUT',
success: function (data) {
//write here something when everything went ok
},
error: function (jxhr, msg, err) {
alert(msg); //something went wrong.
}
});
});
</script>
我rate.js:
$('#<%= @container %>').html('<%= escape_javascript(render(partial: 'rating', locals: { konkurrancer: @konkurrancer })) %>');
我的控制器:
class KonkurrancersController < ApplicationController
def rate
@konkurrancer = Konkurrancer.find(params[:id])
@container = "Konkurrancer"[email protected]_s
@theme.rating_score += params[:rating].to_i
@theme.ratings += 1
@theme.save
respond_to do |format|
format.js
end
end
end
這是我的評價我的瀏覽器。當我按下gem Vind時,參數等級將與ajax一起發送,值爲5.問題是我希望它在按星號時發送,而不是使用提交按鈕。
我當表單提交控制檯:
Started POST "/konkurrancers/rate/12" for 127.0.0.1 at 2011-04-04 23:37:56 +0200
Processing by KonkurrancersController#rate as JS
Parameters: {"utf8"=>"Ô£ô", "authenticity_token"=>"3IqZ6IfvaFYQnVeMYu2a09PcCnm
VW52vaEp2KjfJ1g8=", "vind"=>{"rating"=>"6"}, "commit"=>"Gem Vind", "id"=>"12"}
←[1m←[35mKonkurrancer Load (1.0ms)←[0m SELECT `konkurrancers`.* FROM `konkurr
ancers`
←[1m←[36mCACHE (0.0ms)←[0m ←[1mSELECT `konkurrancers`.* FROM `konkurrancers`←
[0m
←[1m←[35mCACHE (0.0ms)←[0m SELECT `konkurrancers`.* FROM `konkurrancers`
←[1m←[36mKonkurrancer Load (1.0ms)←[0m ←[1mSELECT `konkurrancers`.* FROM `kon
kurrancers` WHERE (`konkurrancers`.`cached_slug` = '12') LIMIT 1←[0m
←[1m←[35mSQL (1.0ms)←[0m SELECT sluggable_id FROM slugs WHERE ((slugs.sluggab
le_type = 'Konkurrancer' AND slugs.name = '12' AND slugs.sequence = 1))
←[1m←[36mKonkurrancer Load (0.0ms)←[0m ←[1mSELECT `konkurrancers`.* FROM `kon
kurrancers` WHERE (`konkurrancers`.`id` = 12) LIMIT 1←[0m
←[1m←[35mSQL (0.0ms)←[0m BEGIN
←[1m←[36mSlug Load (22.0ms)←[0m ←[1mSELECT `slugs`.* FROM `slugs` WHERE (`slu
gs`.sluggable_id = 12 AND `slugs`.sluggable_type = 'Konkurrancer') ORDER BY id D
ESC LIMIT 1←[0m
←[1m←[35mAREL (14.0ms)←[0m UPDATE `konkurrancers` SET `rating_score` = 17, `r
atings` = 5, `updated_at` = '2011-04-04 21:37:57' WHERE (`konkurrancers`.`id` =
12)
←[1m←[36mSQL (16.0ms)←[0m ←[1mCOMMIT←[0m
Rendered konkurrancers/_rating.html.erb (1.0ms)
Rendered konkurrancers/rate.js.erb (24.0ms)
Completed 200 OK in 439ms (Views: 226.0ms | ActiveRecord: 55.0ms)
我在查看HTML:http://pastie.org/1756195
我如何提交星級評分與阿賈克斯? – 2011-04-02 22:52:03
你可以縮小「表單不提交」的含義嗎?你在看日誌嗎?服務器是否收到請求?你在jQuery(document).ready中插入了插件嗎? – 2011-04-03 02:26:14
表單僅在按下按鈕時纔會提交。當你說我應該在jQuery(document).read中連接插件時,你指的是什麼。我在我的頭文件中包含了jQuery腳本。 – 2011-04-05 08:59:52