404 Not Found error on ngResource delete in AngularJS & Rails

Question

I have an Account Controller in AngularJS for an Accounts page, and on this page Records are displayed related to that Account.

The url of the page is based on the Acccount:

http://localhost:3000/#/accounts/16

In my accounts controller I retrieve the records:

            Account = $resource('/accounts/:accountId', {
                accountId: "@id",
                format: 'json'
            }, {
                'save': {
                    method: 'PUT'
                },
                'create': {
                    method: 'POST'
                }
            });

            var Record = $resource('/records/:recordId', {
                recordId:'@id',
                format: 'json'
            }, {
                'save': {
                    method: 'PUT'
                },
                'create': {
                    method: 'POST'
                },
                'delete': {
                    method: 'DELETE'
                }
            });

            if ($routeParams.accountId) {
                Account.get({
                    accountId: $routeParams.accountId
                }, (function(account) {
                    return $scope.account = account;
                }), (function(httpResponse) {
                    $scope.account = null;
                    return flash.error = "There is no account with ID " + $routeParams.accountId;
                }));

                Record.query({
                    account_id: account_id
                }, function(results) {
                    return $scope.records = results;
                });

            } else {
                $scope.account = {};
                $scope.records = [];
            }

They are displayed on the Accounts page:

    <tbody>
        <tr ng-repeat="record in records">
            <td>{{record.name}}</td>
            <td>{{record.description}}</td>
            <td>
                <button type="submit" ng-click="deleteRecord(record)">Delete</button>
            </td>
        </tr>
    </tbody>

The delete method:

            $scope.deleteRecord = function(record) {

                record.$delete(function() {
                    return flash.success = "Record deleted successfully.";
                });

                var records = $scope.records;

                for (var recordKey in records) {
                    if (records[recordKey]._id == record._id) {
                        $scope.records.splice(recordKey, 1);
                    }
                }
                return;

            };

My problem is when attempting to delete a Record I get the following error:

DELETE http://localhost:3000/records/2    [HTTP/1.1 404 Not Found  69ms]

The following output is displayed in the terminal when running rails server:

Started DELETE "/records/2?format=json" for 127.0.0.1 at 2015-06-15 21:18:04 -0400
Processing by RecordsController#destroy as JSON
  Parameters: {"id"=>"2"}
  Record Load (4.5ms)  SELECT  "records".* FROM "records" WHERE "records"."id" = $1 LIMIT 1  [["id", 2]]
  Rendered text template (0.0ms)
Completed 404 Not Found in 12ms (Views: 4.7ms | ActiveRecord: 4.5ms)

How can I delete records when I am not on the current page for that model?

Deleting items this way works when I am deleting the specific model of the page I am on (i.e. Deleting an Account from the Accounts page).

My controller action for reference:

  def destroy
    record = Record.find(params[:id])
    record.destroy!
    head :no_content
  end

Any help is appreciated.

Thanks!

Answer 1

First of all, I think you don't have to set the format through a URL parameter "/records/2?format=json". AngularJS sends the header Content-Type: application/json by default. And your controller should also use this way, to determine which format to use.

Second: To come closer to the source of the problem, put a debugger statement (or whatevery debugger you are using) here

  def destroy
    record = Record.find(params[:id])
    debugger
    record.destroy!
    head :no_content
  end

Then make your json call. When you get into your debugger in your terminal, and everything is successfully destroyed, you are closer to the problem.

Also try to send some real data back for the DELETE request (see the discussion here Is an entity body allowed for an HTTP DELETE request?).

Answer 2

The error is indicating that the rails route doesn't exists. Did you check your routes to make sure the DELETE route exists in routes.rb file?
In your terminal run

rake routes

If you don't see the DELETE route you may have something like this in routes.rb

resources :accounts do
  resources :records, only: [:create, :index, :show]
end

Change it to include destroy

resources :acounts do
  resources :records, only: [:create, :index, :show, :destroy]
end