使用 Remotipart 解析错误

I'm using remotipart to upload and upgrade images using ajax, the problem is when I edit an item, ajax updates the data, but remotipart(https://github.com/leppert/remotipart) returns a 'parse error' for image update.

This is how my form looks like:

= form_for(Achievement.new), html: {multipart: true , remote: true} do |f|
          = f.text_field :name
          = f.text_area :description
          = f.file_field :image
          = f.submit 'Send'

I'm using a single form to create, edit and delete the 'Achievements'. Here's my js:

constructor: ->
    $('.edit_button').click ->
      $.ajaxSettings.dataType = "json"
      @id = $(this).data('id')
      @content = $(this).parent()
      @name = $('.form_achievement #name')
      @description = $('.form_achievement #description')
      @image = $('.form_achievement .avatar img')
      @button = $('.form_achievement form input:submit')
      @form = $('.form_achievement form')

      #Load data to edit on form
      $.ajax
        type: 'get'
        url: "/en/private/achievements/#{@id}/edit/"

        success: (data) =>
          alert 'edit'
          @name.val(data.achievement.name)
          @description.val(data.achievement.description)
          @stat.html(data.achievement.stat)
          @value.val(data.achievement.value)
          @image.prop 'src', data.image

        #Change method of the form to put and bind event  
        $.ajaxSettings.dataType = "json"
        @form.attr('method','put')
        $('.form_achievement form').attr('action', "/en/private/achievements/#{@id}")
        $('#achievement_form.accordion .form_achievement').unbind('click', NewAchievement)

        @form.bind 'ajax:success', (xhr, data, status) =>
          @content.slideUp 'slow', ->
            $(this).remove()
          alert 'Edit'

        @form.bind 'ajax:error', (event, response, error) =>
          alert error
        @button.bind 'change', => @changeButton()


        error: (data) ->
          alert 'error'

  changeButton: ->
    @form.submit()

This solves my problem when I'm trying to do an edit without change image, but when I do an edit trying to upgrade to a new image, returns me a 'parse error'. Can anyone help me?

解决方案

You're very likely getting a parse error because your response is actually HTML.

The problem is that by default remotipart assumes the server response was JS. You can set the data type when rendering the form, in your case:

form_for(Achievement.new), html: {:'data-type' => :html, :multipart => true, :remote => true}

Or it can be done in JS like so:

@form.bind 'ajax:remotipartSubmit', (event, xhr, settings) =>
    settings.dataType = "html *"