javascript - ruby on Rails CoffeeScript 输入表单

Question

我在 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

Answer 1

您的代码存在一些错误，但最重要的一个错误是您需要将事件处理程序绑定(bind)到“保存更改”按钮。您的代码期望 #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')

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