cloudinary with jcrop working on chrome but not firefox or safari

Question

I have a rails 4 app using cloudinary, carrierwave and jcrop. the upload button and submit works (with javascript status report) on chrome but not on firefox or safari. in firefox console I get Empty string passed to getElementById(). which points to elem = document.getElementById( match[2] ); Note it's weird sometimes after the 2nd or third attempt (clicking submit and choosing image repeatedly) it works. Oh please help me internet world your my only hope.

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

It was a problem with turbolinks. I added the jquery.turbolinks gem and put in document.ready at the start of the javascript.