Using collection_select() to filter events on fullCalendar()

Question

On my page I am using a drop down box to filter which events are shown on my fullCalendar() . My code is as follows:

JavaScript

$(document).ready - >
  $("#msCalendar").fullCalendar({
    header: left: "prev today"
    center: "title"
    right: "month,basicWeek next"
    editable: true
    events: "marketingSchedule"
    eventRender: (event, element, view) - >
      return ['all', event.quoted_by].indexOf($('#msQuotedBy').val()) >= 0
    eventClick: (event) - >
      setTimeout(- >
        eventClickFunction(event)
      )
  })

$('#msQuotedBy').change - >
  $('#msCalendar').fullCalendar('rerenderEvents')

HTML

<span id="msQuotedBySearch">
  <b>Filter by Initials: </b>
  <select id="msQuotedBy">
    <option value="all">All</option>
    <option value="ZR">ZR</option>
    <option value="TM">TM</option>
    <option value="jh">jh</option>
    <option value="TD">TD</option>
    <option value="LG">LG</option>
    <option value="BCS">BCS</option>
    <option value="DLH">DLH</option>
    <option value="jr">jr</option>
    <option value="CP">CP</option>
    <option value="LR">LR</option>
    <option value="SA">SA</option>
    <option value="TN">TN</option>
    <option value="DB">DB</option>
    <option value="TF">TF</option>
    <option value="dev">dev</option>
    <option value="BK">BK</option>
  </select>
</span>

Using these two blocks of code my calendar gets updated correctly. Obviously the HTML should be better as it doesn't update the drop down box dynamically with users from the database.

I have tried this in my HTML and it populates the drop down box correctly but it no longer updates the calendar.

<span id="msQuotedBy">
  <b>Filter by Initials: </b>
  <%= collection_select(:user, :initials, User.all, :id, :initials) %>
</span>

Any ideas on how to filter my calendar by using collection_select() , or perhaps a different method?

Answer 1

In your second example (using Rails), there's a problem:

<span id="msQuotedBy">

In your hand-coded example, "msQuotedBy" is the id of the select, not the span. In the JS, $('#msQuotedBy').val() tries to read from the HTML element which has the id "msQuotedBy" and get its value. <spans do not have values, but <selects do.

You've screwed it up by moving the ID to another element. IDs are supposed to uniquely identify the element (hence "ID") - moving it around at random is asking for trouble.

Make sure your Rails code sets the correct ID on the <select when it creates it. From your comment, the correct overall code should be:

<span id="msQuotedBySearch">
  <b>Filter by Initials: </b>
  <%= collection_select(:msQuotedBy, :select, User.all, :initials, :initials) %>
</span>