How to update FullCalendar events using a search function?

Question

I have my search set up like so.

# Viewings controller 
  def index
      @rmquery = params[:search]
    if params[:search]
      @viewings = Viewing.search(params[:search])
    else
      @viewings = Viewing.all
    end
  end

and

class Viewing < ActiveRecord::Base

  belongs_to :user
  belongs_to :room

  def self.search(query)
    self.where("room_id like ?", "%#{query}%")
  end
end

and I have my (viewings) index.jbuilder as follows:

json.array!(@viewings) do |viewing|

  json.title "viewing"
  json.start viewing.start_time
  json.end viewing.end_time
  json.url viewing_url(viewing, format: :html)
end

I would like my viewings.json to reflect the search results, but it only seems to display all viewings, even though the search is working under where it says "Listing Viewings"

Ive tried something along the lines of:

@viewings = Viewing.where(room_id: @rmquery)
json.array!(@viewings) do |viewing|

  json.title "viewing"
  json.start viewing.start_time
  json.end viewing.end_time
  json.url viewing_url(viewing, format: :html)
end

but it doesn't seem to pass the query through.

oh, and my index view:

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


<%= form_tag(viewings_path, :method => "get", id: "search-form") do %>
  <%= text_field_tag :search, params[:search], placeholder: "Search rooms" %>
  <%= submit_tag "Search", :name => nil %>
<% end %>

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

<h1>Listing Viewings</h1>

<table>
  <thead>
    <tr>
      <th>Room</th>
      <th>Customer</th>
      <th>Start time</th>
      <th>End time</th>
      <th>Notes</th>
      <th colspan="3"></th>
    </tr>
  </thead>

  <tbody>
    <% @viewings.each do |viewing| %>
      <tr>
        <td><%= viewing.room_id %></td>
        <td><%= viewing.customer_id %></td>
        <td><%= viewing.start_time %></td>
        <td><%= viewing.end_time %></td>
        <td><%= viewing.notes %></td>
        <td><%= link_to 'Show', viewing %></td>
        <td><%= link_to 'Edit', edit_viewing_path(viewing) %></td>
        <td><%= link_to 'Destroy', viewing, method: :delete, data: { confirm: 'Are you sure?' } %></td>
      </tr>
    <% end %>
  </tbody>
</table>

<br>

<%= link_to 'New Viewing', new_viewing_path %>

Code for calendar:

$(document).ready(function() {

    // page is now ready, initialize the calendar...

    $('#calendar').fullCalendar({
        events: '/viewings.json',
        defaultView: 'agendaWeek',
        slotMinutes: 60,
    })

});

server log for search

C:\Sites\weddings
=> Booting WEBrick
=> Rails 4.2.0 application starting in development on http://localhost:3000
=> Run `rails server -h` for more startup options
=> Ctrl-C to shutdown server
[2015-02-24 22:40:04] INFO  WEBrick 1.3.1
[2015-02-24 22:40:04] INFO  ruby 1.9.3 (2014-02-24) [i386-mingw32]
[2015-02-24 22:40:04] INFO  WEBrick::HTTPServer#start: pid=8260 port=3000


Started GET "/viewings?utf8=%E2%9C%93&search=1" for ::1 at 2015-02-24 22:40:14 +
0000
  ←[1m←[36mActiveRecord::SchemaMigration Load (1.0ms)←[0m  ←[1mSELECT "schema_mi
grations".* FROM "schema_migrations"←[0m
Processing by ViewingsController#index as HTML
  Parameters: {"utf8"=>"V", "search"=>"1"}
  ←[1m←[35mViewing Load (1.0ms)←[0m  SELECT "viewings".* FROM "viewings" WHERE (
room_id like '%1%')
  Rendered viewings/index.html.erb within layouts/application (52.0ms)
  ←[1m←[36mUser Load (1.0ms)←[0m  ←[1mSELECT  "users".* FROM "users" WHERE "user
s"."id" = ?  ORDER BY "users"."id" ASC LIMIT 1←[0m  [["id", 1]]
Completed 200 OK in 1216ms (Views: 1100.8ms | ActiveRecord: 4.0ms)


Started GET "/assets/fullcalendar-6bee23c458d42683dba9159c94f7547f.css?body=1" f
or ::1 at 2015-02-24 22:40:15 +0000
[2015-02-24 22:40:15] WARN  Could not determine content-length of response body.
 Set content-length of the response or set Response#chunked = true


Started GET "/assets/application-4a810b319e4a8061f2f2b27a579eadc1.css?body=1" fo
r ::1 at 2015-02-24 22:40:15 +0000
[2015-02-24 22:40:15] WARN  Could not determine content-length of response body.
 Set content-length of the response or set Response#chunked = true


Started GET "/assets/forms-2477fa28d6be1997f320e98a5ceee0f6.css?body=1" for ::1
at 2015-02-24 22:40:15 +0000
[2015-02-24 22:40:15] WARN  Could not determine content-length of response body.
 Set content-length of the response or set Response#chunked = true


Started GET "/assets/index-divs-e5867ca540c81afa8a01e2daca2920c5.css?body=1" for
 ::1 at 2015-02-24 22:40:15 +0000
[2015-02-24 22:40:15] WARN  Could not determine content-length of response body.
 Set content-length of the response or set Response#chunked = true


Started GET "/assets/owl.carousel-688ba12698d3c02b724b8a26bc3b1bd0.css?body=1" f
or ::1 at 2015-02-24 22:40:15 +0000
[2015-02-24 22:40:15] WARN  Could not determine content-length of response body.
 Set content-length of the response or set Response#chunked = true


Started GET "/assets/owl.theme-f91781dace0c67e4d6a689ddd73d65b7.css?body=1" for
::1 at 2015-02-24 22:40:15 +0000
[2015-02-24 22:40:15] WARN  Could not determine content-length of response body.
 Set content-length of the response or set Response#chunked = true


Started GET "/assets/owl.transitions-1b9d47a45c85e9fa3f2f990b6d59519a.css?body=1
" for ::1 at 2015-02-24 22:40:15 +0000
[2015-02-24 22:40:15] WARN  Could not determine content-length of response body.
 Set content-length of the response or set Response#chunked = true


Started GET "/assets/pages-8450695447adc4c25ef72b73f84e12b5.css?body=1" for ::1
at 2015-02-24 22:40:15 +0000
[2015-02-24 22:40:15] WARN  Could not determine content-length of response body.
 Set content-length of the response or set Response#chunked = true


Started GET "/assets/show-bd6702d041298d2548881c1db5e4e9a7.css?body=1" for ::1 a
t 2015-02-24 22:40:15 +0000
[2015-02-24 22:40:16] WARN  Could not determine content-length of response body.
 Set content-length of the response or set Response#chunked = true


Started GET "/assets/viewings-64e62ddc273c2f5847f30d698ca14b67.css?body=1" for :
:1 at 2015-02-24 22:40:16 +0000
[2015-02-24 22:40:16] WARN  Could not determine content-length of response body.
 Set content-length of the response or set Response#chunked = true


Started GET "/assets/moment-66988874bf5714cb1e4a6f53d733b6e1.js?body=1" for ::1
at 2015-02-24 22:40:16 +0000
[2015-02-24 22:40:16] WARN  Could not determine content-length of response body.
 Set content-length of the response or set Response#chunked = true


Started GET "/assets/jquery-87424c3c19e96d4fb033c10ebe21ec40.js?body=1" for ::1
at 2015-02-24 22:40:16 +0000
[2015-02-24 22:40:16] WARN  Could not determine content-length of response body.
 Set content-length of the response or set Response#chunked = true


Started GET "/assets/jquery_ujs-e27bd20a10d28155845a22d71ef94f2f.js?body=1" for
::1 at 2015-02-24 22:40:16 +0000
[2015-02-24 22:40:16] WARN  Could not determine content-length of response body.
 Set content-length of the response or set Response#chunked = true


Started GET "/assets/turbolinks-da8ddad9c2c5483d4c5c30c1ce325253.js?body=1" for
::1 at 2015-02-24 22:40:16 +0000
[2015-02-24 22:40:16] WARN  Could not determine content-length of response body.
 Set content-length of the response or set Response#chunked = true


Started GET "/assets/fullcalendar-f09a2cee6bd3f7655c47cf7eab2b52b9.js?body=1" fo
r ::1 at 2015-02-24 22:40:16 +0000
[2015-02-24 22:40:16] WARN  Could not determine content-length of response body.
 Set content-length of the response or set Response#chunked = true


Started GET "/assets/owl.carousel.min-7972660fd0b56886b322fbde7ad2f1f7.js?body=1
" for ::1 at 2015-02-24 22:40:16 +0000
[2015-02-24 22:40:16] WARN  Could not determine content-length of response body.
 Set content-length of the response or set Response#chunked = true


Started GET "/assets/pages-fcec5b5a277ac7c20cc9f45a209a3bcd.js?body=1" for ::1 a
t 2015-02-24 22:40:16 +0000
[2015-02-24 22:40:16] WARN  Could not determine content-length of response body.
 Set content-length of the response or set Response#chunked = true


Started GET "/assets/rmcats-fcec5b5a277ac7c20cc9f45a209a3bcd.js?body=1" for ::1
at 2015-02-24 22:40:16 +0000
[2015-02-24 22:40:16] WARN  Could not determine content-length of response body.
 Set content-length of the response or set Response#chunked = true


Started GET "/assets/rooms-fcec5b5a277ac7c20cc9f45a209a3bcd.js?body=1" for ::1 a
t 2015-02-24 22:40:16 +0000
[2015-02-24 22:40:16] WARN  Could not determine content-length of response body.
 Set content-length of the response or set Response#chunked = true


Started GET "/assets/viewings-fcec5b5a277ac7c20cc9f45a209a3bcd.js?body=1" for ::
1 at 2015-02-24 22:40:16 +0000
[2015-02-24 22:40:16] WARN  Could not determine content-length of response body.
 Set content-length of the response or set Response#chunked = true


Started GET "/assets/application-5fac6df9a34c6823e27885b0701b0037.js?body=1" for
 ::1 at 2015-02-24 22:40:16 +0000
[2015-02-24 22:40:16] WARN  Could not determine content-length of response body.
 Set content-length of the response or set Response#chunked = true


Started GET "/viewings?start=2015-02-22&end=2015-03-01&_=1424817616261" for ::1
at 2015-02-24 22:40:17 +0000
Processing by ViewingsController#index as JSON
  Parameters: {"start"=>"2015-02-22", "end"=>"2015-03-01", "_"=>"1424817616261"}

  ←[1m←[35mViewing Load (1.0ms)←[0m  SELECT "viewings".* FROM "viewings"
  Rendered viewings/index.json.jbuilder (30.1ms)
Completed 200 OK in 65ms (Views: 59.3ms | ActiveRecord: 1.0ms)

I'm not sure what all those "Could not determine content-length of response body" messages are, but I think the last 3 lines above seem to be whats causing it to show all viewings in the calendar.

You are telling it to `render index`. So it goes to the `index` action and renders it. Not sure what you are wanting as a result. Please show how your controller code is laid out. — Beartech, Feb 23 '15 at 16:10
What overall view are you trying to achieve? Do you have this code on github? What is your view code that calls the partial? You can't have the same variable `@viewings` used two different ways in the same view. — Beartech, Feb 23 '15 at 16:13
I can push to github if it would be any help. Having @viewings in def index and def rmselect is the way I've been taught how to implement a search - but as you can probably tell, I'm really new to ruby! — Mitch, Feb 23 '15 at 16:17
That is always the easiest way to see the overall code without making a huge page here. Without seeing the view code I imagine you are trying to update the @viewings variable via and AJAX call? — Beartech, Feb 23 '15 at 16:19
I would also suggest looking at your web server logs. It tells you exactly what the web server is being asked for and what it's returning, and in what order. That will often point out where the problem in your logic is. — Beartech, Feb 23 '15 at 16:49
Thanks. unfortunately github seems to have caused me to lose half of my work so I'm just trying to get back to where I was before I can proceed! — Mitch, Feb 23 '15 at 16:52
Ok, I have got myself back on track, and I've amended my search code to something that hopefully will work a little better. Any ideas how to achieve what I'm after. Thanks! @Beartech — Mitch, Feb 24 '15 at 02:23
Still trying to understand WHAT you are after. You need to be a lot more specific about what you are trying to achieve and what is happening or not happening at this point. You'll find that no matter how experienced you are it is hard to determine someone's intent just from their code, particularly if it isn't working. 1) do you expect the index to update itself using the search function? 2) is this a function of jbuilder? 3) does jbuilder update the view without AJAX? — Beartech, Feb 24 '15 at 07:48
My apologies. I'll be a bit more specif about what I need this for. I have a calendar on my index page which displays the viewings. I used this guide [link] (http://blog.crowdint.com/2014/02/18/fancy-calendars-for-your-web-application-with-fullcalendar.html) So the calendar is populated from the .json file. What I need is for the calendar to update when the search is performed (so that it only shows viewings for that room. I'll post the code for the calendar above. maybe I am going about this in totally the wrong way? @Beartech — Mitch, Feb 24 '15 at 16:04
OK, start up the rails server for your app (so it's a nice clean window) and then go to your calendar, then use the search function. Go back to your console and copy the server logs, and paste them above in your question. This will help get a handle on what the server is passing to the browser. — Beartech, Feb 24 '15 at 21:48
Ok. Thanks so much. I'm having a good read through of your answers - in the mean time ill do what you suggested with the server logs. — Mitch, Feb 24 '15 at 22:46
So what did you finally do? Trigger the calendar JS to reload? I think the nested route solution is a very "rails way" of doing it. — Beartech, Feb 26 '15 at 03:06
I'm still trying to sort it to be honest I've not had much chance to work on it, but I gave you the answer because you've given me loads of advice. Sorry I can't up vote you because I'm too new to stack, but thanks anyway. — Mitch, Feb 26 '15 at 10:59

Beartech · Accepted Answer · 2015-02-24T22:18:41.683

You probably need to tie the search function to calling the calendar function in events.js.coffee:

$(document).ready ->
  $("#calendar").fullCalendar(
    events: '/events.json'
)

Not sure how to do this, but you want to trigger this function after each search, because you are getting the correctly filtered list but the calendar is not reloading with the current list of events.

I'm starting to think maybe you would be better off just having a main calendar that shows everything, and instead of a search function, use a dropdown menu of links that has every room listed. You could then just nest your routes:

in config/routes.rb

...

resources rooms do
  resources events
end

That way your links to each room would go to that room's calendar in a route like

localhost:3000/room1/events

since Events already belong to rooms. In your rooms controller you can have the #show action use the room id to find the events:

 def show
   @room_events = Room.where(id: room_params[:id]).events
 end

Then in /views/rooms/show you would put the calendar code.

The dropdown for choosing rooms would be built on the fly from a query

 @rooms = Room.all

and then just use a dropdown menu in .erb to get the links for each room.

EDIT: I am not familiar with jbuilder, so my answer may not be any help. Is your intention to update the index page after it has already loaded once? I still think your problem is that you are defining the variable @viewings twice, once in the partial and once in the index. The last call is to index so that is the final value when it displays.

Ok, so looking at the code for your calendar:

$(document).ready(function() {

// page is now ready, initialize the calendar...

$('#calendar').fullCalendar({
    events: '/viewings.json',
    defaultView: 'agendaWeek',
    slotMinutes: 60,
})

});

I'm wondering if this is where your issue is, maybe you need to load the updated events from /viewings.json. So either use AJAX to request the filtered events query, then update the calendar from an .js.erb partial and an .html.erb partial? If the calendar is based on a table and you are using Jquery you could use the filter functions built into Jquery.

Or...

You could use CSS. I'm not good at CSS but I'm pretty sure you could set all the events as visible and use the search function as a filter to change the visibility of everything to invisible except for the ones that go to the room you are filtering for.

This is a stab in the dark with the limited info to go on but try changing your instance variable for the room-limited viewings from

@viewings

to something like:

@room_viewings

That way you are not stomping on it when you call

render index

How to update FullCalendar events using a search function?

1 Answers1