jcrop雲端工作在鉻，但不是火狐或Safari瀏覽器

Question

我有一個使用cloudinary，carrierwave和jcrop的rails 4應用程序。上傳按鈕並在Chrome上提交作品（使用javascript狀態報告），但不在Firefox或Safari上提交。在Firefox的控制檯我得到Empty string passed to getElementById().其中指向elem = document.getElementById(match[2]);注意它有點奇怪有時後第二次或第三次嘗試（單擊提交併重複選擇圖像）它的工作原理。哦，請幫助我互聯網世界你我唯一的希望。

new.html.erb

<div id="dropzone"> 
<h1>Change Profile Photo.</h1> 
<div class="container"> 
    <div class="row"> 
    <div class="col-xs-12 col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2"> 
     <div id="direct_upload"> 
     <p>Select the upload button or drag and drop an image.</p> 
     <% if params[:dog_id] %> 
      <% url = master_dog_profile_pics_path %> 
     <% else %> 
      <% url = master_profile_pics_path %> 
     <% end %> 
      <%= form_for(@photo, :url => url, role: "form") do |f| %>   
      <div class="form_line form-group"> 
      <%= f.label :image, "Image:" %><br /> 
      <div class="upload_button_holder"> 
       <%= link_to "Upload", "#", class: "btn btn-primary upload_button form-control" %> 
       <%= f.cl_image_upload :image, class: "form-control" %> 
      </div> 
      <span class="status"></span> 
      </div> 

      <div class="form-group"> 
      <div class="form_control"> 
       <div class="preview"></div> 
      </div> 
      </div> 

      <%= f.hidden_field :crop_x %> 
      <%= f.hidden_field :crop_y %> 
      <%= f.hidden_field :crop_w %> 
      <%= f.hidden_field :crop_h %> 

      <div class="form-group"> 
      <div class=""> 
       <%= f.submit "Submit Photo", class: "btn btn-lg btn-success" %> 
       <% if @error %><span class="error"><%= @error %></span><% end %> 
      </div> 
      </div> 
      <%= f.hidden_field :bytes %> 
      <%= hidden_field_tag :direct, params[:direct] %> 
     <% end %> 
     </div> 

     <% if params[:photo_option] == "dog_photo" %> 
     <% link_to "Back to House", master_path(@master) %> 
     <% else %> 
     <a href="<%= edit_master_registration_path %>">Back to Master edit.</a> 
     <% end %> 
    </div> 
    </div> 
</div> 
</div> 

<!-- Configure Cloudinary jQuery plugin --> 
<%= cloudinary_js_config %> 

profile_pics.js.coffee

update = (c) -> 
    $('#profile_pic_crop_x').val(c.x) 
    $('#profile_pic_crop_y').val(c.y) 
    $('#profile_pic_crop_w').val(c.w) 
    $('#profile_pic_crop_h').val(c.h) 
$(document).ready -> 
    $(".cloudinary-fileupload").fileupload(
    dropZone: "#dropzone" 
    start: (e) -> 
     $(".status").text "Starting upload..." 

    progress: (e, data) -> 
     $(".status").text "Uploading... " + Math.round((data.loaded * 100.0)/data.total) + "%" 

    fail: (e, data) -> 
     $(".status").text "Upload failed" 
).off("cloudinarydone").on "cloudinarydone", (e, data) -> 
    $("#photo_bytes").val data.result.bytes 
    $(".status").text "" 
    $(".preview").html($.cloudinary.image(data.result.public_id, 
     format: data.result.format 
     width: 400 
     height: 400 
     crop: "limit" 
     id: "jcrop_target" 
    )).css height = "400" 
    $("#jcrop_target").Jcrop 
     aspectRatio: 1 
     setSelect: [100, 0, 200, 200] 
     onSelect: update 
     onChange: update 
    $(".previewpost").html($.cloudinary.image(data.result.public_id, 
     format: data.result.format 
     width: 400 
     height: 400 
     crop: "limit" 
     class: "img-responsive" 
    )).css height = "400" 

的application.js

//= require jquery 
//= require jquery_ujs 
//= require jquery.ui.all 
//= require bootstrap 
//= require turbolinks 
//= require cloudinary 
//= require jquery.Jcrop 
// require cloudinary/processing // Optional - client side processing (resizing and validation) 
//= require autocomplete-rails 
//= require_tree . 

的Gemfile

... 
gem "jquery-rails" 
gem 'jquery-ui-rails' 
gem "jcrop-rails-v2", "~> 0.9.12.3" 
... 

Answer 1

這是turbolinks的問題。我添加了jquery.turbolinks gem，並在javascript的開頭放入了document.ready。