1

Railsアプリでフルカレンダーを使用しています。私は次のコーヒースクリプトコードを持っています：

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

2つのプロンプトコード行を使用する代わりに、両方のデータフィールドを含む小さなポップアップウィンドウが必要です。どのようにそれを達成する必要がありますか？ブートストラップモーダルを使用する必要がありますか？

ありがとう

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

しかし、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

コードにはいくつかのエラーがありますが、重要なのは、イベントハンドラーを[変更の保存]ボタンにバインドする必要があることです。あなたのコードは、モーダルを表示した直後に#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')

上記のスニペットが機能することで、残りのコードを機能させることができるはずです。

于 2012-12-09T21:41:01.623 に答える