Отправка формы с помощью Jquery Fancybox и добавление значения в текстовое поле родителей

Question

У меня есть поле автозаполнения jQuery, которое выбирает адреса электронной почты клиентов.Рядом с этим есть кнопка, которая позволяет пользователю создать нового клиента.Чтобы клиенты не забрали их уже наполовину заполненную форму, я открываю форму в лайтбоксе.Введите jQuery Fancybox.

Новая форма добавления клиента находится в jQuery FancyBox (поэтому это фактически внешняя страница в iframe).

Как только пользователь отправляет форму, на которую он перенаправляетсястраница страницы со скриптом parent.$.fancybox.close();, который затем закрывает fancybox

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

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

Это может включать какое-то взаимодействие между фреймами, что-тоЯ понятия не имею, и что-то, с чем Google не смог мне помочь.

Возможно ли это?Если это так, не могли бы вы привести пример или указать мне правильное направление.

Вот некоторый код, который даст вам приблизительное представление о родительской странице, которая вызывает лайтбокс fancybox и в конечном итоге нуждается в электронном письме и именивновь созданного пользователя перешли к нему.

<tr id="client-add">
 <td>Billing Client:</td>
 <td><input type="hidden" value="" name="client_id" /><input type="text" id="addClient" name="client_name" value="" style="width: 200px;" /><red>*</red> <a class="iframe" href="/clients/add_lightbox"><img src="/images/16x16/user_add.png" border="0"/> Create New Client</a>
 </td>

Спасибо.

Тим

Answer 1

Я бы использовал fancybox со встроенным режимом вместо iframe.Таким образом, в основном вы должны поместить свою форму «создать клиента» в скрытый div, на той же странице, где у вас есть остальная часть вашего GUI селектора клиента.Как только вы выберете такой подход, вы сможете легко взаимодействовать с DOM главной страницы из формы fancybox, поскольку они по сути являются частью одной и той же структуры DOM.Кроме того, вы можете привязать действие автозаполнения к событию onClosed для fancybox.

Модифицируя исходный код, что-то вроде этого должно сработать (не проверено):

<tr id="client-add">
 <td>Billing Client:</td>
 <td>
     <input type="hidden" value="" name="client_id" />
     <input type="text" id="add_client" name="client_name" value="" style="width: 200px;" /><red>*</red>
     <a id="add_client" href="#create_client_div"><img src="/images/16x16/user_add.png" border="0"/> Create New Client</a>
 </td>
</tr>

...затем где-то на вашей странице:

<div id="create_client_div" style="display: none;">
  <form name="new_client" ...>
  </form>
</div>

И вы просто связываете свой fancybox обычным способом, как если бы вы использовали окно типа iframe:

$("a#add_client").fancybox({ ... });

Таким образом, вы можете свободно взаимодействоватьмежду формой создания клиента и остальной частью вашей страницы.