Окно jQuery UI Dialog, загруженное в AJAX-стиль jQuery UI Tabs

Закладки AJAX работают отлично. Это довольно просто с этой частью. Тем не менее, получение модального окна AJAX UI Dialog для запуска ссылки было неудачным.

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

Ответы

Ответ 1

Ничего проще, чем этот человек. Попробуйте следующее:

<?xml version="1.0" encoding="iso-8859-1"?>
<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css" type="text/css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js"></script>
    <style>
        .loading { background: url(/img/spinner.gif) center no-repeat !important}
    </style>
</head>
<body>
    <a class="ajax" href="http://www.google.com">
      Open as dialog
    </a>

    <script type="text/javascript">
    $(function (){
        $('a.ajax').click(function() {
            var url = this.href;
            // show a spinner or something via css
            var dialog = $('<div style="display:none" class="loading"></div>').appendTo('body');
            // open the dialog
            dialog.dialog({
                // add a close listener to prevent adding multiple divs to the document
                close: function(event, ui) {
                    // remove div with all data and events
                    dialog.remove();
                },
                modal: true
            });
            // load remote content
            dialog.load(
                url, 
                {}, // omit this param object to issue a GET request instead a POST request, otherwise you may provide post parameters within the object
                function (responseText, textStatus, XMLHttpRequest) {
                    // remove the loading class
                    dialog.removeClass('loading');
                }
            );
            //prevent the browser to follow the link
            return false;
        });
    });
    </script>
</body>
</html>

Обратите внимание, что вы не можете загрузить удаленный доступ с локального компьютера, поэтому вам придется загрузить его на сервер или что угодно. Также обратите внимание, что вы не можете загружать из иностранных доменов, поэтому вы должны заменить href ссылки на документ, размещенный в том же домене (и здесь обходной путь).

Приветствия

Ответ 2

Чтобы не добавлять дополнительные div при многократном нажатии ссылки, и избегать проблем при использовании script для отображения форм, вы можете попробовать вариант кода @jek.

$('a.ajax').live('click', function() {
    var url = this.href;
    var dialog = $("#dialog");
    if ($("#dialog").length == 0) {
        dialog = $('<div id="dialog" style="display:hidden"></div>').appendTo('body');
    } 

    // load remote content
    dialog.load(
            url,
            {},
            function(responseText, textStatus, XMLHttpRequest) {
                dialog.dialog();
            }
        );
    //prevent the browser to follow the link
    return false;
});`

Ответ 3

//Правильно отформатирован

<script type="text/Javascript">
  $(function ()    
{
    $('<div>').dialog({
        modal: true,
        open: function ()
        {
            $(this).load('mypage.html');
        },         
        height: 400,
        width: 600,
        title: 'Ajax Page'
    });
});

Ответ 4

Просто добавление к ответу nicktea. Этот код загружает содержимое удаленной страницы (без перенаправления там), а также очищает его при закрытии.

<script type="text/javascript">
    function showDialog() {
        $('<div>').dialog({
            modal: true,
            open: function () {
                $(this).load('AccessRightsConfig.htm');
            },
            close: function(event, ui) {
                    $(this).remove();
                },
            height: 400,
            width: 600,
            title: 'Ajax Page'
        });

        return false;
    }
</script>

Ответ 5

Ни один из первых двух ответов не работал у меня с несколькими элементами, которые могут открывать диалоги, указывающие на разные страницы.

Это похоже на самое чистое решение, только один раз создает объект диалога при загрузке, а затем использует события для открытия/закрытия/отображения соответственно:

$(function () {
      var ajaxDialog = $('<div id="ajax-dialog" style="display:hidden"></div>').appendTo('body');
      ajaxDialog.dialog({autoOpen: false});
      $('a.ajax-dialog-opener').live('click', function() {
          // load remote content
          ajaxDialog.load(this.href);
          ajaxDialog.dialog("open");
          //prevent the browser from following the link
          return false;
      });
});