2013-05-15 1 views
0

У меня есть форма для транзакции с некоторыми текстовыми полями и полями. Существует текстовое поле date, где я использую jQuery.ui.datepicker. Вместо этого я скрыл текстовое поле и использовал кнопки (кнопки «сегодня», «вчера» и «календарь»). Кнопки «Вчера» и «Сегодня» изменяют значение скрытого поля, но также вызывают действие submit и создают транзакцию, если заполняются другие поля или вызывают внутреннюю ошибку сервера со статусом 500. Мне нужно вызвать действие 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 показывая и меняющегося классы кнопок, при нажатии.

jQuery -> 
    $("#transaction_date").datepicker dateFormat: "yy-mm-dd" 

    $("#transaction_date_dropdown").click -> 
    if $("#transaction_date_group").hasClass 'open' 
     $("#transaction_date").datepicker 'hide' 
    else 
     $("#transaction_date").datepicker 'show' 
     $("#transaction_today").removeClass 'active' 
     $("#transaction_yesterday").removeClass 'active' 

    $("#transaction_yesterday").click -> 
    $("#transaction_today").removeClass 'active' 
    $("#transaction_yesterday").addClass 'active' 
    yesterday = moment().add('days', -1).format 'YYYY-MM-DD' 
    $("#transaction_date").val yesterday 

    $("#transaction_today").click -> 
    $("#transaction_yesterday").removeClass 'active' 
    $("#transaction_today").addClass 'active' 
    today = moment().format 'YYYY-MM-DD' 
    $("#transaction_date").val today 

Спасибо!

ответ

0

От fine specification:

button элемента, без type атрибута, указанного представляет то же самое, как button элемента с его атрибутом type набором до "submit".

Так что:

<button class="btn active" id="transaction_today">Today</button> 

, на самом деле, кнопку отправки и представить кнопки отправки форм. Если вы не хотите, чтобы ваши <button> S представлений для формы, скажем так, с помощью type="button" кнопки:

<button type="button" class="btn active" id="transaction_today">Today</button> 

Некоторого старого ИЭ по умолчанию type="button" несмотря на (или вопреки), что говорит спецификация, поэтому вы должны всегда указать атрибут type, когда вы используете <button>.

+0

Спасибо! Метод с 'return false' также работает, но я думаю, что этот, с кнопкой' type = ", является более правильным. –

+0

Использование 'return false' прекрасно, пока вы знаете, что происходит, я добавил ответ, чтобы убедиться, что вы знаете, что происходит. Как ни странно, я думаю, что это правильный ответ тоже :) –

+0

@muistooshort Да! твое право.. :) –

0

Добавить вернуть ложен в каждом клик обратных вызовов событий

$("#transaction_yesterday").click -> 
    .. 
    $("#transaction_date").val yesterday 
    return false 
Смежные вопросы