Inserimento modulo dati-remoto tramite JavaScript in un'applicazione Rails, non UJS cattura remota

Ho una forma semplice che viene aggiunto ad un contenitore:Inserimento modulo dati-remoto tramite JavaScript in un'applicazione Rails, non UJS cattura remota

<form action="/something" data-remote="true" method="post"> 
    <input type="submit" /> 
</form>

La mia comprensione è che rails_ujs.js cattura tutto Invia eventi, in modo da Non avrei bisogno di ricollegare gli eventi quando si inseriscono nuovi moduli. Tuttavia, questo modulo non viene prelevato come modulo remoto. Anche quando inserisco un debugger in rails_ujs.js nell'evento di invio generale, questo modulo non attiva quell'evento. Tutti i moduli resi sul lato server non provocano alcun problema.

Mi sono perso qualcosa sul dover allegare un evento a un modulo inserito in modo dinamico?

fonte

2013-05-17 bcardarella

Non sono sicuro di come rails_ujs.js funzioni, ma penso che i tuoi problemi dipendano dal fatto che il contenuto HTML che aggiungi sul lato client non risponde agli eventi che sono già stati associati. La soluzione è che, ogni volta che aggiungi un nuovo elemento HTML sul lato client, devi associare qualsiasi evento ad esso.

consideri il seguente esempio:

<html> 
<head> 
    <title>My Page</title> 
    <script src="jquery.js"></script> 
</head> 
<body> 
    <div id="content"> 
     <a href="#" class="link">Click me</a> 
    </div> 
    <a href="#" class="add_link">Add link</a> 
    <script type="text/javascript"> 
    $(document).ready(function(){ 
     $('.link').click(function(){ 
      alert('Click me'); 
     }); 

     $('.add_link').click(function(){ 
      $("#content").append("<a href='#' class='link'>Click me no alert...</a>"); 
     }); 
    }); 
    </script> 
</body> 
</html>

Quando si fa clic su 'Aggiungi link' collegarlo aggiungerà un link che dice click me e che ha 'link' la classe. Tuttavia, se si fa clic su questo collegamento, non verrà visualizzato un avviso, ovvero l'evento click-evento non viene attivato, viene attivato solo per i contenuti generati sul lato server.

La soluzione è descritta in modo più dettagliato in questa domanda: In jQuery, how to attach events to dynamic html elements?

Tuttavia non sono sicuro di come applicare a rails_ujs, probabilmente hanno a che fare alcune modifiche lì.

fonte

2013-05-17 16:30:56

rails_ujs utilizza la delega del documento, non le associazioni a carico di elementi specifici, quindi dovrebbe prelevare il modulo.

Potrebbe non esserci nessun campo auth_token nascosto nel modulo e quindi l'inserimento del token csrf non riesce? Oppure va al server e quindi fallisce un controllo di autenticità?

E poi, la domanda stupida: sei sicuro che la tua versione debuggata di rails_ujs sia presente nella pagina? Rails_ujs è caricato? console.log($.rails) da verificare.

fonte

2013-05-17 16:52:23

Questo è quello che ho pensato, il che rende davvero frustrante capire. Il mio codice attuale sta iniettando il token csrf e impostando il modulo per utf-8. – bcardarella

Dopo aver iniettato il per, è necessario collegare l'evento al DOM utilizzando jQuery live & handleRemote() evento delle rails_ujs alla forma presentare

$(function(){ 
    $("body") 
     .live('ajax:complete', function(){ 
      $("form[data-remote]").live('submit', function(e){ 
        $.rails.handleRemote($("form[data-remote]")); 
        e.preventDefault(); 
      }); 
     }); 
});

Attualmente, questo sembra per tutte le forme nella pagina, potrebbe voler renderlo più specifico per migliorare le prestazioni.

PS: se si utilizza l'ultima versione di jQuery (jQuery 1.7 o successiva), è possibile sapere che nelle versioni recenti di jQuery, live() è stato dichiarato obsoleto a favore di on(). ecco una bella spiegazione di on() vs live()

fonte

2013-05-17 17:13:16 CuriousMind

Si suppone che sia necessario? https: // GitHub.com/rails/jquery-ujs/blob/master/src/rails.js # L326 mostra che rails_ujs sta usando la delega degli eventi sul documento che dovrebbe catturare tutti gli eventi di invio – bcardarella

^^^ Non dovrebbe essere necessario ma hey, al momento non funziona . quindi provalo, potrebbe non funzionare. Ma non c'è nulla di male nel provare. In caso contrario, non funziona postback con un'app campione su github che riproduce questo problema, quindi possiamo aiutare ulteriormente :) – CuriousMind

Buon punto :) Proverò a ricreare – bcardarella

Si scopre che stavo rendendo un modulo all'interno di un modulo e che stava causando il problema. Sono un idiota: p

fonte

2013-05-17 18:47:06 bcardarella

Impressionante, ero anche un idiota :) – Nycen

Fantastico, anche a me. :) – Bang

Inserimento modulo dati-remoto tramite JavaScript in un'applicazione Rails, non UJS cattura remota

risposta

Problemi correlati