

## 環境

FullCalendar 2.3.1  
<http://fullcalendar.io/>

Ruby 2.1.5 p273  
Rails 4.2.1

## 問題

FullCalenderというjQueryのプラグインを使ってRailsとajaxで書き換えのできるカレンダーを作成しています.  
イベントの作成・読取・更新・削除について、ほぼうまく動いたのですが、一定の場合だけ削除できません.  
また、問題の原因も特定できない状況です.  
なにか問題の特定方法についてアイデアがあれば教えて下さい.

### 削除できる場合

  * 通常のデータの読取をして描画したイベント (eventSources)
  * renderEventで描画をしたイベント (renderEvent)

### 削除できない場合

  * 外からドラッグアンドドロップで描画したイベント (eventReceive)  
削除を実行しても、描画上削除されないだけで、データベースのデータは削除されています.  
ただし、ブラウザをリロードすれば正常に削除できます.

## コード

<http://fullcalendar.io/docs/event_data/removeEvents/>  
removeEventは、eventのidを指定するだけです.  
railsのコードとしては、カレンダーのイベントをクリックするとjQueryUIのダイアログでフォームが立ち上がって、そこから編集と削除ができるという仕組みです.  
削除は普通のリンクです.

フォーム

[code]

    <%= link_to l(:link_to_ttevent_destroy), ttevent_path(@ttevent), method: :delete, 
      data: { confirm: l(:message_destroy_confirm) },remote: true, 
      class: 'button destroy' %>
    
[/code]

コントローラー

[code]

    def destroy
      id = params[:id] 
      @ttevent = Ttevent.find(id)
      @ttevent.destroy
      respond_to do |format|
        format.js
      end
    end
    
[/code]

ビュー(destroy.js.coffee)  
fullCalendarは特にエラーも吐いておらず、JavaScriptも最後まで実行されてリストが書き換えられます.

[code]

    $('#dialog').dialog('close')
    $('#modal_area').html('')
    id = <%= @ttevent.id %>
    
    $('#fullcalendar').fullCalendar('removeEvents', id)
    $.ajax
      type: 'GET'
      url: "ttevents/issue_lists"
    
[/code]

ちなみに、FullCalendarのドラッグアンドドロップのコードは次のとおりです.  
下に書いたイベントdivがカレンダーにドラッグアンドドロップされると、'eventReceive'イベントが発生します.そして、divのdataアトリビュートからEventオブジェクトを作成します.  
それを$.ajaxでrailsにPOSTします.  
すると、railsでidをつけてデータを返し、またイベントの色を自動で計算して返してきます.  
そこで、もともとのEventオブジェクトをアップデートします.  
色も変わりますし、クリックするとイベントを編集できるので、ここまではうまくいっている気がします.

[code]

      eventReceive: function(event, element){
        title = event.title;
        start = event.start.format();
        end = event.end.format();
        issue_id = event.issue_id;
        stick = event.stick;
        $.ajax({
          type: "POST",
          url: "ttevents",
          data: {
            ttevent: {
            start_time: start,
            end_time: end,
            issue_id: issue_id
          }},
          success: function(ttevent,status){
            event.color = ttevent.color;
            event.id = ttevent.id;
            $('#fullcalendar').fullCalendar('updateEvent', event);
            $.ajax({
              type: 'GET',
              url: "ttevents/issue_lists"
            })
          }
        });
      },
    
[/code]

ドラッグアンドドロップ用のイベントのビュー

[code]

    <div class="draggable tt-event box ui-draggable-disabled <%= set_due_date(issue) %>"
      data-duration="00:30" 
      data-issue_id='<%=issue.id %>'
      >
      <%= issue.project.name%> - <%= issue.subject %>
    </div>
    
[/code]

## 問題の切り分け

たぶん他のケースでdestroy.js.coffeeが機能しているからdestroyの機能としてはミスはなさそう.  
idがStringとかNumberとか型違いかもと思い、console.logでtypeofを出してみましたがすべてnumberのようでした.  
作りたてのイベントでもきちんと色も変わりますので、更新はうまくできてると思います.つまり、イベントには有効なidが保持されているようです.  
また、一度編集した後は、リロードしなくても削除できました.


CC BY-SA 3.0
2015-04-29T10:33:29.413
9668
2016-09-13T13:30:42.497
2015-04-29T17:09:23.520
199
199
question
javascript ruby-on-rails jquery jquery-ui fullcalendar
jQueryのプラグインのFullCalendarで一定の場合だけイベントが削除できない

[code]

    success: function(ttevent,status){
        event.color = ttevent.color;
        event.id = ttevent.id;
        $('#fullcalendar').fullCalendar('updateEvent', event);
        $.ajax({
          type: 'GET',
          url: "ttevents/issue_lists"
        })
    }
    
[/code]

このコードの`ttevent.id`に有効な値が入っているか確認してみて下さい。  
`event.ID`の指定で削除する動作は確認済みであり、`fullcalendar`の持っているイベント側に`ID`が設定されていないことが考えられます。


CC BY-SA 3.0
2015-07-09T15:33:15.003
12220
2015-07-09T15:45:30.673
2015-07-09T15:45:30.673
2238
2238
9668
answer