每个按钮调用创建操作(不仅“提交”一个)

时间:2013-05-15 07:45:33

标签: html ruby-on-rails ruby-on-rails-3 coffeescript

我有一个交易表单,包含一些文本和选择字段。有一个文本字段date,我使用jQuery.ui.datepicker。我隐藏了文本字段并改为使用按钮(“今天”,“昨天”和“日历图标”按钮)。 “昨天”和“今天”按钮更改了隐藏字段的值,但是如果其他字段被填充或导致状态为500的内部服务器错误,他们也会调用submit操作并创建事务。我需要调用{{1只需单击create按钮即可执行操作。

这是submit

的创建操作
transaction_controller.rb

这是def create if @transaction.save respond_to do |format| format.html { redirect_to root_url } format.js end else render 'pages/index' end end 交易操作的transaction_form

new

这是<%= form_for @transaction, remote: true do |f| %> <%= render 'shared/error_messages', object: f.object %> <div class="form-row"> <%= f.text_field :name, class: 'input-medium', 'placeholder' => 'Name' %> <%= f.text_field :amount, class: 'input-small', 'placeholder' => '$' %> <%= f.submit 'Add', class: 'btn btn-primary' %> </div> <%= f.collection_select :category_id, current_user.categories.all, :id, :name, {}, class: 'input-medium' %> <%= f.collection_select :account_id, current_user.accounts.all, :id, :name, {}, class: 'input-small' %> <%= f.text_field :date, 'value' => Date.today %> <div class="btn-group" id="transaction_date_group"> <button class="btn active" id="transaction_today">Today</button> <button class="btn" id="transaction_yesterday">Yesterday</button> <button class="btn dropdown-toggle" data-toggle="dropdown" id="transaction_date_dropdown"> <i class="icon-calendar"></i> </button> </div> <% end %>

create.js.erb

这是$('#transactions_table').prepend('<%= j render(@transaction) %>'); $('#new_transaction').each(function () { this.reset(); }); <% if @transaction.category_id == current_user.categories.first.id && current_user.categories.first.balance == @transaction.amount %> $('#categories_table').append('<%= j render(@category) %>'); <% end %> $('#edit_category_<%= @transaction.category_id %>').replaceWith('<%= j render(@category) %>'); $('#edit_category_<%= @transaction.category_id %>').hide().fadeIn('slow'); $('#edit_account_<%= @transaction.account_id %>').replaceWith('<%= j render(@account) %>'); $('#edit_account_<%= @transaction.account_id %>').hide().fadeIn('slow'); $('#accounts_total').replaceWith('<td id="accounts_total"><%= current_user.accounts.sum(:balance) %></td>'); $('#accounts_total').hide().fadeIn('slow'); ,用于transaction.js.coffee显示和更改按钮类,同时点击。

datepicker

谢谢!

2 个答案:

答案 0 :(得分:0)

在每次点击事件回调中添加return false

$("#transaction_yesterday").click ->
  ..
  $("#transaction_date").val yesterday
  return false

答案 1 :(得分:0)

来自fine specification

  

未指定button属性的type元素表示与button元素设置为type的{​​{1}}元素相同的内容。

所以这个:

"submit"
事实上,

是一个提交按钮和提交按钮提交表单。如果您不希望<button class="btn active" id="transaction_today">Today</button> 提交表单,请使用type="button"按钮说明:

<button>

一些较旧的IE默认为<button type="button" class="btn active" id="transaction_today">Today</button> 尽管(或尽管)规范说明了这一点,因此当您使用{{1}时,总是指定type="button"属性}}