ruby on rails 咖啡脚本输入表单答案

【问题标题】：ruby on rails coffeescript input formruby on rails 咖啡脚本输入表单
【发布时间】：2012-11-27 02:54:20
【问题描述】：

我在 rails 应用程序中使用 fullcalender。我有以下咖啡脚本代码：

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>`

但是，title 和 hours 的值在我的其余咖啡脚本代码中不可用：

   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

【问题讨论】：

模态对话框可以工作，是的。

标签： javascript jquery ruby-on-rails twitter-bootstrap coffeescript

【解决方案1】：

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

我必须向 Save Changes 按钮添加一个 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')

通过上述 sn-p 功能，您应该能够使其余代码正常工作。

【讨论】：