javascript / parcial lógica para un administrador de archivos

Question

Estoy básicamente tratando de crear un Gestor de Archivos para mi aplicación rails similar a cómo WordPress de la 'Media' de la sección de funciones.Actualmente tengo un modelo llamado Asset que es donde los usuarios van a subir varias imágenes.En varios otros modelos que tengo un campo para las imágenes, que es sólo un campo de texto.Tengo la esperanza de que cuando un usuario hace clic en el campo de texto, se abrirá un "asset manager' en una ventana modal con todas las imágenes contenidas en Asset mostrando.Cuando un usuario hace clic en una de las imágenes, se debe cerrar el modal y rellenar el campo de texto con la URL de la imagen seleccionada.

Tengo un modelo llamado Events que contiene un campo de texto que me estaba hablando.En el new la acción que responden a js, en el que me carga un parcial que contiene todos los activos en una ventana modal, como yo había esperado.Mi único problema es que estoy haciendo esto a través de un $.getScript llame y no puedo llamar a cualquiera de javascript adicional para cargar la url de la imagen de nuevo en el campo de texto, supongo que es porque los objetos no existen todavía.De todos modos, en el código:

controlador de

def new
  @event = Event.new
  @asset = Asset.all
end
respond_to do |f|
  f.html
  f.js
end

new.js

$('.acontainer').html('<%= render @asset %>');

page.js

//when a user clicks the image field, show the asset partial
$('.image-field').click(function() {
    $.getScript('edit.js');
});

// when a user clicks an image, add it's src to the image field <-- does nothing
$('.actonainer img').click(function() {
    $('.image-field').val($(this).attr('src'));
});

Cualquier idea será muy apreciada, especialmente si alguien sabe de una mejor manera de hacer esto.:-)

Answer 1

Parece que se puede enlazar el evento click para el .acontainer img DOM elementos que no existen en el tiempo, ya que se recuperan cuando se haga clic en .imagen de campo.

En general, usted debe utilizar jQuery.en y enlazar tus eventos a la raíz del documento.Esto se llama la delegación.Cuando usted haga clic en un enlace, el evento de la burbuja y golpear el nodo de documento, y se controlará el evento.De esta manera, a medida que agrega elementos de DOM a través de ajax o directamente en el DOM, ellos aún obtener el controlador de eventos que pretende.

$(function() {
  $(document).on('click', '.acontainer img', function(event) {
    $('.image-field').val($(this).attr('src'));
  })
});

Sin embargo, hay un problema más grande aquí.Suena como que usted tiene varios .imagen de campo de los elementos en la página.Lo que usted necesita hacer en su .imagen de campo controlador es el retorno de HTML en lugar de js, así que usted puede enlazar un evento para el elemento raíz de la recién agregado HTML.Ese bloque se identifican los específicos del campo de entrada, cuyo valor se puede establecer una vez que una imagen se hace clic.

$(function() {
    $(document).on('click', '.image-field',
    function(event) {
        var field = $(this);
        $.ajax('/edit', {
            success: function(data, textStatus, jqXHR) {
                var blah = $(Dialog.new(data));
                // Create a modal and return its root DOM element
                blah.on('click', 'img',
                function(event) {
                    field.val($(this).attr('src'));
                });
            }
        })
    });
});

Una nota final, usted puede ser que desee considerar el uso de un controlador de Descanso para sus Activos.Puede que usted no quiera para ir a buscar uno de los recursos (Activo) de un controlador llamado EventsController, especialmente mediante la acción de edición.Desea OBTENER AssetsController::índice para devolver una lista de activos.

Answer 2

Nada de lo que está sucediendo cuando usted haga clic en las imágenes debido a que la consulta inicial para ".acontainer img" no devolución de los elementos, y por lo que el controlador de eventos no está apegado a nada.No se han cargado todavía.

Puede que desee probar jQuery live método.Se une a los controladores de los elementos presentes en la carga de la página y elementos añadidos más tarde a la DOM.

---

Actualización: Como @aceofspades señala, live está en desuso en jQuery 1.7.Uso on en su lugar.