How do I update Ember CLI record with rails 4 Grape API with PUT?

Question

I have a Rails 4 app setup with a Grape API and an Ember CLI app for the fronted by following this tutorial built using the ActiveModelAdapter. Everything is working correctly in getting data from the API, but I'm having issues sending POST or PUT requests to the API to create or edit records. I found another tutorial that shows an example, which uses a RESTAdapter and a different API, of how to create the remaining CRUD operations. I'm having some trouble getting the PUT or POST requests to have the appropriate form, I think. Here's the error that I'm getting:

    PUT http://localhost:3000/api/v1/contacts/3 400 (Bad Request)jQuery.ajaxTransport.send @ jquery.js:9665jQuery.extend.ajax @ jquery.js:9216ember$data$lib$system$adapter$$Adapter.extend.ajax @ inflector.js:30initializePromise @ ember.debug.js:45487Promise @ ember.debug.js:47115ember$data$lib$system$adapter$$Adapter.extend.ajax @ inflector.js:30ember$data$lib$system$adapter$$Adapter.extend.updateRecord @ rest-adapter.js:687ember$data$lib$system$store$$_commit @ debug-adapter.js:109(anonymous function) @ store.js:1627forEach @ ember.debug.js:12012ember$data$lib$system$store$$Service.extend.flushPendingSave @ store.js:1611Queue.invoke @ ember.debug.js:879Queue.flush @ ember.debug.js:944DeferredActionQueues.flush @ ember.debug.js:749Backburner.end @ ember.debug.js:174Backburner.run @ ember.debug.js:229run @ ember.debug.js:15864ActionHelper.registerAction.ActionManager.default.registeredActions.(anonymous function).handler @ ember.debug.js:18409(anonymous function) @ ember.debug.js:36725jQuery.event.dispatch @ jquery.js:4671jQuery.event.add.elemData.handle @ jquery.js:4339
ember.debug.js:26511 Error: Bad Request
    at ember$data$lib$system$adapter$$Adapter.extend.ajaxError (inflector.js:6)
    at superFunction [as _super] (ember.debug.js:13812)
    at ember$data$lib$adapters$rest$adapter$$default.extend.ajaxError (json-serializer.js:75)
    at apply (ember.debug.js:17855)
    at superWrapper [as ajaxError] (ember.debug.js:17437)
    at ember$data$lib$system$adapter$$Adapter.extend.ajax.Ember.RSVP.Promise.hash.error (inflector.js:30)
    at jQuery.Callbacks.fire (jquery.js:3149)
    at Object.jQuery.Callbacks.self.fireWith [as rejectWith] (jquery.js:3261)
    at done (jquery.js:9317)
    at XMLHttpRequest.jQuery.ajaxTransport.send.callback (jquery.js:9719)

Here's my adapter.js:

import DS from 'ember-data';
import ENV from "../config/environment";

export default DS.ActiveModelAdapter.extend({
    namespace: 'api/v1',
    host: ENV.host
});

Here's my router.js:

    import Ember from 'ember';
    import config from './config/environment';

    var Router = Ember.Router.extend({
      location: config.locationType
    });


    Router.map(function() {
      this.route('dashboard', function() {
          this.resource('contacts', function() {
              this.route('new');
              this.route('show', { path: '/:contact_id' });
              this.route('edit', {path: '/:contact_id/edit'});
            });
        });
    });

export default Router;

Here's my contacts/edit.js route:

import Ember from 'ember';

export default Ember.Route.extend({
    model: function(params) {return this.store.find('contact', params.contact_id);},
    actions: {
        save: function() {  
            var self = this;
            self.controller.get('model').save().then(
                function() {
                    self.transitionTo('contacts.index');
                });
        },
        delete: function() {
            var self = this;
            var model = self.controller.get('model'); 
            model.destroyRecord().then(
                function() {
                    self.transitionTo('contacts.index');
                }, function (error) {
                    Ember.Logger.debug(error);
                });
        }
    }
});

I believe the problem is somewhere between the edit router and the adapter... But I'm having trouble identifying exactly what the problem is here.

UPDATE 1: Rails Log outputs: Started PUT "/api/v1/contacts/3" for ::1 at 2015-07-13 10:47:04 -0800

Any help/ideas would be much appreciated!!

Answer 1

This sounds more like a backend issue than an ember issue. Check that your backend is properly responding to requests (Either via logs, or testing with postman, curl, etc)