Rails:弹出窗口中的远程表单,不调用控制器操作

时间:2015-09-05 16:54:43

标签: javascript jquery ruby-on-rails ajax put

我正在撰写时间跟踪应用。我的Project模型具有time_logged属性。

我使用远程表单 - 在弹出窗口中呈现 - 来记录用户的时间。 jQuery事件处理程序在提交时将跟踪的时间(以秒为单位)分配给表单中的隐藏字段。所有的JS都正在正确执行。

控制器应调用一种方法,该方法记录在表单中选择的项目所跟踪的时间,但项目永远不会更新。我认为表格没有正确地调用控制器动作,或者我编写控制器的方式有问题。

但我无法弄清楚是什么。我将在下面提供相关的代码段。

projects_controller.rb

respond_to :html, :js

  def track
    @project = Project.new 
  end 

  def log_time
    @project = Project.find(params[:project][:id])
    @project.increment_time_logged(project_log_time_params.to_i)
  end

  private 

    def project_params
      params.require(:project).permit(:id, :name, :fee, :client_id)
    end

    def project_log_time_params
      params.require(:project).permit(:time_logged)
    end 

project.rb

  def increment_time_logged(number_of_seconds)
    self.time_logged += number_of_seconds
  end 

的routes.rb

  match '/projects/track-time', to: 'projects#track', via: 'get'
  match '/projects/log-time', to: 'projects#log_time', via: 'put'

_track_time_form.html.erb

<%= javascript_include_tag "track.js.erb" %>
<div id="countdown-timer"></div>
<div id="playback-button">&#9658;</div>
<div id="track-time-form">
    <%= form_for @project, :url => "/projects/log-time", remote: true do |p| %>
        <ul>
            <li><%= p.label :project, "Project:"%><br>
            <%= p.collection_select(:id, current_user.projects, :id, :name) %></li>

            <%= p.hidden_field :time_logged, :value => 0 %> <!-- value set by script in log_time.js.erb -->

            <li><%= p.submit "Log time", id: "log-time-button" %></li>
        </ul>
    <% end %>
</div> 

track.js.erb

//initialise form 
timeTrackingForm = window.open("", "", "height=700,width=500");
$(timeTrackingForm.document.body).html("<%= j render( :partial => 'track_time_form' ) %>");

//assign variables 
var timer = $("#countdown-timer", $(timeTrackingForm.document));
var playbackControls = $("#playback-button", $(timeTrackingForm.document));
var form = $("#track-time-form", $(timeTrackingForm.document));
var actual_form = $("#new_project", $(timeTrackingForm.document)); 
var formUl = $("#track-time-form ul", $(timeTrackingForm.document));
var formLi = $("#track-time-form li", $(timeTrackingForm.document));
var logTimeButton = $("#log-time-button", $(timeTrackingForm.document));
var hidden = $("input:hidden", $(timeTrackingForm.document));
var timerPaused;

//initialise timer 
$(timeTrackingForm.document).ready(function(){
    initialiseTimer();
    style();
    $(playbackControls).click(function() {
        playOrPause();
    });
    $(actual_form).submit(function(){ 
        $(timer).timer('pause');
        timerPaused = true;
        var secondsTracked = $(timer).data('seconds');
        $(hidden).val(secondsTracked);
        resetTimerDisplay();
    }); 
});

function initialiseTimer() {
    $(timer).timer({
        format: '%H:%M:%S'
    });
    $(timer).timer('pause');
    timerPaused = true;
}

function resetTimerDisplay() {
    $(timer).timer('reset');
}

function style() {
    $(timer).css({'color':'black','font-size':'50px', 'margin':'auto', 'width':'180px'});
    $(playbackControls).css({'color':'#290052', 'font-size':'50px', 'margin':'auto', 'width':'55px'});
    $(form).css({'width':'300px','margin':'auto'});
    $(formUl).css({'list-style-type':'none'});
    $(formLi).css({'margin':'0 0 25px 0','font-sizeL':'18px','font-family':'Arial'});
    $(logTimeButton).css({'width':'180px','font-size':'18px','background-color':'green','color':'white','margin-top':'15px'});
}

function playOrPause() {
    if (timerPaused == true) {
        $(timer).timer('resume');
        timerPaused = false;
    }
    else {
        $(timer).timer('pause')
        timerPaused = true;
    }
}

1 个答案:

答案 0 :(得分:0)

您的模型看起来有问题。目前,您只更改属性,但不将记录保存到数据库。

更改此

nm

对此:

 def increment_time_logged(number_of_seconds)
    self.time_logged += number_of_seconds
  end 

或者,如果您想跳过活动记录验证,请使用:

 def increment_time_logged(number_of_seconds)
    self.time_logged += number_of_seconds
    self.save
 end