1

I'm trying to use javascript/AJAX to change one of my controller definitions so I can display upcoming events and past events on the same events#index page. I found this SO post that shows that the concept isn't completely bonkers, but I can't get it working. Ideally, when you click either "previous events" or "upcoming events", it changes the controller definition to show the appropriate events.

Here's the html/erb I have in my events#index view:

<h4 class="text-center">
   <span class="" id="upcomingEvents">Upcoming Events</span> | 
   <span class="linkish" id="previousEvents">Previous Events</span>
</h4>

Here's my javascript (put in <script> tags at the bottom of the view:

<script>
    $("#previousEvents").click(function() {
       $.ajax({ url: "<%= url_for(:action => 'update_to_previous_events') %>" });
       return false;
    });
    $("#upcomingEvents").click(function() {
       $.ajax({ url: "<%= url_for(:action => 'update_to_upcoming_events') %>" });
       return false;
    });
</script>

Here are the relevant methods in my events_controller:

  def index
      @events = Event.where("date < ?", Date.today).order('date ASC')
  end

  def update_to_previous_events
    @events = Event.where("date < ?", Date.today).order('date DESC')
    render :nothing => true
  end

  def update_to_upcoming_events
    @events = Event.where("date < ?", Date.today).order('date ASC')
    render :nothing => true
  end

And finally here are my custom routes:

get 'events/update_to_previous_events'
get 'events/update_to_upcoming_events'

I'm hoping this is a simple error, but I feel like this is kind of hackey so I fear the worst. Can anyone see where I'm going wrong?

**After recommended change to $.ajax({ url: "/events/update_to_previous_events" }); the error log now reads:

jquery.self-660adc5….js?body=1:10246 GET http://localhost:3000/events/update_to_previous_events 404 (Not Found)send @ jquery.self-660adc5….js?body=1:10246ajax @ jquery.self-660adc5….js?body=1:9735(anonymous function) @ events:76dispatch @ jquery.self-660adc5….js?body=1:5227elemData.handle @ jquery.self-660adc5….js?body=1:4879

ADDITIONAL INFO: SERVER ERROR LOG

ActiveRecord::RecordNotFound - Couldn't find Event with 'id'=update_to_previous_events:
  activerecord (4.2.5) lib/active_record/core.rb:155:in `find'
  app/controllers/events_controller.rb:54:in `show'
  actionpack (4.2.5) lib/action_controller/metal/implicit_render.rb:4:in `send_action'
  actionpack (4.2.5) lib/abstract_controller/base.rb:198:in `process_action'
  actionpack (4.2.5) lib/action_controller/metal/rendering.rb:10:in `process_action'
  actionpack (4.2.5) lib/abstract_controller/callbacks.rb:20:in `block in process_action'
  activesupport (4.2.5) lib/active_support/callbacks.rb:117:in `call'
  activesupport (4.2.5) lib/active_support/callbacks.rb:555:in `block (2 levels) in compile'
  activesupport (4.2.5) lib/active_support/callbacks.rb:505:in `call'
  activesupport (4.2.5) lib/active_support/callbacks.rb:92:in `__run_callbacks__'
  activesupport (4.2.5) lib/active_support/callbacks.rb:778:in `_run_process_action_callbacks'
  activesupport (4.2.5) lib/active_support/callbacks.rb:81:in `run_callbacks'
  actionpack (4.2.5) lib/abstract_controller/callbacks.rb:19:in `process_action'
  actionpack (4.2.5) lib/action_controller/metal/rescue.rb:29:in `process_action'
  actionpack (4.2.5) lib/action_controller/metal/instrumentation.rb:32:in `block in process_action'
  activesupport (4.2.5) lib/active_support/notifications.rb:164:in `block in instrument'
  activesupport (4.2.5) lib/active_support/notifications/instrumenter.rb:20:in `instrument'
  activesupport (4.2.5) lib/active_support/notifications.rb:164:in `instrument'
  actionpack (4.2.5) lib/action_controller/metal/instrumentation.rb:30:in `process_action'
  actionpack (4.2.5) lib/action_controller/metal/params_wrapper.rb:250:in `process_action'
  activerecord (4.2.5) lib/active_record/railties/controller_runtime.rb:18:in `process_action'
  actionpack (4.2.5) lib/abstract_controller/base.rb:137:in `process'
  actionview (4.2.5) lib/action_view/rendering.rb:30:in `process'
  actionpack (4.2.5) lib/action_controller/metal.rb:196:in `dispatch'
  actionpack (4.2.5) lib/action_controller/metal/rack_delegation.rb:13:in `dispatch'
  actionpack (4.2.5) lib/action_controller/metal.rb:237:in `block in action'
  actionpack (4.2.5) lib/action_dispatch/routing/route_set.rb:76:in `dispatch'
  actionpack (4.2.5) lib/action_dispatch/routing/route_set.rb:45:in `serve'
  actionpack (4.2.5) lib/action_dispatch/journey/router.rb:43:in `block in serve'
  actionpack (4.2.5) lib/action_dispatch/journey/router.rb:30:in `serve'
  actionpack (4.2.5) lib/action_dispatch/routing/route_set.rb:817:in `call'
  warden (1.2.6) lib/warden/manager.rb:35:in `block in call'
  warden (1.2.6) lib/warden/manager.rb:34:in `call'
  rack (1.6.4) lib/rack/etag.rb:24:in `call'
  rack (1.6.4) lib/rack/conditionalget.rb:25:in `call'
  rack (1.6.4) lib/rack/head.rb:13:in `call'
  actionpack (4.2.5) lib/action_dispatch/middleware/params_parser.rb:27:in `call'
  actionpack (4.2.5) lib/action_dispatch/middleware/flash.rb:260:in `call'
  rack (1.6.4) lib/rack/session/abstract/id.rb:225:in `context'
  rack (1.6.4) lib/rack/session/abstract/id.rb:220:in `call'
  actionpack (4.2.5) lib/action_dispatch/middleware/cookies.rb:560:in `call'
  activerecord (4.2.5) lib/active_record/query_cache.rb:36:in `call'
  activerecord (4.2.5) lib/active_record/connection_adapters/abstract/connection_pool.rb:653:in `call'
  activerecord (4.2.5) lib/active_record/migration.rb:377:in `call'
  actionpack (4.2.5) lib/action_dispatch/middleware/callbacks.rb:29:in `block in call'
  activesupport (4.2.5) lib/active_support/callbacks.rb:88:in `__run_callbacks__'
  activesupport (4.2.5) lib/active_support/callbacks.rb:778:in `_run_call_callbacks'
  activesupport (4.2.5) lib/active_support/callbacks.rb:81:in `run_callbacks'
  actionpack (4.2.5) lib/action_dispatch/middleware/callbacks.rb:27:in `call'
  actionpack (4.2.5) lib/action_dispatch/middleware/reloader.rb:73:in `call'
  actionpack (4.2.5) lib/action_dispatch/middleware/remote_ip.rb:78:in `call'
  better_errors (2.1.1) lib/better_errors/middleware.rb:84:in `protected_app_call'
  better_errors (2.1.1) lib/better_errors/middleware.rb:79:in `better_errors_call'
  better_errors (2.1.1) lib/better_errors/middleware.rb:57:in `call'
  actionpack (4.2.5) lib/action_dispatch/middleware/debug_exceptions.rb:17:in `call'
  actionpack (4.2.5) lib/action_dispatch/middleware/show_exceptions.rb:30:in `call'
  railties (4.2.5) lib/rails/rack/logger.rb:38:in `call_app'
  railties (4.2.5) lib/rails/rack/logger.rb:20:in `block in call'
  activesupport (4.2.5) lib/active_support/tagged_logging.rb:68:in `block in tagged'
  activesupport (4.2.5) lib/active_support/tagged_logging.rb:26:in `tagged'
  activesupport (4.2.5) lib/active_support/tagged_logging.rb:68:in `tagged'
  railties (4.2.5) lib/rails/rack/logger.rb:20:in `call'
  quiet_assets (1.1.0) lib/quiet_assets.rb:27:in `call_with_quiet_assets'
  actionpack (4.2.5) lib/action_dispatch/middleware/request_id.rb:21:in `call'
  rack (1.6.4) lib/rack/methodoverride.rb:22:in `call'
  rack (1.6.4) lib/rack/runtime.rb:18:in `call'
  activesupport (4.2.5) lib/active_support/cache/strategy/local_cache_middleware.rb:28:in `call'
  rack (1.6.4) lib/rack/lock.rb:17:in `call'
  actionpack (4.2.5) lib/action_dispatch/middleware/static.rb:116:in `call'
  rack (1.6.4) lib/rack/sendfile.rb:113:in `call'
  railties (4.2.5) lib/rails/engine.rb:518:in `call'
  railties (4.2.5) lib/rails/application.rb:165:in `call'
  rack (1.6.4) lib/rack/lock.rb:17:in `call'
  rack (1.6.4) lib/rack/content_length.rb:15:in `call'
  rack (1.6.4) lib/rack/handler/webrick.rb:88:in `service'
  /Users/elizabethbayardelle/.rbenv/versions/2.2.4/lib/ruby/2.2.0/webrick/httpserver.rb:138:in `service'
  /Users/elizabethbayardelle/.rbenv/versions/2.2.4/lib/ruby/2.2.0/webrick/httpserver.rb:94:in `run'
  /Users/elizabethbayardelle/.rbenv/versions/2.2.4/lib/ruby/2.2.0/webrick/server.rb:294:in `block in start_thread'
Community
  • 1
  • 1
Liz
  • 1,369
  • 2
  • 26
  • 61
  • `url: "<%= url_for(:action => 'update_to_previous_events')` <~ can you try swapping out `url_for` with simple `update_to_previous_events_path` ? What is the exception you are getting – dimitry_n Oct 15 '16 at 22:18
  • @Dimitry_N, after making that change, my console shows this error: `Uncaught ReferenceError: update_to_previous_events_path is not defined` – Liz Oct 15 '16 at 22:23
  • run `rake_routes` in console and use the path that you see for `update_to_previous_events` – dimitry_n Oct 15 '16 at 22:26
  • `events_update_to_previous_events GET /events/update_to_previous_events(.:format) events#update_to_previous_events` – Liz Oct 15 '16 at 22:27
  • @Dimitry_N, Even changing the path to `$.ajax({ url: events_update_to_previous_events_path });` (excellent catch, by the way) I still get the uncaught reference error. – Liz Oct 15 '16 at 22:29
  • 2
    Did you try `$.ajax({ url: "/events/update_to_previous_events" });` ? – YTorii Oct 16 '16 at 04:43
  • +1 to @YTorii. Try a static path: `/events/update_to_previous_events` and tell us what you get in the server log. – dimitry_n Oct 16 '16 at 06:47
  • @YTorii, I updated the OP with the new error from the console. – Liz Oct 16 '16 at 15:27
  • I guess the routing is missing which controller to handle. So could you try `get 'events/update_to_previous_events' => 'events#update_to_previous_events' ` ? – YTorii Oct 16 '16 at 15:42
  • @YTorii still `GET http://localhost:3000/events/update_to_previous_events 404 (Not Found)` – Liz Oct 16 '16 at 15:49
  • I tried similar ajax action in my PC and works... Could you show us server's error log? Are the any errors like `AbstractController:ActionNotFound`? – YTorii Oct 16 '16 at 23:55
  • @YTorii, as expected, the server log starts with `ActiveRecord::RecordNotFound - Couldn't find Event with 'id'=update_to_previous_events`. I posted the whole log on the OP. – Liz Oct 18 '16 at 17:46
  • Are you putting your custom routes lines after `resouces :event` in routes.rb? If so, Rails assumes url like 'update_to...' as id param for show action. Try putting your custom routes lines before `resources :event`.(Though I'm not sure its the appropriate way...) – YTorii Oct 19 '16 at 00:37
  • @YTorii, so strange. That eliminated the server error message (it now reads `Started GET "/events/update_to_previous_events" for ::1 at 2016-10-18 18:14:17 -0700 Processing by EventsController#update_to_previous_events as */* Rendered text template (0.0ms) Completed 200 OK in 1ms (Views: 0.4ms | ActiveRecord: 0.0ms)`), but the page content still doesn't change. – Liz Oct 19 '16 at 01:15

1 Answers1

0

As comment form is small and illegible, I'd like to write in answer form. We have done two fixes as below.

  1. Using static path as url for ajax request like

    $.ajax({ url: "/events/update_to_previous_events" })

  2. Putting custom routes lines before resources: events

    get 'events/update_to_previous_events'
get 'events/update_to_upcoming_events'
resources: events

I overlooked render :nothing => true in events_controller, it does really do nothing for views. If you want to pass data to pages, for example:

events_controller:

def update_to_previous_events
  @events = Event.where("date < ?", Date.today).order('date DESC')
  render json: { :events => @events }
end

javascript:

$("#previousEvents").click(function() {
   $.ajax({ 
     url: "/events/update_to_previous_events",
     success: function(data) { 
       console.log(data.events)
       ...or your codes for listing events...
     }
   });
   return false;
});

And if you aren't sure of how to re-render the pages partially, this post would help you, I think.

Community
  • 1
  • 1
YTorii
  • 376
  • 2
  • 9
  • Thank you for this. Very helpful. As predicted, I'm still struggling through how to re-render the pages partially. I've never worked with JSON objects before... – Liz Oct 19 '16 at 15:56
  • I'm glad to help you. And if you have questions about re-renderring, you can close this question and make new questions. Hang in there! – YTorii Oct 19 '16 at 23:20