JavaScript / Logica parziale per un file manager

Question

Fondamentalmente sto cercando di creare un file manager per la mia app rail simile a come funziona la sezione "Media" di Wordpress. Attualmente ho un modello chiamato Asset che è dove gli utenti vanno a caricare varie immagini. In vari altri modelli ho un campo per le immagini che è solo un campo di testo. Spero che quando un utente fa clic sul campo di testo, aprirà un 'Gestore Asset' in una finestra modale con tutte le immagini contenute all'interno di Asset che mostra. Quando un utente fa clic su una delle immagini, dovrebbe chiudere il Modal e popolare il campo di testo con l'URL dell'immagine selezionata.

Ho un modello chiamato Events che contiene un campo di testo di cui stavo parlando. Nell'azione new rispondo a JS, in cui carico un parziale che contiene tutte le risorse in una finestra modale, proprio come se lo aspetterei. Il mio unico problema è che lo sto facendo tramite una chiamata $.getScript e non posso chiamare alcun ulteriore JavaScript per caricare l'URL dell'immagine nel campo del testo, suppongo che sia perché gli oggetti non esistono ancora. Comunque, sul codice:

Controller

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'));
});

.

Qualsiasi idea sarebbe molto apprezzata, specialmente se qualcuno sa di un modo migliore per farlo. : -)

Answer 1

Sembra che tu possa essere vincolante l'evento Click agli elementi .ACONTAINER IMG DOM che non esistono al momento, dal momento che li recupera quando fai clic .image-field.

In generale, è necessario utilizzare jquery.on e legando i tuoi eventi alla radice del documento. Questa è chiamata delegazione. Quando fai clic su un collegamento, l'evento è in bolle e premette il nodo del documento e gestirà l'evento. In questo modo, mentre aggiungi elementi DOM tramite Ajax o direttamente nel DOM, riceveranno comunque il gestore di eventi che hai intenzione.

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

.

Tuttavia, qui c'è un problema più grande. Sembra che tu abbia più elementi di campo .image-field sulla pagina. Quello che potrebbe essere necessario fare nel tuo handler .image-field è restituito HTML piuttosto che JS, in modo da poter associare un evento all'elemento root dell'HTML di nuova aggiunta. Quel blocco identificherà il campo di ingresso specifico, il cui valore può impostare una volta eseguita un'immagine.

$(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 finale, potresti prendere in considerazione l'utilizzo di un controller riposante per le tue risorse. Potresti non voler recuperare una risorsa (un asset) da un controller denominato EventsController, in particolare utilizzando l'azione Modifica. Volete ottenere AssetsController :: Index per restituire un elenco di beni.

Answer 2

Nulla sta accadendo quando si fa clic sulle immagini perché la query iniziale per ".acontainer img" non restituisce elementi, e quindi il gestore di eventi non è collegato a nulla.Non sono ancora stati caricati.

Potresti voler provare il metodo live di JQuery .Allega i gestori agli elementi presenti a pagina Carico e Elementi in seguito aggiunto al DOM.

---

.

Aggiornamento: Come sottolinea @aceofSpades, live è deprecato in jQuery 1.7.Usa on invece.