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

时间:2014-03-19 16:11:41

标签: jquery ruby-on-rails-4

在Inspections#show的上下文中,我使用will_paginate迭代项目集合,当客户在will_paginate的页面对象列表中单击另一个页面的链接时,其分数将被POST到数据库。因为will_paginate与POST不兼容,我使用了this 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>

应用程序/资产/ Javascript角/ 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();
 });

应用程序/视图/ inspection.js.erb

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

应用程序/视图/检验/ 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()所示。第三个工作,因为在控制台中我看到浏览器中的代码。提交工作和重定向发生,除了:页面参数没有通过。

单击will_paginate链接会向右:page参数执行GET。在服务器日志中没有POST操作。好像无法识别preventDefault()。为此,当我查看Chrome的Sources并点击Inspection时,我看到了结果:“1?page = 2”。也许Chrome不喜欢我的JS?我确定这是我忽略的一些愚蠢的事情。

我试图从form_for中删除ajax调用,但没有区别。帖子有效,但找不到页面参数,因此默认为1。

为什么表单submit()不会发生,为什么不传递页面参数? thanx,sam

1 个答案:

答案 0 :(得分:1)

My fiddle

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

< input

没有包含jquery和$(函数(){在beggining会很好;)

还添加了

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

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