Parse error using 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?

回答1:

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 *"

回答2:

@stephencorwin is correct. Remotipart uses a hidden iframe to transport your image. As a result of edit action receiving an html request, your server returns an html response. Remotipart is smart enough to wrap your desired json response in html, and you can use $.parseJSON(data.responseText) to get at the json. But your browser, which is expecting a pure json response, will throw the parserror.

I believe that you can simply ignore this error.