Ajax-вызов из формы, отображаемой как Ajax-ответ (jQuery + Grails: объединение запросов Ajax)

Question

Я ожидал нижеприведенного сценария, но не смог найти много помощи в Интернете. У меня есть форма, загруженная через Ajax (скажем, создать форму сущности). Загружается через событие нажатия кнопки (загрузка)

$("#bt-create").click(function(){
                     $ ('#pid').load('/controller/vehicleModel/create3');
                    return false;
                    });

ответ (форма) записывается в элемент pid. Имя и идентификатор формы - это ajax-форма, а событие отправки прикреплено к почтовому запросу ajax

$(function() {
             $("#ajax-form").submit(function(){
                // do something...
                 var url = "/app/controller/save"
         $.post(url, $(this).serialize(), function(data) {
            alert( data ) ; /// alert data from server
          });

Я мог бы выполнять вышеупомянутые операции AJAX индивидуально. То есть операция ajax post завершается успешно, если она вызывает статический html-файл. Но если я соединю запросы (после завершения первого), чтобы они вызывались из формы вывода, сгенерированной первым запросом, ничего не происходит. Я мог видеть, что метод post вызывается через firebug. Есть ли лучший способ справиться с потоком выше?

Еще одна интересная вещь, которую я заметил. Как вы могли видеть, я использую Grails в качестве моей платформы. Если я сохраню javascripts в main.gsp (основной макет), событие submit не будет зарегистрировано, так как точка останова не попадет в firebug. Но если я определю javascript в файле шаблона (который отображает форму выше), будет достигнута точка останова, но, как я объяснил, действие не вызывается на контроллере. Я изменяю javascript на раздел head, но результат тот же.

любая помощь с благодарностью. Спасибо, Баба.

Answer 1

плагин формы jQuery помог мне сократить код и, похоже, имеет больше опций (обратных вызовов) для более точного управления. Но код, предложенный Дарином, также отлично работал. Для тех, кто читает этот пост, ответить на вторую часть моего вопроса. $ (document) .ready () запускается только после первоначальной загрузки документа. Если вы хотите связать элементы DOM событий, которые генерируются или включаются после, вы можете связать событие, используя .live (версия 1.3+). см. документацию по http://api.jquery.com/live/ спасибо.

Answer 2

Вам необходимо зарегистрировать обработчик отправки формы в обработчике первого запроса ajax:

$("#bt-create").click(function() {
    $('#pid').load('/controller/vehicleModel/create3', function() {
        $("#ajax-form").submit(function() {
            // do something...
            var url = "/app/controller/save"
            $.post(url, $(this).serialize(), function(data) {
                alert( data ) ; /// alert data from server
        });
    });
    return false;
});

Также я бы порекомендовал вам использовать jQuery-плагин формы . Ваш код будет выглядеть так:

$('#bt-create').click(function() {
    $('#pid').load('/controller/vehicleModel/create3', function() {
        $('#ajax-form').ajaxForm(function() {
            alert('thanks for submitting');
        });
    });
    return false;
});

Нет необходимости извлекать URL-адрес формы, сериализовать параметры и т. Д. *