1

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

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

我想要一个包含两个数据字段的小弹出窗口，而不是使用 2 个提示代码行。我应该如何完成它？我应该使用引导模式吗？

谢谢

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

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

1 回答 1

1

您的代码存在一些错误，但重要的是您需要将事件处理程序绑定到 Save Changes 按钮。您的代码期望 #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')

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

于 2012-12-09T21:41:01.623 回答