jquery с boxy плагином - загрузить и отправить форму через ajax

Question

Я использую JQuery с плагином Boxy.

Когда пользователь нажимает на ссылку на одной странице, я вызываю Boxy.load, чтобы загрузить форму во всплывающее окно. Форма загружается и отображается во всплывающем окне без проблем.

Однако я не могу связать форму с событием отправки, так как не могу выбрать элемент формы.

Это обработчик события:

    $('#flag-link a.unflagged').click (function(e) {
        url = $(e.target).attr('href');
        Boxy.load(url, {behaviours: function(r) {
            alert ($("#flag-form").attr('id'));
            }
        });
    });

При отображении предупреждения отображается «неопределенное».

А это форма:

<form id="flag-form" method="POST" action="somepage">        
    <table>
        <tr><td><input type="text" name = "name"></td></tr>
        <tr><td><input type="submit" value="OK"></td></tr>
    </table>
</form>

Что я делаю не так?

Answer 1

Насколько я понимаю, метод live() должен использоваться для привязки элемента к событию в этом случае:

$("#flag-form").live("submit", function(){ ... }

В настоящее время документировано, что живой метод не поддерживает событие submit. Тем не менее, я мог бы решить это с Chrome и FF. С другой стороны, я не мог заставить его работать в IE. Похоже, что лучший способ обеспечения кросс-браузерной совместимости - привязать кнопку отправки формы к событию click.

$("#flag-form-submit").live("click", function(){

Answer 2

Во-первых (незначительная точка, но потенциальный источник проблем), оно должно быть id="flag-form", а не id = "flag-form" (без пробелов).

Во-вторых, вам не нужно r.find(). Просто сделай $("#flag-form").attr("id")

Answer 3

Boxy открывает URL (url = $(e.target).attr('href');) в фрейме. Таким образом, вы не можете найти форму на начальной странице (родительская страница). Ваш код для привязки формы должен быть на дочерней странице (т. Е. В фрейме Boxy). Вы можете проверить URL iframe, используя свой код, url = $(e.target).attr('href');

Answer 4

Я узнал, что объявление методов в behaviours: function (e) {} работает в дополнение к использованию методов live ().

например:.

$('#flag-link a.unflagged').click (function() {
    Boxy.load(this.href, {
      behaviours: function(r) {
        r.find('#flag-form').bind('submit', function() {
          // do on submit e.g. ajax calls etc.
        });
      }
    });
    return false;
});