Ventanas modales Jquery y edición de objetos - LPC-Ltda/Ruby-on-Rails GitHub Wiki

Suponiendo que usted usa Jquery, la instalación es bastante sencilla:

# add the following to your Gemfile under `group :development`
gem 'jquery-rails'

# run the following
$ bundle

# then let the generator install
$ rails g jquery:install

y luego actualiza en si applicaction.rb el default de la expansión javascript

# JavaScript files you want as :defaults (application.js is always included).
config.action_view.javascript_expansions[:defaults] = %w( jquery rails )

Para su modal, hay un montón de opiniones sobre la forma de hacerlo. Personalmente prefiero rodar mis propias ventanas modales en base a las necesidades de la aplicación. Es sólo una pocas líneas de JS atados-para jQuery para construir modales que funcionan muy bien con Rails.js:

# in a view, perhaps a _modal.html.erb partial that is included into 
# your layout (probably at the bottom).
<div id="modal-container"></div>
<div id="modal">
  <a href="#" class="close">close</a>
</div>

Éstos son algunos de los estilos (scss) para el modal que uso:

#modal-container {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0,0,0,0.4);
}

#modal {
  display: none;
  position: absolute;
  width: 600px;
  left: 50%;
  margin-left: (-600px - 40px) / 2;
  padding: 20px;
  background: #fff;
  border: 5px solid #eee;

  & > .close {
    position: absolute;
    right: 5px;
    top: 5px;
    color: #666;
    &:hover, &:active {
      color: #000;
    }
  }
}

Eso pone los estilos/vistas fuera del camino. Es posible que desee personalizar los estilos para adaptarse mejor a su aplicación, pero son bastante genéricos por lo que deben funcionar para comenzar.

Para integrarlo con Rails, hay 2 partes. En primer lugar, usted necesita tomar el navegador para enviar requerimientos AJAX del contenido y mostar el modal a cambio. En segundo lugar, usted necesita que Rails responda con una respuesta adecuada.

Enviar AJAX y manejar la respuesta requiere el uso de :remote=>true en el link/form que usted desea enviar remotamente.

<%= link_to 'New Post', new_post_path, :remote => true %>

Eso creará un atributo de datos en el enlace que Rails.js recogerá, lo que le permite ser presentado de forma remota automáticamente. Se espera un retorno javascript, y que a ejecutar esa respuesta cuando se obtenga. Usted puede agregar rápidamente format.js a cada bloque de acciones respond_to, y crear un archivo new.js.erb adjunto que contiene el código JS necesario para llenar y mostrar el modal. Eso está bien, pero podemos usar DRY un poco más que eso al devolver la plantilla sin un diseño y dejar la responsabilidad de mostrar/ocultar el modal / en application.js:

# in your app controller, you'll want to set the layout to nil for XHR (ajax) requests
class ApplicationController < ActionController::Base
  layout Proc.new { |controller| controller.request.xhr? ? nil : 'application' }
end

El javascript para hacer todo el trabajo:

# in application.js
$(function(){
  var $modal = $('#modal'),
      $modal_close = $modal.find('.close'),
      $modal_container = $('#modal-container');

  # This bit can be confusing. Since Rails.js sends an accept header asking for
  # javascript, but we want it to return HTML, we need to override this instead.
  $('a[data-remote]').live('ajax:beforeSend', function(e, xhr, settings){
    xhr.setRequestHeader('accept', '*/*;q=0.5, text/html, ' + settings.accepts.html);
  });

  # Handle modal links with the data-remote attribute
  $('a[data-remote]').live('ajax:success', function(xhr, data, status){
    $modal
      .html(data)
      .prepend($modal_close)
      .css('top', $(window).scrollTop() + 40)
      .show();
    $modal_container.show();
  });

  # Hide close button click
  $('.close', '#modal').live('click', function(){
    $modal_container.hide();
    $modal.hide();
    return false;
  });
});

Tiene algo de lógica posicionar la ventana modal 40px desde la posición actual del scroll del broeser.

Con todas las piezas en su lugar, cuando clickea sobre un link/form con un conjunto de atributos remoto, Rails.js se encargará de la presentación de la solicitud, su aplicación sabrá retornar sólo el template para la acción sin el layout, perfecto para mostrar una ventana modal, y luego nuestro javascript arriba se enganchará en la devolución ajax:success desde Rails.js y mostrar el modal con la plantilla HTML desde nuestra aplicación.

Hay más de una manera de pelar un gato, y más de una docena de maneras de construir esta funcionalidad. Esto es definitivamente un área que las convenciones más fuertes aún no se han establecido por el equipo de Rails. Esto es simplemente mi forma de manejar esto que yo siento es bastante DRY, requiere un mínimo esfuerzo, y es bastante flexible y actualizable. Quizás una de las áreas que alguien probablemente podría construir sobre esto es utilizar un framework modal/lightbox que cubra más bases y sea más rico en funciones. Y si alguien hace eso, me encantaría verlo como lo escribe!

⚠️ **GitHub.com Fallback** ⚠️