开发者问题收集

为什么我的 JS 脚本在 Rails4 中没有 form.submit()?

2014-03-19
57

在 Inspections#show 的上下文中,我使用 will_paginate 遍历项目集合,当客户单击 will_paginate 的页面对象列表中的另一个页面的链接时,其分数将发布到数据库。由于 will_paginate 不适用于 POST,因此我使用了 这篇文章 中的答案,我在此处的片段中使用了该答案:

http://jsfiddle.net/sam452/pWrg3/4/

html

 <div class="pagination"><a class="previous_page" rel="prev start" href="/inspections/1?page=1">&#8592; Previous</a> <a rel="prev start" href="/inspections/1?page=1">1</a> <em class="current">2</em> <a rel="next" href="/inspections/1?page=3">3</a> <a href="/inspections/1?page=4">4</a> <a href="/inspections/1?page=5">5</a> <a href="/inspections/1?page=6">6</a> <a class="next_page" rel="next" href="/inspections/1?page=3">Next &#8594;</a></div>

 <div class="item_enclosure row">
    <div class="item_text small-9 large-9 columns">
        Change Fund/Petty Cash (810) reviewed daily?
    </div>
    <div class="small-3 columns">
        <div class="item_scoring">
            <div class="row">
                <div class="item_score item-8 small-6 columns">
                    <form accept-charset="UTF-8" action="/scores" class="new_score" data-remote="true" id="new_score" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /></div>
                    <input id="score_score_item" name="score[score_item]" placeholder="5" type="text" />
                    <input id="score_item_id" name="score[item_id]" type="hidden" value="8" />
                    <input id="score_inspection_id" name="score[inspection_id]" type="hidden" value="1" />
                    <input name="commit" type="submit" value="Edit inspection" />

            </div>
        </div>
    </div>
</div>

app/assets/javascripts/inspection.js

 $(".pagination a").click(function(e){e.preventDefault();
var tp_id = $(this).attr('href').split('?page=')[1]; 
$('form').append("<input type='hidden' name='page' value='"+ tp_id +"'>");
$('form').submit();
 });

app/views/inspection.js.erb

 $('body').append('<%= @score.score_item %>')

应用程序/views/inspections/show.html.erb

 <%= will_paginate @items %>
 <% for item in @items %>
   .. other html suppressed
       <div class="item_score item-<%= item.id %> small-6 columns">
                    <%= form_for @score, remote: true do |f| %>
                    <%= f.text_field :score_item, placeholder: item.high_score %>
                    <%= f.hidden_field :item_id, value: item.id %>
                    <%= f.hidden_field :inspection_id, value: params[:id] %>
                    <%= f.submit submit_text %>
                    <% end %>
       </div>

   .. other html suppressed
 <% end %>

inspection.rb

 class Inspection < ActiveRecord::Base
   has_many :scores
   accepts_nested_attributes_for :scores
 end

score.rb

 class Score < ActiveRecord::Base
belongs_to :inspection
 end

scores_controller.rb

 class ScoresController < ApplicationController
   def create
    @score = Score.new(score_params)
            @inspection = Inspection.find(@score.inspection_id)
    if @score.save
        binding.pry
        respond_to do |format|
        format.html {redirect_to inspection_path(@inspection, page: params[:page]), notice: "Scorex was accepted."}
        format.js
        end

           else
        render action: 'new'
    end
end

   private
   def score_params
     params.require(:score).permit(:score_item, :inspection_id, :item_id, :page)
   end
 end

inspection_controller.rb

 class InspectionsController < ApplicationController
     def show
     #binding.pry   
     @inspection = Inspection.find(params[:id])
     @items = Item.where(:id ==   @survey.id).order("sub_category").page(params[:page]).per_page(1)
    @score = @inspection.scores.build
    end
 end

因此,对于 JS 的每一行,每行都有效。第一行正确输出。我通过将代码换成 Alert() 来测试这一点,以确保 PreventDefault 正常工作。第二行输出变量的正确值,如 console.log() 所示。第三行有效,因为我在控制台中看到了浏览器中的代码。提交成功,重定向成功,只是未传递 :page 参数。

单击 will_paginate 链接执行对正确 :page 参数的 GET。服务器日志中没有 POST 操作。好像未识别 PreventDefault()。为此,当我查看 Chrome 的源并单击检查时,我看到结果:“1?page=2”。也许 Chrome 不喜欢我的 JS?我确信这是我忽略的一些愚蠢的事情。

我尝试从 form_for 中删除 ajax 调用,但没有什么不同。帖子成功,但未找到页面参数,因此默认为 1。

为什么没有发生表单 submit(),为什么没有传递页面参数?谢谢,sam

1个回答

我的小提琴

在您的 jsfiddle 中,您有一个不需要的空间 :D

< input

没有包含 jquery,开头的 $(function(){ 会很好 ;)

还添加了

$('form#new_score').append(
$('form#new_score').submit(

我的帖子:utf8:✓ 分数[score_item]:分数[item_id]:8 分数[inspection_id]:1 页面:4

Mr.TK
2014-03-20