59

AJAX タブは完璧に機能します。その部分については非常に簡単です。ただし、AJAX UI ダイアログのモーダル ウィンドウをリンクからトリガーすることはできませんでした。

これについての助けをいただければ幸いです。

4

8 に答える 8

121

あの男ほど簡単なものはない。これを試してください：

<?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 を同じドメインでホストされているドキュメントに置き換える必要があることに注意してください (回避策は次のとおりです)。

乾杯

于 2009-09-25T12:13:54.220 に答える
34

リンクを複数回クリックするときに余分なdivs を追加したり、スクリプトを使用してフォームを表示する際の問題を回避したりするために、@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;
});`
于 2011-02-11T21:30:51.743 に答える
25

//適切にフォーマットされた

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

于 2011-02-10T18:47:28.830 に答える
11

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>
于 2012-04-13T01:46:23.497 に答える
5

最初の 2 つの回答はどちらも、さまざまなページを指すダイアログを開くことができる複数の要素では機能しませんでした。

これは最もクリーンなソリューションのように感じられます。ロード時に一度だけダイアログ オブジェクトを作成し、イベントを使用して適切に開閉/表示します。

$(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;
      });
});
于 2011-10-20T17:09:50.863 に答える
0

好奇心が強い - 「これより簡単なことは何もない」という答え(上記)がうまくいかないのはなぜですか? それは論理的に見えますか？ http://206.251.38.181/jquery-learn/ajax/iframe.html

于 2011-03-12T11:34:46.157 に答える
-1 
<a href="javascript:void(0)" onclick="$('#myDialog').dialog();">
  Open as dialog
</a>

<div id="myDialog">
I have a dialog!
</div>

jsbin.com に投稿した例を参照してください。

于 2009-04-30T20:59:53.290 に答える