使用remotipart插件上传图像时，T​​extarea包裹着JS

Question

I am using remotipart plugin to do the Ajax image upload. Recently I upgraded the Rails version from 3.1.10 to 3.2.13. After upgrading rails version I found that ajax image upload is not working.

I have form which submits the image using remotipart plugin and renders the response.But after rails upgrade I am not able to render the response. While investigating the issue I found that response is wrapped with textarea block and thus not getting rendered.

I referred some of the related stackoverflow questions as well as issues reported on github by remotipart users but not able to figure out any resolution for this issue.

viz: ajax post request responds with an html element when including an attachment with paperclip

Trouble with Paperclip and Ajax with Rails 3.2.8

https://github.com/JangoSteve/remotipart/issues/89

Would anyone please suggest how I can resolve this issue or what I am doing wrong?

Thanks and Regards,

Answer 1

You can do this on your js.erb callback file:

<% if remotipart_submitted? %>
   //this will be executed when a file is uploaded
   $("#div").html("<%= escape_javascript( render "form" ).gsub('&quot;', "'") %>");
<% else %>
   $("#div").html("<%= escape_javascript( render "form" ) %>");
<% end %>
   //Here you can put more js code

I've used an example code since you did't post your own. With this you don't need to downgrade your remotipart. Found this solution at https://github.com/JangoSteve/remotipart/issues/89 . Worked for me.

Answer 2

For me the only solution for this problem was to write custom form submission function, which sends Ajax request with form data. This is not the best solution because FormData is only supported by new browsers (IE10+).

Here is the coffescript:

formAjaxSubmit = ($form, $url) ->
  $formData = new FormData($form[0])

  $.ajax(
    type: 'POST'
    url: $url
    data: $formData
    dataType: 'JSON'
    processData: false
    contentType: false # this is crucial line for $.ajax to work with formData
    error: (xhr, status, error) ->
      $.fn.process_ajax_error(null, xhr, status, error)
    success: (data, status, xhr) ->
      $.fn.process_ajax_success(null, data, status, xhr)
  )
  return false

Arguments:

• $form - jQuery form object like $('#myForm')
• $url - sumbission url, usually it should has the form action value $('#myForm').attr('action')

$.fn.process_ajax_... - these are the custom response handling functions

Answer 3

Hope you have found the solution. putting data: {type: :script} in the form should work fine

Answer 4

This is what finally fixed the issue for me. also from here: https://github.com/JangoSteve/remotipart/issues/89

The previous similar suggestion with gsub was generating some invalid json/js for me. This solution below worked!

<% if remotipart_submitted? %>
 $('.form-wrapper').html("<%= j "#{render('form')}" %>");
<% else %>
 $('.form-wrapper').html("<%= j render('form') %>");
<% end %>