如何从 Rails 表单提交调用 JS 函数答案

【问题标题】：How to call a JS function from rails form submit如何从 Rails 表单提交调用 JS 函数
【发布时间】：2015-09-03 18:08:15
【问题描述】：

我想在我的 Rails 表单中的按钮被点击时调用一个 JS 函数。该函数在下面的.js.erb 文件中定义。

当我单击按钮时，Chrome 的 JS 控制台会抛出以下错误：

Uncaught ReferenceError: logTime is not defined

我知道这意味着它找不到函数，但我不明白为什么。特别是因为我在文件中添加了<%= javascript_include_tag "track.js.erb" %>。有任何想法吗？

先道歉，但我的 Google-fu 没有结果。

_track_time_form.html.erb

<div id="countdown-timer"></div>
<div id="playback-button">&#9658;</div>
<div id="track-time-form">
    <%= form_for @project, :url => { :action => "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", :onclick => "logTime()" %></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 formUl = $("#track-time-form ul", $(timeTrackingForm.document));
var formLi = $("#track-time-form li", $(timeTrackingForm.document));
var logTimeButton = $("#log-time-button", $(timeTrackingForm.document));
var timerPaused;

//initialise timer 
$(timeTrackingForm.document).ready(function(){
    initialiseTimer();
    style();
    $(playbackControls).click(function() {
        playOrPause();
    });
});

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

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;
    }
}

function logTime() {
    $(timer).timer('pause');
    var secondsTracked = $(timer).data('seconds');
    $('input:hidden').val(secondsTracked);
    $('#countdown-timer').timer('reset');
}

【问题讨论】：

在 Chrome 调试器的 Sources 选项卡中查看渲染页面的源代码时，你能找到这个特定的 js 函数吗？它没有加载或某些语法错误阻止它在浏览器读取时成为有效的 Javascript，从而使其不可用。
肯定没有名为“track.js.erb”的资产； erb 是经过处理以创建“track.js”的服务器端文件。
你为什么不在你的javascript中设置一个合适的事件监听器呢？ $('#track-time-form>form').submit(function(){ });
@JECarterII 奇怪的是，我没有从源选项卡中得到任何东西。只有“关于：空白”。这可能是因为它是一个弹出窗口吗？
@max 您的建议在一定程度上起作用，但由于某种原因，脚本似乎在$('input:hidden').val(secondsTracked); 之后停止执行。任何想法为什么会这样？

标签： javascript jquery html ruby-on-rails jquery-events

【解决方案1】：

对于任何对解决方案感兴趣的未来读者，这是我解决此问题的方法（非常感谢上面有帮助的评论者）。

我在 track.js.erb 中为表单添加了一个事件监听器，它在单击按钮时触发（但在表单实际提交并将数据发送到控制器之前）。这里是：

var actual_form = $("#new_project", $(timeTrackingForm.document));

$(actual_form).submit(function(){ 
        $(timer).timer('pause');
        timerPaused = true;
        var secondsTracked = $(timer).data('seconds');
        $(hidden).val(secondsTracked);
        resetTimerDisplay();
    });

【讨论】：