Диалог пользовательского интерфейса jQuery с проблемой вкладок AJAX

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

Проблема в том, что диалоговое окно теперь находится за пределами содержимого вкладки и не будет заменено/удалено при последующих изменениях вкладки. Если пользователь щелкает другую вкладку или кнопку «Назад» (эти вкладки имеют историю AJAX с использованием хэша URL-адреса, поэтому страница фактически не перезагружается), диалоговое окно прерывается, но не удаляется, поскольку диалоговое окно пользовательского интерфейса jQuery переместило его за пределы содержимое вкладки. Теперь он просто появляется в нижней части тела. Я написал «взломать» для этого, если пользователь физически нажимает кнопку закрытия, но это не срабатывает, если нажата кнопка «Назад» или другая вкладка загружается через AJAX, а пользовательский интерфейс jQuery фактически ПЕРЕМЕЩАЕТ ЭТО НАЗАД в нижнюю часть body (Не уверен, как/почему он это делает!). Какие-либо предложения? И, пожалуйста, дайте мне знать, если мне что-то непонятно. Спасибо! (Вот что у меня есть сейчас, что успешно удаляет его, когда пользователи физически закрывают диалог)

    $('.openMyDialog').click(function() {

                    // Create div for dialog
        $('body').append('<div id="modalContainer"></div>');

        // Load dialog with AJAX
        $('#modalContainer').load('loadMyAjaxContent.html').dialog({
            modal: true,
            width: 850,
            open: function(type,data) {
                // Remove from bottom of body and put it back into the tab's content
                $(this).parent().appendTo('.panes div:first');
            },
            close: function() {
                $(this).dialog('destroy');
                $('#modalContainer').remove();
            }
        });


    });

jquery ajax jquery-ui jquery-tools jquery-dialog
person Ryan    schedule 22.01.2010    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Предполагая, что на главной странице есть куча вкладок jQuery Ajax, и каждая вкладка ajax загружает страницу в панель содержимого страницы/div.

страница.html

 ----/home\---/users\---
|<div id="page-content">|
|   page content gets   |
|   loaded in here      |
|</div>                 |

На странице, которая получает ajax на вкладке, поместите это вверху:

т.е. в users.html

$(document).ready(function()
{
    $('.delete-user-form').each(function(){
        if($('.delete-user-form').length > 1)
            $(this).detach();
    });

    $('#delete-user').dialog({
        autoOpen: false,
        height: 200,
        width: 300,
        modal: true,
        buttons: {
            Cancel: function() {
                $(this).dialog('close');
            },
            'Save': function() {
                $('#delete-user-form').submit();
                $(this).dialog('close');
            }
        }
    });

    $('#delete-user-button').click(function(){
        $('#delete-user').dialog('open');
    });
});

А это подготовленная форма в users.html, которая превратится в диалоговое окно:

<div id="delete-user" class="delete-user-form" title="Delete User" style="display:none;">
    <form action="/admin/users/delete" id="delete-user-form" method="POST">
        <input type="hidden" id="user-id" name="userID" />
        <table cellspacing="0" cellpadding="5px" border="0" id="delete-user-form-table" style="display:none;">
            <tr>
                <td>
                    Do you really want to delete:
                </td>
                <td>
                    <input type="text" id="user-name" />
                </td>
            </tr>
        </table>
    </form>
</div>

Теперь, как описывает OP, каждый раз, когда пользователь переключается между вкладками и возвращается на эту страницу, модальный диалоговый элемент div (id = "delete-user") дублируется.

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

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

ie. <input type="button" id="delete-user-button" value="Delete User" />

Открытие диалогового окна таким образом предотвращает дублирование, которое обнаружил OP, когда он пропустил: autoOpen: false из параметров настройки диалогового окна и вызвал диалоговое окно напрямую.

person M.B    schedule 06.10.2010