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

У меня есть поле автозаполнения 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>

Спасибо.

Тим


javascript jquery ajax fancybox
person Tim    schedule 26.07.2010    source источник
comment
Я не совсем уверен, о чем вы спрашиваете... не могли бы вы опубликовать код до/после рассматриваемого события?   -  person Hristo    schedule 27.07.2010
comment
Извиняюсь. Это действительно было не очень ясно. Я также обновил вопрос с некоторым кодом. Пожалуйста, дайте мне знать, если чего-то еще не хватает. Спасибо   -  person Tim    schedule 28.07.2010

Ответы (1)


arrow_upward
1
arrow_downward

Я бы использовал fancybox со встроенным режимом вместо iframe. Таким образом, в основном вы должны поместить форму «создать клиент» в скрытый div, на той же странице, где у вас есть остальная часть вашего графического интерфейса выбора клиента. Приняв такой подход, вы сможете легко взаимодействовать с 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({ ... });

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

person András Szepesházi    schedule 08.02.2011