ruby​​ on rails coffeescript输入表格

Question

我在rails应用程序中使用fullcalender。 我有以下的CoffeeScript代码：

select: (start, end, allDay) -> 
    title = prompt("Event Title:", "") 
    hours = prompt("Hours", "") 
    if title 
    ... 

代替使用2个提示代码行，我想有一个与两个数据字段小弹出窗口。我应该如何实现它？我应该使用Bootstrap模式吗？

感谢

OK --- 我创造了这个模式，它显示罚款：

<div id="calModal" class="modal hide fade" tabindex="-1" role="dialog" aria- labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-header"> 
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
    <h3 id="myModalLabel">Create Labor</h3> 
    </div> 
    <div class="modal-body"> 
    <form class="form-inline" method="get"> 
     <input type="text" id="title" class="input" placeholder="Title" name="title"> 
     <input type="floating" id="hours" class="input" placeholder="Hours" name="hours"> 
    </form> 
    </div> 
    <div class="modal-footer"> 
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button> 
    <button class="btn btn-primary">Save changes</button> 
    </div> 
</div>` 

但是，对于标题和小时值不在我的CoffeeScript代码的其余部分可用：

select: (start, end, allDay) -> 
     $('#calModal').modal('show') 
     title = $(".modal-body #title").val 
     hours = $(".modal-body #hours").val 
     if title 
     $.create "/events/", 
      event: 
      title: title, 
      starts_at: "" + start, 
      ends_at: "" + end, 
      all_day: allDay, 
      workorder_id: 1, 
      # need a modal for inputing these fields 
      hours: hours, 
      employee_id: 1 
      # pickup the current employee 
     $('#calendar').fullCalendar('refetchEvents')` 

这些陈述是不工作：

title = $(".modal-body #title").val 
    hours = $(".modal-body #hours").val 

Answer 1

您的代码存在一些错误，但重要的是您需要将事件处理程序绑定到“保存更改”按钮。你的代码期望#title和其他字段的值在显示模式后立即出现，当然它不会。保存更改按钮上的事件处理程序应该1）关闭模式2）检查表单域的值。

我有一个ID添加到保存更改按钮，即可轻松引用它：

<button id="savebtn" class="btn btn-primary">Save changes</button> 

还发现，当你需要调用jQuery.val（），您使用jQuery.val - 即通话该方法而不只是参考它

下面的Coffeescript将打开页面加载模式，然后关闭模式点击保存更改并记录表单字段值到Javascript控制台（我使用coffeescript 1.3.1，因为这是我碰巧有什么）

$ -> 
    $('#savebtn').bind 'click', (event) => 
     $("#calModal").modal('hide') 
     title = $(".modal-body #title").val() 
     hours = $(".modal-body #hours").val() 
     console.log title 
     console.log hours 
     return 


    $('#calModal').modal('show') 

使用上面的代码片段，您应该能够让代码的其余部分工作。