Ajax-запрос с использованием Rails и JQuery - PullRequest
0 голосов
/ 03 июня 2010

У меня есть любимые и не любимые функции в моем приложении, и я использую jQuery. Эта функциональность работает частично. Страница загружается, и когда я нажимаю кнопку «Избранное» (она находится внутри элемента add_favourite_div), она отправляет XHR-запрос, и сообщение становится избранным. Затем новый div с именем «remove_favourite_div» заменяет его место. Теперь, когда я нажимаю на кнопку «Удалить избранное» (которая является частью remove_favourite_div), он отправляет обычный запрос http внутри xhr.

Структура при первой загрузке страницы

<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 после нажатия на кнопку «Избранный»

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

В моем application.js у меня есть две функции для запуска запроса 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;
    });

Здесь, когда сообщение изначально не является избранным, отображается кнопка «Избранное», а когда я нажимаю на кнопку, вызывается $ ("# add_favourite"). Submit, а неверная форма отображается правильно, но теперь, когда я нажимаю на кнопку нежелательная кнопка $ ("# remove_favourite"). submit не вызывается.

Весь сценарий верен в обоих направлениях, я имею в виду фаворит-> не любимый и не любимый-> любимый

Может кто-нибудь, пожалуйста, помогите мне решить эту проблему Спасибо

Ответы [ 2 ]

0 голосов
0 голосов
/ 03 июня 2010

Я не вижу механизма, который фактически заставляет «remove_favourite_div» заменить «add_favourite_div». Если это делается динамически, и после того, как вы подключили обработчики событий, проблема заключается в том, что ваш $("#remove_favourite").submit(function(){...}); произошел до того, как на странице появилась такая форма.

Подключите те же обработчики событий после замены div s, и все должно работать нормально.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...