Ajax Request using Rails and jQuery Problem

Question

Hi, I have a favourite and un-favourite functionality in my application and I am using jQuery. This functionality works partially. The page gets loaded, and when I click the 'favourite' button(it is inside add_favourite_div element), it sends a XHR request and the post is set as favourite. Then a new div called "remove_favourite_div" replaces its place.Now when I click the remove favourite(which is part of remove_favourite_div), it sends a normal http request inside of xhr.

The structure when the page gets loaded first time

<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 after clicking on the unfavourite button

<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>

In my application.js, I have two functions to trigger the xhr request

$("#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;
    });

Here, when the post is initially not a favourite, favourite button is displayed and when i clicked on the button, $("#add_favourite").submit gets called and unfavourite form is displayed correctly, but now when I click on the un-favourite button, $("#remove_favourite").submit does not get called.

The whole scenario is true in both ways, I mean favourite->Unfavourite and Unfavourite->favourite

Can someone please help me to solve this Thanks

Answer 1

I don't see the mechanism that actually causes "remove_favourite_div" to take the place of "add_favourite_div". If it's done dynamically, and after you've attached event handlers, then the problem is simply that your $("#remove_favourite").submit(function(){...}); happened before there was any such form on the page.

Attach those same event handlers after swapping out the divs and it should work fine.

Answer 2

It was because of the DOM reloading, I came to know about it in a number of resources. I am posting a few

• http://forum.jquery.com/topic/reload-dom-after-injecting-form-elements
• http://docs.jquery.com/Events/live
• http://docs.jquery.com/FAQ#Why_do_my_events_stop_working_after_an_AJAX_request.3F
• http://www.learningjquery.com/2008/05/working-with-events-part-2
• http://stackoverflow.com/questions/815074/jquery-doesnt-see-new-elements
• http://stackoverflow.com/questions/301473/rebinding-events-in-jquery-after-ajax-update-updatepanel

Hope it helps :)