Форма AJAX - возвращает сообщение об успехе / неудаче (несколько форм на странице)

Question

Я использую плагин формы jquery (http://jquery.malsup.com/form/), чтобы показать результаты отправленной формы на странице. Проблема, с которой я сталкиваюсь, заключается в том, что на каждой странице имеется несколько форм, и результаты отображаются в div для этой конкретной формы.

Вот код формы:

<form class="contest-rating-form" id="contest-rating-1" name="Contest" method="post" action="/">    
<input type="hidden" name="rating" value="1">
<input type="submit" name="submit" value="Vote"></p>
</form>
<div class="message"></div>

Обратите внимание на id = "Competition-Rating-1" - каждая форма на странице имеет уникальный #, поэтому могут быть id = "Contest-Rating-55" и ID = "Contest-Rating-100", и т. Д. .

Вот мой JS:

<script>
$(document).ready(function() { 
  var options = {
   target: '.message', 
   success: showResponse
  }; 
  $(".contest-rating-form").submit(function() { 
      $(this).ajaxSubmit(options); 
      return false; 
  }); 
}); 
function showResponse(responseText, statusText)  {}
</script>

.message обновляется ответом, но обновляется каждый экземпляр .message, а не только один для этой формы.

Спасибо за любую помощь в этом!

Отредактировано, чтобы добавить: я также мог бы добавить тот же # к .message, чтобы .message-1 совпадал с # Competition-Rating-1 и т. Д. Просто не уверен, как заставить это работать в JS динамически для каждой формы .

Answer 1

Этот метод может помочь вам ориентироваться и всегда удобен при реализации плагинов определенных типов для нескольких экземпляров.

/* loop over each form to insulate context in the $.each loop 
   and provide for index avaliablity*/

$(".contest-rating-form").each(function( index ){

        var $form=$(this);                              

        var options={       

            /* can now use indexing if wanted*/
           target: '#message_'+index, 

           /* or traverse within form*/        
           target : $form.find('.message'), 


           success: showResponse
        }; 

      $form.submit(function() { 
          $form.ajaxSubmit(options); 
          return false; 
      }); 

})

Answer 2

Не пробовал, но, вероятно, где-то есть ссылка на this, и если элемент .message находится внутри .contest-rating-form, возможно, что-то подобное будет работать:

$(document).ready(function() { 
  $(".contest-rating-form").submit(function() { 
      $(this).ajaxSubmit({ target: $('.message', this), success: showResponse });
      return false; 
  }); 
}); 
function showResponse(responseText, statusText)  {}

Это зависит от того, как написан плагин?

Если разметка отличается, вам придется взобраться на DOM, чтобы найти .message со ссылкой на .contest-rating-form. Попробуйте проверить сайт AjaxSubmit, чтобы узнать, как это сделать?

Answer 3

Предполагая, что ваш элемент сообщения всегда будет после элемента формы, вы можете изменить свой код следующим образом:

<script>
$(document).ready(function() { 
  var options = {
   success: showResponse
  }; 
  $(".contest-rating-form").submit(function() { 
      options.target = $(this).next(".message");
      $(this).ajaxSubmit(options); 
      return false; 
  }); 
}); 
function showResponse(responseText, statusText)  {}
</script>

Таким образом options.target всегда будет указывать на элемент сообщения ниже отправленной формы.

Answer 4

Если вы запускаете страницу как .php, вы можете динамически вставлять уникальные имена классов в div 'message'.