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>

You mean to say as soon as you create the event that should be visible into the calendar at main html page. Please confirm for the same. — Bharat soni
– Bharat soni, Commented Dec 17, 2015 at 12:08
I am not sure why you need javascript for this at all? If you stored new event in the database and then redirect to main page, the main page will be rebuild, including newly created event? Did I miss something? — BroiSatse
– BroiSatse, Commented Dec 17, 2015 at 12:25
@BroiSatse All my main page contains at the moment is a drawn html calendar, there is no connection between the html and the events model or the calendar model. This is what I'm trying to establish, so that when an event is created, the html is changed accordingly — Sarahshuffle
– Sarahshuffle, Commented Dec 17, 2015 at 13:40
Okay, I see what is happening now. You don't need JS. and you don't need the format.js. all you need to do here is to reload the event from your main method in your PagesContrller. — x6iae
– x6iae, Commented Dec 17, 2015 at 15:29

x6iae · Accepted Answer · 2015-12-17 15:55:20Z

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.

edited Dec 17, 2015 at 15:55

answered Dec 17, 2015 at 12:13

x6iae

4,1835 gold badges31 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

Sarahshuffle Over a year ago

I am not very familiar with AJAX, in fact I have never used it before. How would I use JS to call the create method/save the new event? Will the event still appear in my database?

x6iae Over a year ago

yes. all you just have to do is to add remote: true attribute to the link you are currently using to create an event. I mean the link the user clicks to create an event. If you drop your code for this link, I can show you how, and help update the above create action as well.

Sarahshuffle Over a year ago

ok thanks very much, I have added the code to the end of my question

Sarahshuffle Over a year ago

so now in the create.js.erb file, I can put any javascript I like? So because I want to change the appearance of the html, I can do all those jquery calls from within that file?

Sarahshuffle Over a year ago

also, after adding in the code you gave me, now when I click the button "create meeting" I am not sent back to the main page, which I was previously, why is this?

|

Collectives™ on Stack Overflow

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

1 Answer 1

10 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Related