Как использовать Thickbox (или модальное окно), чтобы обновить выделенное поле ввода

Question

У меня есть форма с динамическим полем выбора (вытащил из базы данных). Я хочу дать пользователям возможность добавлять в это поле выбора, не выходя из формы. Я бы предпочел всплывающее окно (или модальное окно), когда пользователь нажимает ссылку рядом с полем выбора. Всплывающее окно Thickbox будет иметь форму, где пользователь может ввести новое значение, которое будет отображаться в поле выбора. Когда пользователь нажимает кнопку «Отправить», всплывающее окно (или модальное окно) закрывается и обновляет только поле выбора, к которому он добавлял ..., сохраняя все остальные данные в форме. В качестве бонуса я также хотел бы, чтобы в поле выбора было выбрано только что добавленное значение.

Я нашел несколько близких примеров, но ничего не изменилось. Самое близкое, что я видел к этому, это плагин AddToList для jquery: http://pelicansareevil.com/jquery/addtolist - но он не использует всплывающее окно в стиле Thickbox.

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

Answer 1

Я думаю, что основная проблема заключалась в том, что вы не могли поймать событие, когда ThickBox был закрыт. Насколько я знаю, ThickBox изначально не поддерживает обратный вызов, где вы можете передать функцию, которая вызывается при закрытии модального окна. Однако вы можете попробовать это дополнение к Thickbox cb_thickbox (замените его на текущий скрипт ThickBox). Добавлена ​​функция обратного вызова для плагина ThickBox.

Просто определите эту функцию в вашем скрипте

var TB_callback = function(){alert("Now I can update my combobox!")};

Answer 2

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

Если бы у вас было два таких входа ...

<input name="newValue" type="text" />
<input name="newName" type="text" />

Тогда ты мог бы сделать это ...

var newValue = $('input[name="newValue"]').val();
var newName = $('input[name="newName"]').val();

// Removes the selected attribute from your current options
$('#mySelect option:selected').removeAttr("selected");

// Adds a new option with the selected attribute
$('#mySelect').append('<option selected="selected" value="' + newValue + '">' + newName + '</option>');