title: Backbone model.destroy() invoking error callback function even when it works fine?
body: <p>I have a <a href="http://documentcloud.github.com/backbone/#Model-destroy" rel="noreferrer">Backbone.js</a> model that I'm trying to destroy when the user clicks a link in the model's view. The view is something like this (pseudocode because it's implemented in <a href="http://jashkenas.github.com/coffee-script/" rel="noreferrer">CoffeeScript</a> which can be found at the bottom of the question).</p>
  
  <pre><code>var window.ListingSaveView = Backbone.View.extend({
    events: {
      'click a.delete': 'onDestroy'
    },
  
    onDestroy: function(event){
      event.preventDefault();
      this.model.destroy({
        success: function(model, response){
          console.log "Success";
        },
        error: function(model, response){
          console.log "Error";
        }
      });
    }
  });
  </code></pre>
  
  <p>When I click the <code>delete</code> link in the browser, I always get <code>Error</code> logged to the console even though my server records successful destruction of the associated database record and returns a 200 response. When I refresh the page (causing the collection to re-render from the DB) the model I deleted will be gone.</p>
  
  <p>One interesting this is that when I log the <code>response</code> in the error callback, it has statuscode <code>200</code> indicating success but it also reports <code>statusText: "parseerror"</code> whatever that means. There is no error in my server logs.</p>
  
  <p>What am I doing wrong?</p>
  
  <p>This is the response from the server:</p>
  
  <pre><code>  Object
      abort: function ( statusText ) {
      always: function () {
      complete: function () {
      done: function () {
      error: function () {
      fail: function () {
      getAllResponseHeaders: function () {
      getResponseHeader: function ( key ) {
      isRejected: function () {
      isResolved: function () {
      overrideMimeType: function ( type ) {
      pipe: function ( fnDone, fnFail ) {
      promise: function ( obj ) {
      readyState: 4
      responseText: " "
      setRequestHeader: function ( name, value ) {
      status: 200
      statusCode: function ( map ) {
      statusText: "parsererror"
      success: function () {
      then: function ( doneCallbacks, failCallbacks ) {
      __proto__: Object
  </code></pre>
  
  <p>Here is the server action that destroy interacts with (Ruby on Rails)</p>
  
  <pre><code>  # DELETE /team/listing_saves/1.json
    def destroy
      @save = current_user.team.listing_saves.find(params[:id])
      @save.destroy
      respond_to do |format|
        format.json { head :ok }
      end
    end
  </code></pre>
  
  <p>And here is the actual CoffeeScript implementation of the Backbone View for people who prefer it like that:</p>
  
  <pre><code>class MoveOutOrg.Views.ListingSaveView extends Backbone.View
    tagName: 'li'
    className: 'listing_save'
    template: JST['backbone/templates/listing_save']
    events:
      'click a.delete_saved': 'onDestroy'
  
    initialize: -&gt;
      @model.bind 'change', this.render
    render: =&gt;
      renderedContent = @template(@model.toJSON())
      $(@el).html(renderedContent)
      this
    onDestroy: (event) -&gt;
      event.preventDefault() # stop the hash being added to the URL
      console.log "Listing Destroyed"
      @model.destroy
        success: (model, response)-&gt;
          console.log "Success"
          console.log model
          console.log response
  
        error: (model, response) -&gt;
          console.log "Error"
          console.log model # this is the ListingSave model
          console.log response
  </code></pre>