2010-06-03 4 views
0

J'ai une fonctionnalité préférée et non-favorite dans mon application et j'utilise jQuery. Cette fonctionnalité fonctionne partiellement. La page est chargée, et quand je clique sur le bouton 'favori' (il est à l'intérieur de l'élément add_favourite_div), il envoie une requête XHR et le post est défini comme favori. Puis une nouvelle div appelée "remove_favourite_div" remplace sa place. Maintenant, quand je clique sur le favori de suppression (qui fait partie de remove_favourite_div), il envoie une requête http normale à l'intérieur de xhr.Ajax Demande utilisant Rails et jQuery Problème

La structure lorsque la page est chargée première fois

<div id="favourite">   
    <div id="add_favourite_div"> 
    <form method="post" id="add_favourite" action="/viewpost/add_favourite"> 
     <div style="margin: 0pt; padding: 0pt; display: inline;"> 
      <input type="hidden" 
      value="w873BgYHLxQmadUalzMRUC+1ql4AtP3U7f78dT8x9ho=" 
      name="authenticity_token"> 
     </div> 
     <input type="hidden" value="3" name="Favourite[post_id]" 
     id="Favourite_place_id"> 
     <input type="hidden" value="2" name="Favourite[user_id]" id="Favourite_user_id"> 
     <input type="submit" value="Favourite" name="commit"><br> 
     </form> 
    </div> 
</div> 

DOM après avoir cliqué sur le bouton sur unfavourite

<div id="favourite"> 
    <div id="remove_favourite_div"> 
    <form method="post" id="remove_favourite" action="/viewpost/remove_favourite"> 
     <div style="margin: 0pt; padding: 0pt; display: inline;"> 
      <input type="hidden" value="w873BgYHLxQmadUalzMRUC+1ql4AtP3U7f78dT8x9ho=" 
      name="authenticity_token"> 
     </div> 
     <input type="hidden" value="3" name="Favourite[post_id]" id="Favourite_place_id"> 
     <input type="hidden" value="2" name="Favourite[user_id]" id="Favourite_user_id"> 
     <input type="submit" value="UnFavourite" name="commit"><br> 
    </form> 
    </div> 
</div> 

Dans mes application.js, j'ai deux fonctions pour déclencher la requête XHR

$("#add_favourite").submit(function(){ 
     alert("add favourite"); 
     action = $(this).attr("action") 
     $.post(action,$(this).serialize(),null,"script"); 
     return false; 
    }); 

$("#remove_favourite").submit(function(){ 
     alert("remove favourite"); 
     action = $(this).attr("action"); 
     $.post(action,$(this).serialize(),null,"script"); 
     return false; 
    }); 

Ici, quand le poste n'est pas un favori, coup de coeur préféré on est affiché et quand j'ai cliqué sur le bouton, $ ("# add_favourite"). submit est appelé et le formulaire défavorable est affiché correctement, mais maintenant quand je clique sur le bouton non-favori, $ ("# remove_favourite"). ne s'appelle pas.

L'ensemble du scénario est vrai dans les deux sens, je veux dire favourite-> Unfavourite et Unfavourite-> favori

Quelqu'un peut-il me s'il vous plaît aider à résoudre ce Merci

Répondre

0
0

Je ne vois pas le mécanisme qui En fait, "remove_favourite_div" remplace "add_favourite_div". Si c'est fait dynamiquement, et après que vous avez attaché des gestionnaires d'événements, alors le problème est simplement que votre $("#remove_favourite").submit(function(){...}); s'est passé avant qu'il n'y ait un tel formulaire sur la page.

Attachez ces mêmes gestionnaires d'événements après avoir échangé le div s et cela devrait fonctionner correctement.