Форма AJAX отправляет внутри twitter bootstrap modal (Symfony2)

Question

После проверки каждого результата google и stackoverflow для этого я решил обратиться за помощью.

Я создаю приложение Symfony2. В каждом представлении моего приложения я включаю в себя твитерский модульный стиль, с формой, которая отправляет письмо с предложением/вопросом. Итак, из моего базового шаблона ветви, я включаю этот скрытый модальный.

Модальное показ/увольнение работает просто отлично. Модаль содержит мою форму, по желанию.

То, что я пытаюсь получить отсюда: AJAX отправить форму, отправить почту в контроллер, ответить на представление. С этим ответом будет json и функция успеха, чтобы изменить html модального на «* off_button *» + «Отправлено по электронной почте» ИЛИ «Возникла проблема».

Кажется довольно простым. Ну, после того, как большинство решений было найдено, я не могу предотвратить отправку формы. Поэтому я решил сделать это действительно просто.

Здесь код модальный:

<!-- Modal --> 
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
<div class="modal-header"> 
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
    <h3 id="myModalLabel">Send your suggestion</h3> 
</div> 
<div class="modal-body"> 
    {% if is_granted('ROLE_USER') %}<p>We will reply to {{ app.user.mail }}</p> 
    {% else%}<p>Don't forget to include a reply-to email in your suggestion.</p> 
    {% endif %} 
    <form action="{{ path("mgfbc_arrt") }}" method="post" id="arrt"> 
     <div class="control-group"> 
      <label for="username">Text:</label> 
      <div class="controls"> 
       <textarea id="mail" name="mail" rows="4" style="width:500px;"></textarea> 
      </div> 
     </div> 
     <div class="modal-footer"> 
      <input type="submit" id="butt" class="btn btn-success" value="Send"> 
     </div> 
    </form> 
</div> 

Причем, JS:

<script type="text/javascript"> 
$("#butt").on('click', function(e) { 
e.preventDefault(); 
}); 
</script> 

Перепробовав все, я достиг точки, в которой ЭТА Javascript не мешает форма от отправки.

Что я делаю неправильно?

Заранее спасибо.

Answer 1

Не используйте на функцию(), вместо того, чтобы использовать делегат, попробуйте следующее:

$("#arrt").delegate("#butt", "click", function(e){ 
    e.preventDefault();    
}); 

Answer 2

@gomman Проверьте следующую документацию: http://api.jquery.com/submit/ Я думаю, вам нужно отменить Submit-событие элемент формы, чтобы он работал так, как вы хотите.

@Fuser Хотя делегат() является более читаемым для меня, использование on() или delegate() будет делать то же самое для этого случая. Цитируя документацию jQuery «Начиная с jQuery 1.7, .delegate() был заменен методом .on(). Однако для более ранних версий он остается наиболее эффективным средством для использования делегирования событий».

Answer 3

попробовать это:

<form action="{{ path("mgfbc_arrt") }}" method="post" id="arrt"> 
    <div class="control-group"> 
     <label for="username">Text:</label> 
     <div class="controls"> 
      <textarea id="mail" name="mail" rows="4" style="width:500px;"></textarea> 
     </div> 
    </div> 
    <div class="modal-footer"> 
     <input type="submit" id="butt" class="btn btn-success" value="Send"> 
    </div> 
</form> 
<script type="text/javascript"> 
$("#arrt").submit(function(e) { 
    e.preventDefault(); 
}); 
</script>