Rails 4 -Ajax создает события в приложении Fullcalendar в Rails

Question

Я пытаюсь интегрировать камень полного календаря в одном из моих приложений, и я бы связал его, чтобы перетащить мышь на две даты и показать всплывающее окно, где пользователь записывает информацию abou событие и через ajax (без перезагрузки страницы) событие будет создано в базе данных и появится в календаре.

Сейчас у меня есть календарь, показывающий события, которые я создаю вручную, но когда я перетаскиваю мусс до дат, он показывает всплывающее окно для ввода полей и показывает событие в календаре, но когда я обновляю страницу событие исчезает, что означает, что событие не сохраняется в базе данных. Это мой код:

index.json.builder

json.array!(@events) do |event| 
    json.extract! event, :id, :title, :description 
    json.start event.start_time 
    json.end event.end_time 
    json.url event_url(event, format: :html) 
end 

события/index.html.erb

<p id="notice"><%= notice %></p> 

<h1>Listing Events</h1> 

<table> 
    <thead> 
    <tr> 
     <th>Title</th> 
     <th>Description</th> 
     <th>Start time</th> 
     <th>End time</th> 
     <th colspan="3"></th> 
    </tr> 
    </thead> 

    <tbody> 
    <% @events.each do |event| %> 
     <tr> 
     <td><%= event.title %></td> 
     <td><%= event.description %></td> 
     <td><%= event.start_time %></td> 
     <td><%= event.end_time %></td> 
     <td><%= link_to 'Show', event %></td> 
     <td><%= link_to 'Edit', edit_event_path(event) %></td> 
     <td><%= link_to 'Destroy', event, method: :delete, data: { confirm: 'Are you sure?' } %></td> 
     </tr> 
    <% end %> 
    </tbody> 
</table> 

<br> 

<%= link_to 'New Event', new_event_path %> 

<div id="calendar"></div> 

events_controller

class EventsController < ApplicationController 
    before_action :set_event, only: [:show, :edit, :update, :destroy] 

    # GET /events 
    # GET /events.json 
    def index 
    @events = Event.all 
    end 

    # GET /events/1 
    # GET /events/1.json 
    def show 
    end 

    # GET /events/new 
    def new 
    @event = Event.new 
    end 

    # GET /events/1/edit 
    def edit 
    end 

    # POST /events 
    # POST /events.json 
    def create 
    @event = Event.new(event_params) 

    respond_to do |format| 
     if @event.save 
     format.html { redirect_to @event, notice: 'Event was successfully created.' } 
     format.json { render :show, status: :created, location: @event } 
     else 
     format.html { render :new } 
     format.json { render json: @event.errors, status: :unprocessable_entity } 
     end 
    end 
    end 

    # PATCH/PUT /events/1 
    # PATCH/PUT /events/1.json 
    def update 
    respond_to do |format| 
     if @event.update(event_params) 
     format.html { redirect_to @event, notice: 'Event was successfully updated.' } 
     format.json { render :show, status: :ok, location: @event } 
     else 
     format.html { render :edit } 
     format.json { render json: @event.errors, status: :unprocessable_entity } 
     end 
    end 
    end 

    # DELETE /events/1 
    # DELETE /events/1.json 
    def destroy 
    @event.destroy 
    respond_to do |format| 
     format.html { redirect_to events_url, notice: 'Event was successfully destroyed.' } 
     format.json { head :no_content } 
    end 
    end 

    private 
    # Use callbacks to share common setup or constraints between actions. 
    def set_event 
     @event = Event.find(params[:id]) 
    end 

    # Never trust parameters from the scary internet, only allow the white list through. 
    def event_params 
     params.require(:event).permit(:title, :description, :start_time, :end_time) 
    end 
end 

events.coffee

$(document).on 'ready page:load', -> 
    $("#calendar").fullCalendar(
    events: '/events.json' 
    selectable: true 
    selectHelper: true 
    select: (start, end) -> 
     title = prompt("Event Title:") 
     description = prompt("Event Description:") 
     eventData = undefined 
     if title && description 
     eventData = 
      title: title 
      description: description 
      start: start 
      end: end 
     $("#calendar").fullCalendar "renderEvent", eventData, true # stick? = true 
     $("#calendar").fullCalendar "unselect" 
) 
    $.ajax 
    url: 'events' 
    type: 'POST' 
    data: eventData 
    dataType: 'json' 
    success: (json) -> 
    alert json.msg 
    $('#calendar').fullCalendar 'renderEvent', eventData, true 
    $('#calendar').fullCalendar 'refetchEvents' 
    return 

Модель событий не имеет какого-либо кода.

Может ли кто-нибудь мне помочь?

Спасибо и наилучшими пожеланиями ко всем

Answer 1

Вы должны изменить формат времени, вероятно, так же, как здесь (это для обновления, но должно быть то же самое для создания)

eventDrop: function(event, dayDelta, minuteDelta, allDay, revertFunc) { 
    return updateEvent(event); 
}, 
eventResize: function(event, dayDelta, minuteDelta, revertFunc) { 
    return updateEvent(event); 
}, 

updateEvent = function(the_event) { 
    $.ajax({ 
    type: "PUT", 
    url: "https://stackoverflow.com/users/" + currentUserId + "/events/" + the_event.id, 
    data: { event: { 
     title: the_event.title, 
     start_at: "" + new Date(the_event.start).toUTCString(), 
     end_at: "" + new Date(the_event.end).toUTCString(), 
     body: the_event.body || "", 
     sender_id: the_event.senderId, 
     recipient_id: the_event.recipientId, 
     all_day: the_event.allDay } 
    } 
    }); 
};