How do I pass params to Rails controller method then return value using JQuery/AJAX?

Question

I am using a click function to first get the array/position, then post it via an AJAX call to a controller method. I would then like the method to return a boolean value to enable the addClass in the jquery function. The console is consistently throwing a 500 server error.

Here is the .js file:

   $(document).ready(function(){
     $("#backboard").on("click", "div", function(e){
       $("#backboard div").removeClass("selected");
       var val = $(this).data('val');
     $.ajax ({
        type: 'POST',
        url: "https://localhost:3000/chess/:pos",
        data: {pos: {value: val}},
        success: function(d){
          if(d === true){
            $(this).addClass("selected").append("<p>"+val+"<p>");
          }
        }
      });
    });
  });

here is the controller.rb file:

 class ChessController < ApplicationController
    include ChessHelper

    def new
    @select = false
    @game = Game.new("white", "ARSEFACE!!!")
    @arr = @game.board
    @cpu = @game.cpuName
    @player = @game.playerName



   end

   def select
      pos = params[:pos]
     a = pos[0]
     b = pos[1]

     if(@arr[a][b][0]===@color)
        @select = !@select
     end

     respond_to do |format|
       format.json { render json: @select }
      end
    end
  end

Here is the config/routes.rb:

   get '/chess', to: 'chess#new'
   post '/chess/:pos' => 'chess#select'

I know I am probably missing something incredibly obvious here, but any help would be appreciated!

PS and the val variable taking the data from the tag does actually have a value. I am trying to pass that value to the controller in order to return true or false, and will eventually be a validation function once I get this basic issue worked out.

Try adding the param the route is waiting for as `https://localhost:3000/chess/1`, instead `:pos` in your `$.ajax()` function. — Sebastián Palma, Jun 01 '17 at 20:53
If `@arr[a][b][0]` wouldn't be equal to `@color` then you couldn't render `@select`? — Sebastián Palma, Jun 01 '17 at 20:58
yes, well, it would not add the class. the color is the player color, and the select should only work if that can be verified by the select function, which will check against the values contained in the board. nonetheless, it shouldn't return a server error? — Chad Denaux, Jun 01 '17 at 21:01
I think you'd need to check the console, network tab to see what happens with the ajax request. — Sebastián Palma, Jun 01 '17 at 21:03
xhr.send( ( options.hasContent && options.data ) || null ); appears to b an issue. also now getting an SSL_PROTOCOL_ERROR exception in the console log — Chad Denaux, Jun 01 '17 at 21:04
I actually did try hardcoding true there, same issues, not responding. — Chad Denaux, Jun 01 '17 at 21:17
Generally in dev mode, when you get a 500 error your server will spit out some useful information, like the type of error that was raised and line number — max pleaner, Jun 01 '17 at 22:02
throws POST.........(some folder location stuff)....net::ERR_SSL_PROTOCOL_ERROR send @ jquery.self-bd7ddd3….js?body=1:10255 ajax @ jquery.self-bd7ddd3….js?body=1:9739 (anonymous) @ chess.self-3b4f822….js?body=1:5 dispatch @ jquery.self-bd7ddd3….js?body=1:5227 elemData.handle @ jquery.self-bd7ddd3….js?body=1:4879 — Chad Denaux, Jun 01 '17 at 22:05
@ChadD It'd be better if you included the whole error in the question, formatting it into a code block, but anyway if I had to guess the code shown here is not the cause of the SSL error. Do you have `config.force_ssl = true` set in your application? See https://stackoverflow.com/questions/5943647/how-to-use-deactivate-webricks-ssl — max pleaner, Jun 01 '17 at 22:22
Ok, the config files are still pretty much default. I clearing browser cookies and it did not help, still receive same error. — Chad Denaux, Jun 01 '17 at 23:10

Josh Brody · Accepted Answer · 2017-06-02T18:02:37.070

url: "https://localhost:3000/chess/:pos", won't be interpolated, unless I'm completely missing something.

With post '/chess/:pos' => 'chess#select' you're telling the Rails (its router specifically) to look for a param inside the request path in the position of :pos, and when it finds it, set the value of the params hash (at params[:pos]) to the string at :pos in the path.

jQuery doesn't know anything about Rails' router. Neither does Javascript.

To see what I mean, add this to your routes.rb file:

get '/:cookies/and/:cream' => 'application#test'

in application_controller.rb, add the following:

def test
  render :text => "I love me some #{params[:cookies]} with my #{params[:cream]}"
end

then hit http://localhost:3000/chocolate-chip/and/milk

should read "I love me some chocolate-chip with my milk"

Now, assuming your other code is fine,

$("#backboard").on("click", "div", function(e){
       $("#backboard div").removeClass("selected");
       var val = $(this).data('val');
     $.ajax ({
        type: 'POST',
        url: "http://localhost:3000/chess/" + val,
        success: function(d){
          if(d === true){
            $(this).addClass("selected").append("<p>"+val+"<p>");
          }
        }
      });

should do it. No need to pass any additional data in the ajax function.

Also, don't use HTTPS in development. It'll just cause you headaches.

thanks, the server log is still throwing the error: 2017-06-02 10:28:27 -0400: HTTP parse error, malformed request (): # — Chad Denaux, Jun 02 '17 at 14:30

How do I pass params to Rails controller method then return value using JQuery/AJAX?

1 Answers1

Linked