Модальное диалоговое окно jquery загружает страницу xhtml, но не закрывает

У меня есть модальное диалоговое окно, которое открывается при нажатии кнопки, а при открытии загружает страницу .xhtml.

Внутри этой XHTML-страницы у меня есть кнопка для передачи некоторых данных обратно в родительское окно (где инициализируется диалоговое окно), и после этого я хочу закрыть диалоговое окно, но оно не закрывается!! Это мой код:

Первая страница:

<script type="text/javascript">                         
    var selected_row_data_json;

    window.lang = new jquery_lang_js();

    $().ready(function () {
        $.ajaxSetup ({
            // Disable caching of AJAX responses
            cache: false
        });
        createDataListDialog();                
    });     

    function setSelectedRowJsonData(row_data_)
    {  
       selected_row_data_json = row_data_;                           
    }           

    function setFormSelectedValues()
    {
        $('#dataListDialog').dialog('close');  
    }

    function createDataListDialog()
    {
        $("#dataListDialog").dialog(
        {                   
            autoOpen: false,                      
            modal: true,                    
            resizable: true,
            open: function (event, ui) {   
            /* <![CDATA[ */                    
                $('#dataListDialog').css('overflow', 'hidden');

                $('body').css('overflow','hidden');
                $(this).load("data_list.xhtml");                       
            /* ]]> */
            },
            height: 400,
            width: 550,
            close: function (event, ui) {                        
                $(this).dialog('destroy');
                createDataListDialog();                        
            },
            create: function(event, ui)   
            {                                                  
                $(this).parents(".ui-dialog").css("padding", 0);                           
                $(this).parents(".ui-dialog:first")
                    .find(".ui-dialog-content").css("padding", 0);
            }
        });       
    }
</script>

<f:view>
    <h:outputLabel value="Code:"  lang="en" onclick="openDialog('dataListDialog');return false;" />

    <div id="dataListDialog" lang="en" title="Users" dir="#{user.dir}">                
    </div>
</f:view>

data_list.xhtml страница:

<script type="text/javascript">
    function test()
    {
        window.parent.setSelectedRowJsonData(selected_row_data_json);
        window.parent.setFormSelectedValues();
    }
</script> 

<h:form id="dataListForm" ">   
    <input type="button" onclick="test()" value="TEST">/input>
</h:form> 

Я делаю что-то неправильно? Что-то упустил? Почему не закрывается диалог с загруженной страницы?

ОБНОВЛЕНИЕ: если загруженная страница является страницей html, то она работает нормально — диалоговое окно закрывается. проблема в том, когда страница xhtml страница.. как я могу это исправить?

Любая помощь будет оценена!


person user590586    schedule 06.12.2012    source источник
comment
Похоже, вы вызываете createDataListDialog() в событии закрытия. Похоже, он воссоздает диалог каждый раз, когда он закрывается.   -  person Mike Webb    schedule 06.12.2012


Ответы (1)


Более простой способ сделать это — запустить функцию test() после успешного завершения загрузки, то есть привязать ее к событию complete:

$(this).load("data_list.xhtml",
    complete: function(response, status, xhr) {
        window.parent.setSelectedRowJsonData(selected_row_data_json);
        window.parent.setFormSelectedValues();
    });   

Бонус: добавьте несколько условий, обрабатывающих ошибки сервера с помощью объекта status.

person Bryan A    schedule 06.12.2012