Question

在我的Rails应用程序中，我有一个应该通过ajax提交的表单（remote设置为true）。该表单允许用户添加嵌入视频或将视频文件上传到应用程序。我通过在模态中使用引导选项卡创建了表单。

enter image description here

当我使用表单中的第一个标签提交嵌入视频时，表单已成功处理为JS。但是，当我尝试使用表单中的第二个标签上传视频时，表单会被错误地处理为HTML。

如何确保表单始终以JS格式处理？

查看：

<%= semantic_form_for Video.new,
    :html => {:id => "videoEmbedModal", :class => "modal hide fade embedModal"}, 
    :remote => true do |video_form| %>

    <%= video_form.input :project_id, :as => :hidden, :label => false, :input_html => {:value => @project.id} %>
       <% if @step.new_record? %>
           <%= video_form.input :step_id, :as => :hidden, :label => false, :input_html => {:value => -1} %>
           <%= video_form.input :saved, :as => :hidden, :label => false, :input_html => {:value => false} %>
       <% else %>
           <%= video_form.input :step_id, :as => :hidden, :label => false, :input_html => {:value => @step.id} %>
           <%= video_form.input :saved, :as => :hidden, :label => false, :input_html => {:value => true} %>
       <% end %>

  <div class="modal-header">
    <h3>Add a Video</h3>
  </div>

<div class="modal-body">

  <div class="tabbable">
    <ul class="nav nav-tabs" id="add_video_tabs">
      <li class="active">
        <a href="#embed_video">Embed Video</a>
      </li>
      <li>
        <a href="#upload_video">Upload Video</a>
      </li>

    </ul>

    <div class="tab-content" style="margin-top: 10px;">
      <% # add embedded video tab %>
      <div class="tab-pane active" id="embed_video">
        <%= video_form.label "Video URL", :class=> "label" %><span style="font-size:smaller; color: #7E7E7E; margin-left:10px">We currently support Youtube and Vimeo</span>
        <%= video_form.text_area :embed_url, 
            :placeholder => "Example: http://www.youtube.com/watch?v=bVj85o5hA_Q", :rows=>"2", :cols=>"50" %>

      <div class="supportedVideo">
        <i class="icon-youtube" style="font-size: 25px"></i> <%= image_tag "icons/Vimeo.png", :class=>"vimeo_icon" %><br>
      </div>

      <div class="embedPreview">
        <h3>Video Preview</h3>
      </div>
    </div>


    <% # upload video tab %>
    <div class="tab-pane" id="upload_video">
      <div class="supported-video-files">
        We support .mp4, .mov, and .avi video files.
      </div>
      <div id="uploadVideoField">
        <%= video_form.file_field :video_path, :class=>"video_file_upload_field", :onchange=> "return validateFileExtension(this)" %>
      </div>
      <div class="btn btn-warning btn-small" style="margin-top:10px; display:none;">Remove</div>
      <br>
    </div>


  </div>
</div>
</div>

<div class="modal-footer">
  <%= video_form.actions do %>
  <%= video_form.action :cancel, :label => "Close", :as => :link,
  :button_html => {:class => "btn modal_close_btn", :href => "#", 
  :data => {:target => "#videoEmbedModal", :toggle => "modal"}} %>

  <%= video_form.action :submit, :label => "Save", :as => :button,
  :button_html => {:class => "btn btn-primary", :id => "video_submit", :disable_with => "Saving..."}, :disable_with => "Saving..." %>
  <% end %>
  <div class="loadingIcon"></div>
</div>

<% end %>

记录添加嵌入视频的消息：

Started POST "/videos" for 127.0.0.1 at 2013-10-16 13:52:51 -0400
Processing by VideosController#create as JS
  Parameters: {"utf8"=>"✓", "authenticity_token"=>"YuHlkYWPJK7oAkKXoLAebUQLGWuTrX/RMabOzLfITkM=", "video"=>{"project_id"=>"13", "step_id"=>"-1", "saved"=>"false", "embed_url"=>"http://vimeo.com/73388765"}, "button"=>""}
![][2]

记录添加已上传视频的消息：

Running transcoding...
ffmpeg -y -i /public/uploads/tmp/1381945989-16853-6328/Untitled.mov -vcodec libx264 -acodec libfaac -s 640x360  -qscale 0 -preset slow -g 30 -aspect 1.7777777777777777 /public/uploads/tmp/1381945989-16853-6328/tmpfile.mp4

Transcoding of /public/uploads/tmp/1381945989-16853-6328/Untitled.mov to /public/uploads/tmp/1381945989-16853-6328/tmpfile.mp4 succeeded



Started POST "/videos" for 127.0.0.1 at 2013-10-16 13:53:09 -0400
**Processing by VideosController#create as HTML**
  Parameters: {"utf8"=>"✓", "authenticity_token"=>"YuHlkYWPJK7oAkKXoLAebUQLGWuTrX/RMabOzLfITkM=", "video"=>{"project_id"=>"13", "step_id"=>"-1", "saved"=>"false", "embed_url"=>"", "video_path"=>#<ActionDispatch::Http::UploadedFile:0x007f8a11393cd8 @original_filename="Untitled.mov", @content_type="video/quicktime", @headers="Content-Disposition: form-data; name=\"video[video_path]\"; filename=\"Untitled.mov\"\r\nContent-Type: video/quicktime\r\n", @tempfile=#<File:/var/folders/dc/c0nfvwy96lq7p4ll94mklnmr0000gp/T/RackMultipart20131016-16853-qmwjfn>>}, "button"=>""}

修改我完全删除了嵌入式视频标签，只是尝试使用文件字段提交视频，它仍然以HTML格式处理。所以我已经发现问题与选项卡中表单的设置方式没有关系。我认为这可能与我用来上传视频文件（载波视频）的Gem有关，但我仍然不确定，所以如果有人能够放弃任何光线，我将不胜感激！

Answer 1

当你点击上传视频时，是否会导致javascript错误“杀死”javascript处理并导致表单以HTML而不是JS的形式提交？

Answer 2

在使用提交按钮时，我无法将表单作为JS处理，但我最终使用jquery文件上传，一旦用户选择文件，就自动将表单作为JS处理。我这样做了

$('#videoEmbedModal').fileupload();

然后将表单处理为JS。

Rails表示处理为HTML而不是JS

2 个答案: