jquery - fullcalendar pasando js vars a rieles y viceversa

ruby-on-rails ajax

Question

Tengo una aplicación de rieles. Intento integrar el calendario completo en mi aplicación. Para probar, creé manualmente un evento que aparece en el calendario después de enviarlo con as_json al navegador. Cuando intento mover (actualizar) el evento, funciona el js pero no puedo guardarlo en el db gracias a los problemas de enrutamiento. En el siguiente código lo tengo codificado, así que funciona de esta manera.

Si uso en AJAX: url: the_event.recipientId + "/events/" + the_event.id entonces la consola me dice: START POST "/ users / url: the_event.recipientId + "/events/" + the_event.id / events / 1" -> no coincide la ruta. Si utilizo url: "/events/" + the_event.id entonces comencé POST "/ events / 1" -> no coincide la ruta. Así que ahora estoy usando event.url que se envía desde event.rb, pero está codificado.

¿Cómo podría establecer las URL coincidentes para el usuario actual en AJAX POST (para esto también necesito encontrar el destinatario (usuario) de db) y llamar a PUT? Para el destinatario y el remitente PUT (actualización) ya están definidos, con el método as_json los datos se enviarán al navegador. Aquí mi problema es indicar en el modelo (event.rb) si el usuario_actual es el remitente o el destinatario y establecer la url sin codificación dura tal como está ahora. Para el POST es mucho más difícil. El navegador debe averiguar quién es el usuario_actual (emisor) en función de la url o de alguna manera, y además debe poder seleccionar un usuario existente (destinatario) de la base de datos. ¿Cómo puedo hacer esta segunda parte?

/ users / 1 / events / json

[{"id":1,
  "recipientId":1,
  "senderId":2,
  "title":"cool",
  "body":"hahahhahhhaha",
  "start":"2015-12-15T17:03:05.110-08:00",
  "end":"2015-12-15T19:03:05.111-08:00",
  "allDay":null,
  "recurring":false,
  "url":"/users/1/events.1"}] //hard coded in rails model since there is no current_user in model level

event.js

var updateEvent;
var ready = function() { 
  $(''#calendar'').fullCalendar({
    editable: true,
    header: {
        left: ''prev,next today'', 
        center: ''title'', 
        right: ''month,agendaWeek,agendaDay''
    },
    defaultView: ''month'', 
    height: 500, 
    slotMinutes: 30, 
    eventSources: [{ url: ''/users/:user_id/events'', }], // IS THIS LINE OKAY?
    timeFormat: ''h:mm t{ - h:mm t} '', 
    dragOpacity: "0.5", 
        eventDrop: function(event, dayDelta, minuteDelta, allDay, revertFunc) {
        return updateEvent(event);
    }, 
        eventResize: function(event, dayDelta, minuteDelta, revertFunc) {
            return updateEvent(event);
        select: function(start, end, allDay) {
          var title = prompt(''Event Title:'');
          $(''#calendar'').fullCalendar(''renderEvent'',
          {
            title: title,
            start_at: start,
            end_at: end,
            allDay: allDay
          },
          true //making event stick
        );
        $.ajax({
          type: "POST",
          url: "/users/1/events",
          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 }
          }
      });
    }
  });
};

updateEvent = function(the_event) {
  $.ajax({
    type: "PUT",
    url: the_event.url // used to be: the_event.recipientId + "/events/" + the_event.id,  WHAT SHOULD I USE HERE?
    data: { event: {
      title: the_event.title,
      start_at: "" + the_event.start,
      end_at: "" + the_event.end,
      body: the_event.body,
      sender_id: the_event.senderId,
      recipient_id: the_event.recipientId }
    }
  });
};

$(document).ready(ready);
$(document).on("page:load", ready);

controlador de eventos

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

  def index
    @events = current_user.events#.between(params[''start''], params[''end'']) if (params[''start''] && params[''end''])
    respond_to do |format|
      format.html
      format.json { render json: @events }
    end
  end

  def show
    respond_to do |format|
      format.html
      format.json { render json: @event }
    end
  end

  def new
    @event = Event.new
    respond_to do |format|
      format.html
      format.js
    end
  end

  def create
    @event = Event.new(event_params)
    @event.sender_id = current_user.id
    respond_to do |format|
      format.html
      format.js
    end
  end

  def edit
  end

  def update
    respond_to do |format|
      if @event.update_attributes(event_params)
        format.html { redirect_to @event, notice: ''Event was successfully updated.'' }
        format.json { head :no_content }
      else
        format.html { render action: "edit" }
        format.json { render json: @event.errors, status: :unprocessable_entity }
      end
    end
  end

  def destroy
    @event.destroy
    respond_to do |format|
      format.html { redirect_to user_events_path(current_user) }
      format.json { head :no_content }
    end
  end

  private

    def set_event
      @event = Event.find(params[:id])
    end

    def event_params
      params.require(:event).permit(:recipient_id, :sender_id, :title, :body, :start_at, :end_at, :all_day)
    end
end

event.rb

class Event < ActiveRecord::Base
  belongs_to :recipient, class_name: "User", foreign_key: "recipient_id"
  belongs_to :sender, class_name: "User", foreign_key: "sender_id"

  scope :between_time, -> (start_time, end_time) do
    where("? < start_at < ?", Event.format_date(start_time), Event.format_date(end_time))
  end
  scope :allevents, -> (u) { where(''sender_id = ? OR recipient_id = ?'', u.id, u.id) }
  scope :between, -> (sender, recipient) do
    where("(events.sender_id = ? AND events.recipient_id = ?) OR (tasks.sender_id = ? AND tasks.recipient_id = ?)", sender.id, recipient.id, recipient.id, sender.id)
  end

  def self.format_date(date_time)  
   Time.at(date_time.to_i).to_formatted_s(:db)  
  end

  def as_json(options = {})
    { id: self.id,
      recipientId: self.recipient_id,
      senderId: self.sender_id,
      title: self.title,
      body: self.body || "",
      start: start_at,
      :end => end_at,
      allDay: self.all_day,
      recurring: false, 
      url: Rails.application.routes.url_helpers.user_event_path(self.recipient_id, self.id) 
      #self.recipient hard coded, it could be self.sender if self.sender == current_user
    }
  end

  # def event_interlocutor(event)
  #   current_user == event.recipient ? event.recipient_id : event.sender_id
  # end
end

Answer 1

con respecto a las líneas "¿está bien esta línea?"

 eventSources: [{ url: ''/users/:user_id/events'', }], // IS THIS LINE OKAY?

estás mezclando tus js y ruby ​​por lo que no está funcionando. ''/users/:user_id/events'' no es una ruta. ''/users/12234/events es una ruta. Su js no entiende qué :user_id es -> usted tiene que poner realmente una identificación de usuario real allí.

la única cosa que noto que falta en el código de tu controlador es en cualquier lugar donde instanciaste a un usuario real ... ¿tienes current_user ? (es decir, ¿está utilizando un dispositivo para que los usuarios inicien sesión?) en ese caso, podría usarlo de forma verosímil:

 eventSources: [{ url: ''/users/<%= current_user.id %>/events'', }], // IS THIS LINE OKAY?

sin embargo, me doy cuenta de que su archivo js se llama "events.js" y, por lo tanto, no está relacionado con Ruby, en cuyo caso lo anterior tampoco va a funcionar porque no hay ruby ​​en un archivo js simple.

Tendrá que establecer algún tipo de variable de entorno de JavaScript en su plantilla erb ... que el código de JavaScript puede acceder.

esto se está volviendo dudoso en mi propio conocimiento, pero yo diría que un truco horrible y desagradable sería hacer algo como:

<script>
   var user_id = <%= current_user.id %>
</script>

NO RECOMIENDO que realmente hagas esto ... google de una mejor manera - debe haber algunos tutoriales sobre cómo integrar el dispositivo en tus js en rieles. Está aquí solo para mostrarte cómo deben interactuar js y ruby ​​para que la información esté disponible para tu js.