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

这篇关于使用 Remotipart 解析错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！