On Button Click Send Javascript Array To Rails Controller Via Ajax Request

Question

Thanks for the help in advance, this one has stumped me for a few days.

I have a view in my rails app that will randomize a word in spanish while presenting the same word in english. Example:

dog

oprer

The user is able to toggle the letters of the spanish word back and forth to 'create' the correct word, in the above example 'perro'. The user then clicks a button to submit the answer and my javascript correctly alerts the array 'perro' or whatever the user has generated. My goal is to pass this javascript array (sortedIDs in the below code) back to my rails 'lang' controller after the user clicks the next button. The ajax code below doesn't seem to do this because when I try to access the array in my controller using the single line of code below, I get a nil error:

data = params[:order].split(',')

My javascript code looks like this:

$(function() {

    $(" #sortable ").sortable({axis: "x", containment: "window"});
    $( ".clicked" ).click( function() {

       var sortedIDs = $( "#sortable" ).sortable( "toArray", {attribute: 'custom-cl'} );
       alert(sortedIDs);

   var target = "http://localhost:3000/langs";

       $.ajax({
         type: 'get',
         url: target + '?order='+sortedIDs.join(',') ,
         dataType: 'script'
       }); 
    });      });

My index view looks like this:

<% provide(:title, 'Quiz') %>
<%= javascript_include_tag 'scramble' %>

<div class="center jumbotron" style="width: 100%; margin-left: auto; margin-right: auto;">


  <% if @randomNumber == 0 %>  
    <h2> Word Scramble </h2>


    <div class="well" style="background-color: #D8D8D8; width: 50%; margin-left: auto; margin-right: auto;">
      <%= @spanishNotScrambled %>
    </div>


    <div class="panel panel-default" style="background-color: #CEECF5; width: 100%; margin-left: auto; margin-right: auto;">
      <div class="panel-body">


       <ul id="sortable">

        <% @wordScramble.each do |letter| %>
          <li class="ui-state-default" custom-cl="<%= letter %>" ><%= letter %></li>
        <% end %> 
      </ul>

    </div>
   </div>
  <% end %>

  <% if @randomNumber == 1 %>  
    <h2> Some other exercise </h2>
    <%= @test %>
  <% end %>

  <% if @index != 9 %>
    <ul class="pager">
      <div class="clicked"><%= link_to "Next", langs_path(:option => 'next2')%></div>
    </ul>
  <% else %>
    <ul class="pager">
      <div class="clicked"><%= link_to "Score Quiz!", langs_path(:option => 'scorequiz')%></div>
    </ul>
  <% end %>

</div>

Edit to add jsfiddle example:

jsfiddle example

Edit2 to add controller code:

class LangsController < ApplicationController
  before_filter :signed_in_user, only:[:index, :show]

  def index
    @quiz = Lang.limit(10).offset(current_user.bookmark - 11)
    @index = current_user.bookmark2
    @randomNumber = rand(1)
    which_button_clicked2
    exercise_bank
    data = params[:order].split(',')
  end

  private
    def signed_in_user
      redirect_to user_session_path, notice: "Please sign in." unless user_signed_in?
    end

    def which_button_clicked2
      if params[:option] == "next2"
        @index = @index + 1
        current_user.bookmark2 = @index
        current_user.save
      end

      if params[:option] == "scorequiz"
        @index = 0
        current_user.bookmark2 = @index
        current_user.save
        #redirect to page where show quiz results
      end
    end

    def exercise_bank
      if @randomNumber == 0 #execute word scramble exercise
         @spanishNotScrambled = @quiz[@index].english_to_spanish
         @wordScramble = @quiz[@index].english.split('').shuffle

      end

      if @randomNumber == 1 #execute some other exercise
        @test = "Exercise 2"
      end

    end  
end

not yet. Plan to do more this weekend though and will update if find solution. — mtcrts70
– mtcrts70, Commented Apr 25, 2014 at 17:50
Is params[order] getting passed as empty array. Did u checked params in console when ajax is fired — Dave
– Dave, Commented Apr 25, 2014 at 17:56
I've added the jsfiddle. When you say check params in console how exactly would I do that. Do you mean open up rails console? — mtcrts70
– mtcrts70, Commented Apr 25, 2014 at 19:19

Addicted · Accepted Answer · 2014-04-26 18:30:52Z

3

@mtcrts70 - This is how I generally pass my data to controller using ajax request.

$.ajax({

  type: 'GET',
  url: target,
  dataType: 'script,
  data: {order: sortedIDs}

});

In controller, you will get it in params[:order]

answered Apr 26, 2014 at 18:30

Addicted

7491 gold badge6 silver badges19 bronze badges

Thanks! The above has gotten me one step closer---the view doesn't error out now. When I look at the url though the sorted ID's don't seem to be in there. The url looks like this after click of the next button: "localhost:3000/langs?option=next2". Shouldn't it include the sortedIDs? Perhaps my target variable is incorrect. Do I just need to specify the resource instead?

mtcrts70
– mtcrts70

04/26/2014 19:55:33
Commented Apr 26, 2014 at 19:55
@mtcrts70 - url: '/controller_name/action_name', eg: url: 'locations/search'

Addicted
– Addicted

04/27/2014 18:24:28
Commented Apr 27, 2014 at 18:24

Add a comment |

Collectives™ on Stack Overflow

On Button Click Send Javascript Array To Rails Controller Via Ajax Request

1 Answer 1

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Related