Pourquoi mon RJS ne fonctionne plus lorsque je mets les options dans form_remote_for?

Question

Je suis confronté à un problème étrange.
Je veux simplement afficher une icône de chargement sur la page lorsque j'appuie sur un bouton.
Si mon appel à form_remote_for contient des options Ajax alors le script RJS ne fonctionne pas.

Cela fonctionne ("chargement" est caché par le contrôleur et RJS):

Vue:

<%=form_remote_for(:job, @job, {:url => {:action=>:create}}) do |f| %> 
[...] 
<div id="loading">Loading...</div> 

contrôleur :

def create 
    render :action => "create.js.rjs" 
end

RJS:

page.hide 'loading' 

Cela ne fonctionne pas (simple ajout :loading=> et le chargement est indiqué par la vue mais pas caché en arrière par le contrôleur comme avant):

<%=form_remote_for(:job, @job, {:url => {:action=>:create}}, {:loading=>"$('loading').show()"}) do |f| %> 
[...] 
<div id="loading" style="display:none;">Loading...</div> 

Donc, si mon appel à form_remote_for contient des options Ajax alors le script RJS ne fonctionne pas. Pourquoi?

Answer 1

Changer votre formulaire:

<% form_remote_for (:job, @job, :url => {:action => :create}, :loading =>"$('loading').show()") do |f| %> 
# ... 
<% end %> 

Assurez-vous que créer est:

# POST /jobs 
    # POST /jobs.xml 
    def create 
    render :action => "create.js.rjs" 
    end 

Et assurez-vous que votre create.js.rjs est:

page.hide 'loading' 

Ce scénario fonctionne pour moi. Comme vous l'aviez, il renvoyait l'erb dans le gabarit parce qu'il était posté sur "nouveau" - basé sur une implémentation d'échafaudage rapide que j'ai fait. Maintenant, je pourrais encore manquer quelque chose parce que, comme je l'ai dit avant le montage massif, je suis nouveau, mais cela devrait vous aider à démarrer.

EDIT: Supprimé "est-ce votre code?" poster.

Answer 2

Bien que ne répondant pas directement à votre question de "pourquoi" cela ne fonctionne pas, avez-vous regardé en utilisant le paramètre :loaded pour cacher le chargement DIV plutôt que de compter sur le fichier rjs?

Answer 3

En supposant que votre prototype à l'aide, vous devez utiliser les Ajax.Responders pour faire le show/cacher:

Ajax.Responders.register({ 
    onCreate: function() { 
    Ajax.activeRequestCount++; 
     if($('loading') && Ajax.activeRequestCount>0) { 
     Effect.Appear('loading',{duration:0.4,queue:'end'}); 
     };   
    }, 
    onComplete: function() { 
    Ajax.activeRequestCount--; 
     if($('loading') && Ajax.activeRequestCount==0) { 
     Effect.Fade('loading',{duration:0.4,queue:'end'}); 
     };  
    } 
}); 

Vous pouvez le coller dans public/JavaScripts/application.js

javascript Unobtrusive - œuvreront sur n'importe quelle page avec un chargement caché div et ajax événements.