JQuery lie ajax: le succès ne fonctionne pas dans l'application rails 3 pour les éléments nouvellement créés (ajax)

** J'ai édité cette publication parce que j'ai trouvé que le problème réside vraiment dans l'incapacité des rails de se lier à la fonction ajax: succès.

*** Utilisation des rails 3.2.3

Merci d'avoir pris le temps de lire et d'essayer d'aider.

J'ajoute une simple fonction de fondu sur l'ajax: succès d'un élément en cours de suppression, comme suit:

$(document).ready( jQuery(function($) { $('.delete').bind('ajax:success', function() { $(this).closest('div').fadeOut(); }); })); #For some reason had to pass the $ into the function to get it to work, #not sure why this is necessary but doesn't work unless that is done. 

Après cela, je voulais créer un objet avec jQuery discret lorsque l'utilisateur ajoute quelque chose, et que j'ai aussi des boutons de suppression actifs sur ceux-ci. J'ai créé un fichier create.js.erb qui est appelé après la création d'un nouvel élément – et la création fonctionne bien, mais le bouton supprimer ne peut pas accéder à l'événement ajax: succès.

Il supprime les données du db en cliquant dessus, mais le .fadeOut n'est jamais lié à cela, donc il ne disparaît pas. Create.js.erb est le suivant:

 #$("div").append(html) here, then call the function below to try and bind the ajax:success function $('.delete').bind('ajax:complete', function() { $(this).closest('div').fadeOut(); }); 

Si je change cela pour lier à la fonction de clic, cela fonctionne, mais cela ne tient pas compte d'un appel ajax échoué:

 #$("div").append(html) here, then call the function below to try and bind the ajax:success function $('.delete').bind('click', function() { $(this).closest('div').fadeOut(); }); 

Il faut donc que quelque chose soit lié à la liaison avec l'ajax: le succès après la création de l'élément. Vous avez une idée de la raison pour laquelle cela pourrait se produire? Dois-je faire quelque chose de spécial dans les rails pour obtenir l'élément nouvellement rendu pour reconnaître les événements ajax? Toute direction serait très appréciée!

PS Le contrôleur pour la méthode de suppression est ci-dessous si quelqu'un pourrait détecter un problème là-bas:

 def destroy @user = User.find(params[:user_id]) @item = @user.item.find(params[:id]) @item.destroy respond_to do |format| format.html { redirect_to user_path(@user) } format.json { head :no_content } format.js { render :nothing => true } end end 

Le problème ressemble à la liaison qui se produit avant que l'élément ne soit généré. Essaye ça:

 $(document).on('ajax:success', '.delete', function(e) { $(e.currentTarget).closest('div').fadeOut(); }); 

J'ai eu le même problème, car ma méthode de gestion de formulaire a renvoyé une chaîne simple. Assurez-vous de rendre quelque chose que jQuery peut traiter:

 def handle_form ... render :json => {:what => 'ever'} # or render :nothing => true end 

J'ai récemment fait des choses similaires en utilisant Rails 3.2.3. J'utilise aussi

 $('#dialog-form').bind('ajax:success', function() { }) 

Et ça marche bien …

Bien qu'il s'agisse d'une ancienne question, j'ai une réponse mise à jour pour ce qui semble être le même problème.

À partir de la version 1.9, jQuery ne considérera plus un repsonse vide (ne rend rien: vrai) pour être un succès / fait. Cela signifie que dans votre contrôleur, vous devriez renvoyer un objet JSON vide à la place.

respond_to do |format| format.json { render: {}.to_json } end

Vérifiez si vous obtenez une erreur d'analyse (ou similaire) en attrapant ajax:completed . Vérifiez l'argument d' status là-bas. Dans mon cas, c'était un parseerror raison d'une incompatibilité de parseerror .

Vous pouvez également définir un point d'arrêt dans jquery_ujs.js .

Voir aussi cette question jQuery ajax demande de ne pas déclencher une réponse JS

Pour moi, c'est parce que nous utilisons Slim, et les modèles sont 'name.slim'. Si nous les modifions à 'name.slim.html', l'ajax: succès se déclenche correctement.

La solution que j'utilise est d'ajouter le format à la déclaration de rendu dans le contrôleur.

Nous avons donc quelque chose comme ça:

 render :new, layout: false, formats: [:html] 

Même si c'est une vieille question, aucune des réponses m'a vraiment aidé car j'avais une boîte de dialogue de confirmation personnalisée et l'ajax: le succès déclenchait un élément totalement différent.

Afin de trouver quel élément est trigered par votre ajax dans ce cas, vous pouvez d'abord utiliser le code:

 $(document).on('ajax:success', 'a', function(evt, data, status, xhr) { $( ".log" ).text( "Triggered ajaxComplete handler." ); // Check what is the value of $(this), and you will see what button has triggered the ajax success action, and you can start from there });