jQuery UI Как открыть диалог, добавить в div, а не тело

13

Я использую этот простой пример модального диалога здесь: http://jqueryui.com/demos/dialog/modal-form.html

Когда страница загружается, jQuery удаляет диалоговое окно div из DOM. Когда кнопка нажата, чтобы открыть диалог, jQuery добавляет диалог div в конец элемента body.

Я хочу добавить его к определенному div, а не к телу. Причина в том, что у меня большая форма на странице, а в диалоговом окне - один входной файл (без отдельной формы). Я хочу сохранить свой файл в диалоговом окне, в том же виде, что и остальные поля на странице (которые не находятся в диалоговом окне).

Можно ли добавить диалог к ​​данному элементу или элементу?

  • 0
    Вы должны рассмотреть какую-то асинхронную загрузку.

3 ответа

11
Лучший ответ

Просто решил это сам вчера. То, как я решил, было вставить пустой div внизу формы (<div id="bottomOfForm"></div>), а затем, закрыв диалог, переместите его содержимое в этот div. В моем случае код был примерно таким:

        // Setup up dialogue box that contains some form fields:    
        $j("#myDialogue").dialog({
            autoOpen: false,
            height: 300,
            width: 350,
            modal: true,
            buttons: {
                "Submit": function() {
                    // Move to main form so fields get included:
                    $j(this).parent().prependTo($j("#bottomOfForm"));
                    // Submit the main form:
                    $j('#mainForm').submit();
                },
                Cancel: function() {
                    $j(this).dialog( "close" );
                }
            }
        });
  • 0
    Работает отлично, большое спасибо
  • 0
    close мероприятие отлично сработало для меня!
33

Это старый поток, но в случае, если кто-то (например, я) натолкнется на него в будущем, я думаю, стоит отметить, что с 1.10.0 в jQuery UI предлагается опция appendTo:

$("#myDialogue").dialog({
  appendTo: "#DesiredDivID"
});

ссылка на документы API

  • 1
    <3 Я ЛЮБЛЮ ТЕБЯ <3 Ты просто спасешь день!
3

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

Для вашего конкретного использования я бы предложил найти form inputs из диалогового окна, когда он закрыт, клонировать и добавлять их в вашу форму. Вы можете конвертировать type=text в type=hidden, когда вы вставляете их в свою форму. Таким образом, вы можете получить эти данные с обычной формой submit.

Счастливое кодирование.

  • 0
    Спасибо за информацию, приятель.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню