Events cannot be deleted only under certain conditions in FullCalendar of jQuery plug-in

Asked 2 years ago, Updated 2 years ago, 138 views

FullCalendar 2.3.1
http://fullcalendar.io/

Ruby 2.1.5 p273
Rails 4.2.1

I use a jQuery plug-in called FullCalender to create a calendar that can be rewritten by Rails and ajax.
Event creation, reading, updating, and deletion worked pretty well, but only certain cases cannot be deleted.
Also, we cannot determine the cause of the problem.
If you have any ideas on how to identify the problem, please let me know.

If you can delete it

  • Events drawn by reading normal data (eventSources)
  • Event drawn with renderEvent

If you cannot delete it

  • Drag-and-drop events from the outside (eventReceive)
    Deleting does not delete data in the drawing, but the data in the database has been deleted.
    However, you can successfully delete it by reloading your browser.

http://fullcalendar.io/docs/event_data/removeEvents/
removeEvent only specifies the id of the event.
The rails code is that when you click on an event in the calendar, the form will appear in the jQueryUI dialog, from which you can edit and delete it.
Deleting is a normal link.

Form

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

Controller

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

View (destroy.js.coffee)
The fullCalendar does not emit any errors, and JavaScript runs to the end to rewrite the list.

$('#dialog').dialog('close')
$('#modal_area') .html('')
id=<%[email protected]%>

$('#fullcalendar') .fullCalendar('removeEvents',id)
$.ajax
  type: 'GET'
  url: "ttevents/issue_lists"

Incidentally, the FullCalendar drag-and-drop code is as follows.
When the event div written below is dragged and dropped into the calendar, an 'eventReceive' event occurs. Then, create an Event object from the div data attribute.
POST it to rails at $.ajax.
Then, rails will return the data with id and automatically calculate and return the color of the event.
Now update the original Event object.
The color changes, and you can edit the event by clicking on it, so I think it's going well so far.

 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"
        })
      }
    });
  },

View events for drag-and-drop

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

Perhaps the destroy.js.coffee is working in other cases, so there will be no mistake as a destroy function.
I thought the id might be a different type such as String or Number, so I put out a typeof in console.log, but they all seemed to be numbers.
Even if it's a freshly made event, the color will change, so I think the update is done well. In other words, the event seems to have a valid id.
Also, once I edited it, I could delete it without reloading it.

javascript ruby-on-rails jquery jquery-ui fullcalendar

2022-09-30 20:47

1 Answers

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

Please check if the ttevent.id in this code contains a valid value.
The behavior you want to delete with the event.ID specification has been verified, and the ID is not configured on the event side that the fullcalendar has.


2022-09-30 20:47

If you have any answers or tips


© 2024 OneMinuteCode. All rights reserved.