Reactjs and rails implementation error on form 404 not found on the server side

Question

I am using Reactjs for the front end view with Rails on the backend, I am new in both the issue is that I am getting a 404 not found on the Delete and Edit actions via ajax. Here is part of my code hopefully it will help: Customer.js.jsx var Customer = React.createClass ({ getInitialState: function() { return { edit: false }; },

handleToggle: function(e) {
    e.preventDefault();
    this.setState({ edit: !this.state.edit });
},

handleDelete: function(e) {
    e.preventDefault();
    $.ajax({
        method: 'DELETE',
        url: '/customers/' + this.props.customer.id,
        dataType: 'json',
        success: function() {
            this.props.handleDeleteCustomer(this.props.customer)
        }.bind(this)
    });
},

handleEdit: function(e) {
    e.preventDefault();
    var data = { name: React.findDOMNode(this.refs.name).value,
        lastname: React.findDOMNode(this.refs.lastname).value,
        mobile: React.findDOMNode(this.refs.mobile).value,
        phone: React.findDOMNode(this.refs.phone).value,
        email: React.findDOMNode(this.refs.email).value,
        address: React.findDOMNode(this.refs.address).value,
        zip: React.findDOMNode(this.refs.zip).value,
        city: React.findDOMNode(this.refs.city).value,
        state: React.findDOMNode(this.refs.state).value}

    $.ajax({
        method: 'PUT',
        url: '/customers/' + this.props.customer.id,
        dataType: 'json',
        data: { customer: data },
        success: function(data) {
            this.setState({ edit: false });
            this.props.handleEditCustomer(this.props.customer, data);
        }.bind(this)
    });
},

customerRow: function() {
    return(
    <tr>
        <td>{this.props.customer.name}</td>
        <td>{this.props.customer.lastname}</td>
        <td>{this.props.customer.mobile}</td>
        <td>{this.props.customer.phone}</td>
        <td>{this.props.customer.email}</td>
        <td>{this.props.customer.address}</td>
        <td>{this.props.customer.city}</td>
        <td>{this.props.customer.zip}</td>
        <td>{this.props.customer.state}</td>
            <td>
                <a className='btn btn-default' onClick={this.handleToggle}>
                    Edit
                </a>
                <a className='btn btn-danger' onClick={this.handleDelete}>
                    Delete
                </a>
            </td>
        </tr>
    );
},...there is more.

Here is my controller:

class CustomersController < ApplicationController
  before_action :set_customer, only: [:update, :destroy]

  def index
    @customers = Customer.all
  end

  def create
    @customer = Customer.new(customer_params)

    if @customer.save
      render json: @customer
    else
      render json: @customer.errors, status: :unprocessable_entity
    end
  end
end

def update
  if @customer.update(customer_params)
    render json: @customer
  else
    render json: @customer.errors, status: :unprocessable_entity
  end
end

def destroy
  @customer.destroy
  head :no_content
end

private

def customer_params
  params.require(:customer).permit(:name, :lastname, :mobile, :phone, :email, :address, :zip, :city, :state)
end

def set_customer
  @customer = Customer.find(params[:id])
end

Here is what I a getting on the server log when I press delete button: [15007] 127.0.0.1 - - [10/Nov/2015:17:01:26 -0400] "DELETE /customers/1 HTTP/1.1" 404 19470 0.1995

Here is the console log: DELETE http://localhost:3000/customers/1 404 (Not Found) XHR finished loading: DELETE "http://localhost:3000/customers/1"

depending on your version of react you can just say this.refs.whatever and that will return the actual DOM node.. so you dont have to say findDOMNode() — John Ruddell
I fixed the indentation in your question (I think), and it seems that your CustomersController actually ends after your create method, meaning that it doesn't have a destroy method. Not sure if this would have anything to do with your issue or not... — Joe Kennedy
@JoeKennedy you were correct!!!! How could I missed that? Thanks !!!! — Rafael Flores
@RafaelFlores no problem! I'm glad my hunch helped you out! I expanded my above comment into an answer since it seems to have solved your issue. — Joe Kennedy

Joe Kennedy Joe Kennedy · Accepted Answer · 2015-11-13T16:05:16

As we discussed in the comments, the CustomersController actually ends after the create method, so the update, destroy, customer_params, and set_customer methods all fall outside of the CustomersController. So, moving the third end after the create method to end of the file should fix it. Your controller should look like:

class CustomersController < ApplicationController
  before_action :set_customer, only: [:update, :destroy]

  def index
    @customers = Customer.all
  end

  def create
    @customer = Customer.new(customer_params)

    if @customer.save
      render json: @customer
    else
      render json: @customer.errors, status: :unprocessable_entity
    end
  end
# note that there was a third end here

  def update
    if @customer.update(customer_params)
      render json: @customer
    else
      render json: @customer.errors, status: :unprocessable_entity
    end
  end

  def destroy
    @customer.destroy
    head :no_content
  end

  private

  def customer_params
    params.require(:customer).permit(:name, :lastname, :mobile, :phone, :email, :address, :zip, :city, :state)
  end

  def set_customer
    @customer = Customer.find(params[:id])
  end
end # end moved to here

Reactjs and rails implementation error on form 404 not found on the server side

1 Answers