2009-06-12 11 views
0

J'utilise le plugin Formulaire jQuery avec mon application Rails. J'ai une forme comme ceci:Comment utiliser jQuery Form Plugin avec Rails js.erb template?

<form action="/comments" id="comment_form" method="post"> 
    <textarea cols="60" id="comment_comment" name="comment[comment]" rows="3"></textarea> 
    <input id="comment_submit" name="commit" type="submit" value="Add comment" /> 
</form> 

Mon fichier application.js a: contrôleur

jQuery.ajaxSetup({ 
    'beforeSend': function(xhr) {xhr.setRequestHeader("Accept", "text/javascript")} 
}); 

$(document).ready(function(){ 
    $("#comment_form").ajaxForm(); 
}); 

Mes commentaires est comme ceci:

def create 
    @comment = Comment.new(params[:comment]) 

    respond_to do |wants| 
    if @comment.save 
     flash[:notice] = 'Added comment.' 
     wants.js 
    end 
    end 
end 

Et j'ai un code jquery dans/views/comments/create.js.erb comme:

$("#comment_form).hide(); 

et quelques autres choses.

Mon problème est que le code jQuery à l'intérieur de create.js.erb ne se produit jamais (c'est-à-dire que le formulaire n'est pas masqué). Si je l'utilise dans application.js à la place (merci à Railscast pour ce code)

jQuery.fn.submitWithAjax = function() { 
    this.submit(function() { 
    $.post(this.action, $(this).serialize(), null, "script"); 
    return false; 
    }) 
    return this; 
}; 

jQuery.ajaxSetup({ 
    'beforeSend': function(xhr) {xhr.setRequestHeader("Accept", "text/javascript")} 
}); 

$(document).ready(function(){ 
    $("#comment_form").submitWithAjax(); 
}); 

tout fonctionne très bien. Tout le code dans create.js.erb fonctionne très bien! Je préfère utiliser le plugin jQuery Form, mais je ne comprends pas comment faire fonctionner le code create.js.erb. Si faire quelque chose comme:

$("#comment_form").ajaxForm({success: function(){$("comment_form").hide()}}); 

puis que le code jQuery fonctionne. Mais j'ai besoin de lancer le template erb (parce que je fais des choses comme rendre un partial à l'intérieur).

Merci pour vos commentaires.

Répondre

1

Je l'ai compris. Tout en regardant ce screencast http://blog.edgecase.com/2009/6/15/ajax-file-uploads-made-easy-screencast - j'ai remarqué il ajouté dataType: 'script' Ainsi, au lieu de

$("#comment_form").ajaxForm(); 

je avais besoin

$("#comment_form").ajaxForm({dataType: 'script'}); 

Works! Et c'est juste là dans les docs jQuery Form - "si dataType == 'script' la réponse du serveur est évaluée dans le contexte global"

Questions connexes