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

thanks in advance, 1 has stumped me few days.

i have view in rails app randomize word in spanish while presenting same word in english. example:

dog

oprer

the user able toggle letters of spanish word , forth 'create' correct word, in above example 'perro'. user clicks button submit answer , javascript correctly alerts array 'perro' or whatever user has generated. goal pass javascript array (sortedids in below code) rails 'lang' controller after user clicks next button. ajax code below doesn't seem because when try access array in controller using single line of code below, nil error:

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

my javascript code looks 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 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 |letter| %>           <li class="ui-state-default" custom-cl="<%= letter %>" ><%= letter %></li>         <% end %>        </ul>      </div>    </div>   <% end %>    <% if @randomnumber == 1 %>       <h2> 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 add jsfiddle example:

jsfiddle example

edit2 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 page 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 other exercise         @test = "exercise 2"       end      end   end 

@mtcrts70 - how pass data controller using ajax request.

$.ajax({

  type: 'get',   url: target,   datatype: 'script,   data: {order: sortedids}  }); 

in controller, in params[:order]