Bad Request, bad URI 400 Error

Question

I'm 'ajaxing' my rails web app something I haven't done before. My goal is to add a product to the database without refreshing the page

I have a User and Product Controller. A user in his personal page adds a product. But I'm getting an 400 Error.

Bad Request

bad URI `/users/function (options) { return Utils.build_path([], ["format"],[2,[2,[7,"/",false],[6,"products",false]],[1,[2,[8,".",false],[3,"format",false]],false]], arguments); }'.

and also

bad URI `/users/function%20(options)%20%7B%20%20return%20Utils.build_path([],%20[%22format%22],%20[2,[2,[7,%22/%22,false],[6,%22products%22,false]],[1,[2,[8,%22.%22,false],[3,%22format%22,false]],false]],%20arguments);%20%20%7D'.

Product Controller code:

class ProductsController < ApplicationController

respond_to :html, :json

    def create
        @product = Product.new(product_params)
        respond_to do |format|
            if @product.save
                format.html do
                    redirect_to '/'
                end
                format.json { render json: @product.to_json }
            else
                # Add a handler for unsuccessful cases
            end
        end

    end
    def product_params
        params.require(:product).permit(:title, :units)
    end
end

User Controller, the show method:

def show
    @user = User.find(params[:id])
    @product = Product.new
end

The jQuery function that has the ajax functionality:

    $('.edit-box > form input[type=submit]').click(function(e) {
        closeEdit();
        event.preventDefault();
        $.ajax({
            url: Routes.products_path,
            dataType: 'json',
            type: 'POST'
        })
     });

Any ideas?

Answer 1

Routes.product_path is a javascript function so you need to call it with brackets. Without calling it you are putting the function code as url of your ajax call, and that's why you get a BAD URI error.

Try with:

$('.edit-box > form input[type=submit]').click(function(e) {
    closeEdit();
    event.preventDefault();
    $.ajax({
        url: Routes.products_path(),
        dataType: 'json',
        type: 'POST'
    })
 });

Anyway you should set some params to send, or your controller will create an empty product if it's allowed or will return a 500 Error if you have some validation on your model.

To send params use the data option. (Documentation here: http://api.jquery.com/jQuery.ajax)

$('.edit-box > form input[type=submit]').click(function(e) {
   closeEdit();
   event.preventDefault();
   $.ajax({
      url: Routes.products_path(),
      dataType: 'json',
      type: 'POST',
      data: {key1: "value1", key2: "value2", ... }
  })
});

UPDATE

To get the value you can use the serializeArray() jQuery method on your form, but you will get an array of object with name and value of your form inputs. If you want a plain object, you can easly add the serializeObject() method to jQuery. (Source)

$.fn.serializeObject = function()
{
    var o = {};
    var a = this.serializeArray();
    $.each(a, function() {
        if (o[this.name] !== undefined) {
            if (!o[this.name].push) {
                o[this.name] = [o[this.name]];
            }
            o[this.name].push(this.value || '');
        } else {
            o[this.name] = this.value || '';
        }
    });
    return o;
};

/* Now you can use the method to serialize your form to an object */
var dataToSend = $('.edit-box > form').serializeObject()