JQuery UI Диалоговые Функции - PullRequest
Новая
       7

JQuery UI Диалоговые Функции

0 голосов
/ 03 февраля 2011

Я загружаю внешнюю php-страницу в JQuery UI Dialog через событие open, например: 

$.ajax({
    url: "page.php",
    success: function(data){ 
        $("#loadDiv").dialog({
            open: function(){
                $(this).html(data);
            },
            autoOpen: false,
            resizable: false,
            minWidth:900,
            minHeight:480,
            modal:true,
            title: "Add Page",
            buttons: {
                "Add": function() {
                    $.post("script.php", $("#addPageForm").serialize() ,
                    function(data){
                        if( data.search("<b>Error</b>") != -1 ||  data.search("<strong>Error</strong>") != -1) {
                            // Error occured 
                        }else{
                            // Success
                        }
                    });
                },
                "Cancel": function(){
                    $(this).dialog("close");
                }
            }
        });
    }
});

(# loadDiv - это просто пустой div, который скрыт на странице)1005 * Проблема в том, что когда вы нажимаете кнопку отмены, она должна закрывать диалоговое окно, но это не так.Я использую FireBug для FF, и он говорит мне об ошибке "$ (this) .dialog не является функцией ... $ (this) .dialog (" close ");".Когда я пытаюсь открыть его с помощью $ ("# loadDiv"). Dialog ("open") тоже не работает, и я думаю, что эти две проблемы связаны.

Проблема в том, что содержимоедиалог загружается динамически через ajax, потому что он работает, если я уберу часть ajax.Мне нужно выяснить, как заставить его работать так, как я сейчас загружаю контент.

Любые предложения будут оценены!Спасибо!

Ответы [ 3 ]

2 голосов
/ 03 февраля 2011

объявите ваш диалог вне вызова ajax, установите для autoOpen значение false. Теперь внутри обратного вызова вы можете добавить данные в ваш пустой div, а затем просто показать их. Примерно так: 

$(function() {
    $("#loadDiv").dialog({            
            autoOpen: false,
            resizable: false,
            minWidth:900,
            minHeight:480,
            modal:true,
            title: "Add Page",
            buttons: {
                "Add": function() {
                    $.post("script.php", $("#addPageForm").serialize() ,
                    function(data){
                        if( data.search("<b>Error</b>") != -1 ||  data.search("<strong>Error</strong>") != -1) {
                            // Error occured
                        }else{
                            // Success
                        }
                    });
                },
                "Cancel": function(){
                    $(this).dialog("close");
                }
            }
        });

});

$.ajax({
    url: "page.php",
    success: function(data){ 
        $('#loadDiv').html(data);
        $('#loadDiv').dialog('open');
    }

});

РЕДАКТИРОВАТЬ Изменен и проверен код с помощью JSLint.

0 голосов
/ 03 июля 2011

Понял, на странице, которую я вставил в диалог, был источник jQuery, поэтому я удалил эту строку, и все отлично работает.

0 голосов
/ 01 июля 2011

Пожалуйста, убедитесь, что это не проблема, связанная с загрузкой диалогового окна после того, как документ закончил загрузку, попробуйте использовать событие live при нажатии, а также проверьте, относится ли $(this) к диалогу.Вы можете назначить переменную для хранения ссылки на $(this) в начале вашего кода, чтобы вы знали, что когда вы ссылаетесь на $(this), вы будете ссылаться на правильный объект / элемент.

...