my application.js of mon_site rails-4.2.6 used

_form.haml

- if @photo.errors.any?
  #error_explanation
    %h2
      = pluralize(@photo.errors.count, "error")
      prohibited this photo from being saved:
    %ul
      - @photo.errors.full_messages.each do |message|
        %li= message
= simple_form_for(@photo) do |photo_form|
  .row
    .col-md-5
      = render partial: "form_photo", locals: { f: photo_form }
    .col-md-7.associations
      = render partial: "form_associations", locals: { f: photo_form }
  .row
    .field
      = photo_form.input :title
    .field
      .field= photo_form.cktext_area :description, :class => "ckeditor", :id => "description", :ckeditor => {:language => 'fr'}
  .actions
    - if @photo.id
      = photo_form.button :magic_submit, cancel: photo_path(@photo), id: 'actions'
    - else
      = photo_form.button :magic_submit, cancel: photos_path, id: 'actions'

_photo.haml

.photos_show
  %p
    %b{:style => "color: orange;"}= photo.title
  - if photo.photo
    = image_tag(photo.photo.thumb('x180').url, alt: photo.title, class: 'img-thumbnail', title: "#{photo.description.html_safe}")
    %br
    -if user_signed_in? && current_user.admin?
      .article_link= render partial: "articles/show/nested/photo_links", object: @article, locals: {photo: photo}

_photo_links.haml

= link_to 'Edition', edit_photo_article_path(@article, photo: photo), remote: true
= "|"
= link_to 'Supprimer', [@article, photo], method: :delete, data: { confirm: 'êtes vous sûre ?' }, remote: true

_photos.haml

- if (@article.photos.count != 0)
  - @article.photos.each do |photo|
    .photo{:id => "photo_#{photo.id}"}
      = render partial: "articles/show/nested/photo.haml", locals: {photo: photo}
  -if user_signed_in? && current_user.admin?
    .article_photos_link= render partial: "articles/show/nested/photos_links", object: @article

application.js

// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery2
//= require jquery.turbolinks
//= require jquery_ujs
//= require ckeditor/init
//= require jquery-ui
//= require jquery.remotipart
//= require bootstrap
//= require jstree
//= require blueimp/blueimp-gallery
//= require blueimp/jquery.blueimp-gallery
//= require cocoon
//= require the_comments

$(document).on('turbolinks:load page:update ready', function() {
  $('form[data-remote]').bind('ajax:beforeSend', function() {
    console.log("AJAX:BEFORE bind action has never worked like that"); });
  return $("#tabs").tabs();
});

$(document).on('ajax:beforeSend', 'form[data-remote]', function() {
  console.log("before actions i do something now... OK, currently working this way");  });

function readURL(input, selector) {
  var input_id = $(input).attr("id");
  var regex = /.*_(\d+)_.*/;
  var match = input_id.match(regex);
  var photo_id = "";
  if (match == null) {
    photo_id = selector;
  } else {
    photo_id = "photo_" + match[1];
    $(input).parent().next().attr("id", photo_id);
    photo_id = "#" + photo_id;
  }
  console.log(photo_id);
  if (input.files && input.files[0]) {
    var reader = new FileReader();
    reader.onload = function (e) {
      $(photo_id).attr('src',e.target.result)
                    .width(140)
                    .height(140);
    };
    reader.readAsDataURL(input.files[0]);
  }
}

edit.coffee

$("#dialog_edit").html '<%= j(render partial: "form", object: @photo) %>'
$(".actions").hide()
$('#dialog_edit').dialog(
  show:   'slide'
  hide:   'toggle'
  width:  800
  height: 800
  modal:  true
  title:  "Edition de l'article: <%= @photo.title %>"
  buttons: 
    "Annuler": ->
      $("#actions a").click()
      $('#dialog_edit').dialog 'close'
      return
    "Enregistrer": ->
      $("#actions").click()
      $('#dialog_edit').dialog 'close'
  ).prev().find('.ui-dialog-titlebar-close').hide()