2

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

在此处输入图像描述

当我使用表单中的第一个选项卡提交嵌入视频时，表单已成功处理为 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 处理。所以我认为问题与表单在选项卡中的设置方式无关。我认为这可能与我用来上传视频文件（carrierwave-video）的宝石有关，但我仍然不确定，所以如果有人能够阐明任何观点，将不胜感激！

4

2 回答 2

0

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

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

然后将表单作为 JS 处理。

于 2013-10-17T17:52:58.233 回答
0

When you click on the upload video does it cause a javascript error which 'kills' the javascript processing and causes the form to be submitted as HTML instead of JS?

于 2013-10-16T18:53:14.497 回答