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.

I'm guessing there's something in the coffeescript below that firefox and safari doesn't like?

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"

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.

I'm guessing there's something in the coffeescript below that firefox and safari doesn't like?

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"

• javascript
• jquery
• ruby-on-rails
• firefox
• safari

2 Answers 2

In my case it was a problem with empty for="" attribute. If you have something like this on your page you should get rid of empty attributes in order to fight this warning:

<label class="myLabel" for="">Name:</label>

==>

<label class="myLabel">Name:</label>

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