How to call a javascript function whose parameters are from a Ruby model?

Question

This is what I've got so far: A user will go to a view and click a button "create an event" which saves in my Event table an event with a starts_at and ends_at date.

When a user clicks create an event, the event is created in the events controller:

class EventsController < ApplicationController
  before_filter :logged_in?


  def new
    @event = Event.new
    @calendar = current_customer.calendar

  end


  def create

    @calendar = current_customer.calendar

    @event = @calendar.events.build(event_params)
    if @event.save
      redirect_to '/main'
    else
      redirect_to '/compose'
    end
  end

  private
  def event_params
    params.require(:event).permit(:calendar_id, :name, :starts_at, :ends_at) 
  end

and the users are sent automatically to their homepage (/main). This is where the html calendar will be. The javascript function will be in my application.js file and the calendar html will be in my main.html.erb file.

What I want to do is be able to, at the point of event creation, call a javascript function that will change the html calendar on the user's homepage to display the event (just blocking out in red the day and time). The javascript function will need to take in the newly created event's parameters (starts_at, ends_at) in order to work (i think).

I am very new to ruby on rails, javascript and html so please if you have a helpful answer explain as if I was 5!!

EDIT: here is the view code I'm using to link to the event controller's create method:

<div class="jumbotron">

  <div class="container">
    <div class="form">
      <h1>Create A Meeting</h1>

      <%= form_for(@event) do |f| %>

          <%= f.text_field :name, :placeholder => "Title" %>
          <!--< f.collection_select :location, Location.all, :id, :locName %> FOR WHEN LOCATIONS ARE A THING-->
          <!--< f.text_field :body, :placeholder => "Short Description" %> NEXT STEP -->

          <div>
            <h2>when do you want it to start?</h2>
            <%= f.datetime_select :starts_at, :placeholder => "when do you want it?"   %>
          </div>



          <div>
            <h2>when do you want it to end?</h2>
            <%= f.datetime_select :ends_at, :placeholder => "when should it end?"  %>
          </div>


          <%= f.submit "Create Meeting", class: "btn-submit" %>
      <% end %>
    </div>
  </div>
</div>

the Pages controller (where main is generated):

class PagesController < ApplicationController

  #before_action :require_customer, only: [:main]

  def home

  end


  def main

  end

end

the routes file:

Rails.application.routes.draw do

  root 'pages#home'
  get '/main' => 'pages#main'
  get '/signup' => 'customers#new'
  resources :customers, :calendars

  get '/signupbus' => 'businesses#new'
  resources :businesses

  get '/login' => 'sessions#new'
  post 'login' => 'sessions#create'
  delete 'logout' => 'sessions#destroy'

  get '/compose' => 'events#new'
  resources :events

here a snippet of the html for my weekly calendar view (it is awful I know, but I don't know how to make it better):

</div>

<div class="jumbotron">

  <div class="container">
    <div class="main2">

      <a class="btn-main" href="/compose">Create a Meeting</a>

    </div>
  </div>
</div>



<div class = "calendarContainer">

<table class= "weeklyCalendar">
  <tr>
    <td class = "blankTopLeft">
    </td>
    <td class = "daytd" width=75 valign=top >
      <p class=MsoNormal><i><span style='font-size:13.0pt;font-family:"Calibri Light",sans-serif'>Mon</span></i></p>
      <p class=MsoNormal><i><span style='font-size:13.0pt;font-family:"Calibri Light",sans-serif'>14</span></i></p>
    </td>
    <td class = "daytd" width=75 valign=top>
      <p class=MsoNormal ><i><span style='font-size:13.0pt;font-family:"Calibri Light",sans-serif'>Tue</span></i></p>
      <p class=MsoNormal ><i><span style='font-size:13.0pt;font-family:"Calibri Light",sans-serif'>15</span></i></p>
    </td>
    <td class = "daytd" width=75 valign=top>
      <p class=MsoNormal><i><span style='font-size:13.0pt;font-family:"Calibri Light",sans-serif'>Wed</span></i></p>
    </td>
    <td class = "daytd" width=75 valign=top>
      <p class=MsoNormal><i><span style='font-size:13.0pt;font-family:"Calibri Light",sans-serif'>Thu</span></i></p>
    </td>
    <td class = "daytd" width=75 valign=top>
      <p class=MsoNormal style='margin-bottom:0cm;margin-bottom:.0001pt;line-height:
              normal'><i><span style='font-size:13.0pt;font-family:"Calibri Light",sans-serif'>Fri</span></i></p>
    </td>
    <td class = "daytd" width=75 valign=top>
      <p class=MsoNormal style='margin-bottom:0cm;margin-bottom:.0001pt;line-height:
              normal'><i><span style='font-size:13.0pt;font-family:"Calibri Light",sans-serif'>Sat</span></i></p>
    </td>
    <td class= "daytd" width=75 valign=top>
      <p class=MsoNormal style='margin-bottom:0cm;margin-bottom:.0001pt;line-height:
              normal'><i><span style='font-size:13.0pt;font-family:"Calibri Light",sans-serif'>Sun</span></i></p>
    </td>
  </tr>
  <tr class = "Monday" style='height:28.05pt'>
    <td class = "timetd" width=75 valign=top>
      <p class=MsoNormal align=right style='margin-bottom:0cm;margin-bottom:.0001pt;
              text-align:right;line-height:normal'><i><span style='font-size:13.0pt;
              font-family:"Calibri Light",sans-serif'>  9:00  </span></i></p>
    </td>
    <td id = "mon900" class ="freeslot" width=75 valign=top>
      <p class=MsoNormal style='margin-bottom:0cm;margin-bottom:.0001pt;line-height:
              normal'>&nbsp;</p>
    </td>
    <td id = "tue900" class ="freeslot" width=75 valign=top>
      <p class=MsoNormal style='margin-bottom:0cm;margin-bottom:.0001pt;line-height:
              normal'>&nbsp;</p>
    </td>
    <td id = "wed900" class = "freeslot" width=75 valign=top>
      <p class=MsoNormal style='margin-bottom:0cm;margin-bottom:.0001pt;line-height:
              normal'>&nbsp;</p>
    </td>
    <td id = "thu900" class = "freeslot" width=75 valign=top>
      <p class=MsoNormal style='margin-bottom:0cm;margin-bottom:.0001pt;line-height:
              normal'>&nbsp;</p>
    </td>
    <td id = "fri900" class = "freeslot" width=75 valign=top>
      <p class=MsoNormal style='margin-bottom:0cm;margin-bottom:.0001pt;line-height:
              normal'>&nbsp;</p>
    </td>
    <td id = "sat900" class = "freeslot" width=75 valign=top>
      <p class=MsoNormal style='margin-bottom:0cm;margin-bottom:.0001pt;line-height:
              normal'>&nbsp;</p>
    </td>
    <td id = "sun900" class = "freeslot" width=75 valign=top>
      <p class=MsoNormal style='margin-bottom:0cm;margin-bottom:.0001pt;line-height:
              normal'>&nbsp;</p>
    </td>
  </tr>
  <tr style='height:27.75pt'>
    <td class = "timetd" width=75 valign=top>
      <p class=MsoNormal align=right style='margin-bottom:0cm;margin-bottom:.0001pt;
              text-align:right;line-height:normal'><i><span style='font-size:13.0pt;
              font-family:"Calibri Light",sans-serif'>10:00</span></i></p>
    </td>

Answer 1

After creating the new event with your existing create method from your Controller, and you redirected to the PagesController 's main method, then, you will have to reload the event in this your main method.

To do this, you will need to know the id of the needed event which means that you will have to pass it from wherever you are redirecting, which means you will have to make space for it in your route for the main method.

So, in your route:

get '/main/:callendar_id' => 'page#main'

And then from your create method, you redirect to this path with the id of the newly created event.

 def create

    @calendar = current_customer.calendar

    @event = @calendar.events.build(event_params)
    if @event.save
      redirect_to "/main/#{@callendar.id}"
    else
      redirect_to '/compose'
    end
  end

and reload the event from the main method of your PagesController :

def main
  @callendar = Callendar.find(params[:callendar_id])
end

This will work well for you, and give you the updated callendar with the new event on your main page.