Rails with jQuery Ajax GET

Question

This code only outputs the data to the console. No requests are made in the server log. I'm totally baffled. My other click handlers are working fine. Why doesn't my ajax code show anything in the server log, but only the console? Thank you.

# routes.rb
  get 'organize/process' => 'organize#process_selections',
                                 format: :json, as: :organize_process
# organize_controller.rb
  def process_selections
    @selected_huddles = Huddle.includes(:huddle_membership_roles, :users)
                                .find(params[:huddle_ids])
    respond_to do |format|
      format.json { render 'selections', format: :js}
    end
  end

# js (inline with haml)
    $('h2.action').on('click', function() {

      //event.preventDefault();
      var huddle_ids = [];
      $('.card.selected').each(function() {
        huddle_ids.push( $(this).data('huddle-id') );
      });

      $.ajax('#{organize_process_path}', {
        //method: 'GET', (API says default is async/GET)
        //async: true,
        data: JSON.stringify({'huddle_ids' : huddle_ids}),
        contentType: 'application/json',
        dataType: 'json'
      });
    });

Update: The data string is output to the console even when I completely remove the $.ajax call. So the .each method is returning too early I think.

Update2: Note that I'm not submitting a form. I don't know if that makes a difference. Thanks again.

Update3: I was using the wrong view. I've got the ajax to send the request, but my formatting is wrong:

Started GET "/organize?{%22huddle_ids%22:[1]}" for ::1 at 2016-07-14 01:49:08 -0500
Processing by OrganizeController#select as JSON
  Parameters: {"{\"huddle_ids\":"=>{"1"=>{"}"=>nil}}, "organize"=>{}}

Here's my current code for the js and controller:

# JS
  $('h2').on('click', '.action', function() {
    //console.log("data", selectedHuddleIds());
    $.ajax('#{organize_process_path}', {
      data: selectedHuddleIds(),
      contentType: 'application/json',
      dataType: 'json'
    });
  });

  function selectedHuddleIds() {
    var ids = [], selected_cards = $('.card.selected');
    selected_cards.each(function() {
      ids.push( $(this).data('huddle-id') );
    })
    return JSON.stringify({ 'huddle_ids' : ids });
  }

# controller
  def process_selections
    @selected_huddles = Huddle.includes(:huddle_membership_roles, :users)
                                .find(params[:huddle_ids])
    respond_to do |format|
      format.json { render js: 'selected' }
    end
  end

Answer 1

You are expecting the Rails route to be properly expanded by JavaScript. This won't work.

Replace

$.ajax('#{organize_process_path}', {

with

$.ajax('organize/process', {

Also, as I referred to in my comment, replace the .each() call with a for loop something like this:

$('h2.action').on('click', function() {

  //event.preventDefault();
  var huddle_ids = [];
  var selecteds = $('.card.selected')
  for(var i = 0 i < selelcteds.length; i++) {
    huddle_ids.push( selecteds[i].data('huddle-id') );
  });

  $.ajax('#{organize_process_path}', {
    //method: 'GET', (API says default is async/GET)
    //async: true,
    data: JSON.stringify({'huddle_ids' : huddle_ids}),
    contentType: 'application/json',
    dataType: 'json'
  });
});

Answer 2

Please try like this

$.ajax({
  url: '#{organize_process_path}',
  data: JSON.stringify({'huddle_ids' : huddle_ids}),
  contentType: 'application/json',
  dataType: 'json'
});