Диалоговое окно jQuery UI с проблемой вкладок AJAX - PullRequest
Новая
       22

Диалоговое окно jQuery UI с проблемой вкладок AJAX

1 голос
/ 23 января 2010

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

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

    $('.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();
            }
        });


    });

1 Ответ

0 голосов
/ 06 октября 2010

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

page.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, так что в итоге вы получите только один по желанию.

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

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

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

...