Проблем с jQuery UI диалог с раздели AJAX

Имам проблем с използването на jQuery Tools Tabs (AJAX) заедно с jQuery UI Dialog (ръчно извършване на зареждането на AJAX за диалоговия прозорец). Проблемът е, че диалоговият прозорец се зарежда и настройва специално за текущия раздел (зарежда се в заявката за раздел чрез AJAX, заедно със съдържанието на раздела). Потребителският интерфейс на jQuery, когато създава диалоговия прозорец, премахва контейнера от първоначалната му позиция, добавя неговото маркиране и го добавя към тялото.

Проблемът е, че диалоговият прозорец вече е извън съдържанието на раздела и няма да бъде заменен/премахнат при последващи промени в раздела. Ако потребителят щракне върху друг раздел или върху бутона за връщане назад (тези раздели имат AJAX хронология, използваща URL хеша, така че страницата всъщност не се презарежда), диалоговият прозорец не работи, но не се премахва, тъй като jQuery UI Dialog го премести извън съдържанието на раздела. Сега се показва само в долната част на тялото. Написах „хакване“ за това, ако потребителят физически щракне върху бутона за затваряне, но това не се задейства, ако се натисне бутонът за връщане назад или се зареди друг раздел чрез 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();
            }
        });


    });

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

Отговори (1)


arrow_upward
0
arrow_downward

Ако приемем настройката да имаме главна страница с куп jQuery Ajax раздели и всеки раздел ajax-зарежда страница в страницата content-panel/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, така че ще получите само един, както желаете.

Поставете бутон/връзка/и т.н. на страницата с ID, както е посочено в горния бит, за да отворите диалоговия прозорец.

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

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

person M.B    schedule 06.10.2010