javascript - Ruby on Rails Coffeescript输入表单

我在Rails应用程序中使用fullcalender。
我有以下coffeescript代码：

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

我不想使用2条提示代码行，而是希望有一个同时包含两个数据字段的小弹出窗口。我应该怎么做？我应该使用Bootstrap模式吗？

谢谢

好 - -
我创建了这个模态，它显示得很好：

   <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

最佳答案

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

我必须在“保存更改”按钮中添加一个ID才能轻松引用它：

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

并且还发现您需要调用jQuery.val（）时正在使用jQuery.val-即调用该方法，而不仅仅是引用它

下面的Coffeescript将在页面加载时打开模式，然后在单击Save Changes时关闭模式，并将表单字段值记录到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')

通过上面的代码片段，您应该能够使其余代码正常工作。