如何使用搜索功能更新 FullCalendar 事件?

How to update FullCalendar events using a search function?

我的搜索是这样设置的。

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

class Viewing < ActiveRecord::Base

  belongs_to :user
  belongs_to :room

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

我的(观看次数)index.jbuilder如下:

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

我希望我的 viewings.json 反映搜索结果,但它似乎只显示所有观看次数,即使搜索是在 "Listing Viewings"

下进行的

我试过类似的方法:

@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

但它似乎没有通过查询。

哦,还有我的索引视图:

<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 %>

日历代码:

$(document).ready(function() {

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

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

});

用于搜索的服务器日志

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)

我不确定所有这些 "Could not determine content-length of response body" 消息是什么,但我认为上面的最后 3 行似乎是导致它在日历中显示所有观看次数的原因。

您可能需要将搜索功能与调用日历功能联系起来 events.js.coffee:

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

不确定如何执行此操作,但您想在每次搜索后触发此功能,因为您得到的是正确过滤的列表,但日历未重新加载当前事件列表。

我开始想也许你最好只拥有一个显示所有内容的主日历,而不是搜索功能,使用列出每个房间的链接下拉菜单。然后你可以嵌套你的路线:

在config/routes.rb

...

resources rooms do
  resources events
end

这样,您指向每个房间的链接就会按照

这样的路径进入该房间的日历
localhost:3000/room1/events

因为活动已经属于房间。在您的房间控制器中,您可以让 #show 操作使用房间 ID 来查找事件:

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

然后在 /views/rooms/show 中放置日历代码。

用于选择房间的下拉菜单将根据查询动态构建

 @rooms = Room.all

然后只需使用 .erb 中的下拉菜单即可获取每个房间的链接。

编辑: 我不熟悉 jbuilder,所以我的回答可能没有任何帮助。您打算在索引页面加载一次后更新它吗? 我仍然认为您的问题是您定义了变量 @viewings 两次,一次在局部变量中,一次在索引中。最后一次调用是索引,因此它是显示时的最终值。


好的,查看日历代码:

$(document).ready(function() {

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

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

});

我想知道这是否是您的问题所在,也许您需要从 /viewings.json 加载更新的事件。因此,要么使用 AJAX 来请求过滤的事件查询,然后从 .js.erb 部分和 .html.erb 部分更新日历?如果日历基于 table 而您使用的是 Jquery,则可以使用 Jquery 内置的过滤功能。

或者...

您可以使用 CSS。我不擅长 CSS 但我很确定你可以将所有事件设置为可见,并使用搜索功能作为过滤器将所有内容的可见性更改为不可见,除了进入房间的事件你正在过滤。


这是在黑暗中进行的尝试,要继续进行的信息有限,但请尝试更改您的实例变量以从

@viewings

类似于:

@room_viewings

这样你打电话时就不会踩到它

render index