How to update FullCalendar events using a search function? - ruby-on-rails

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.

Answer 1

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