0

このjsFiddleを確認してください...

これは、ajax リクエストを使用してコンテンツを取得する jQuery UI ダイアログ ボックスです。何が問題なのかわかりませんが、空白のダイアログ以外は何も表示されません。

HTML...

<div id="#griffin"></div>
<ul>
    <li>
        <a href="ajax/ajax-bj.html" class="griffin-style all-about-bj" id="all-about-bj"></a>
    </li>
</ul>

JavaScript...

$(function() {
    $("#griffin").dialog({
        autoOpen: true,
        modal: true,
        width: 950,
        height: 'auto',
        show: 'fade',
        hide: 'fade',
        position: {my: "center top", at:"center top", of: window },
        buttons: {
            "I have Read and Understand": function() {
                $(this).dialog("close");
            }
        }
    });
        $(".griffin-style").on("click", function(e) {
            e.preventDefault();
            $("#griffin").html("");
            $("#griffin").dialog("option", "title", "Loading...").dialog("open");
            $("#griffin").load(this.href, function() {
                $(this).dialog("option", "title", $(this).find("h1").text());
                $(this).find("h1").remove();
            });
        });
    });

考え？

4

2 に答える 2

1

jQuery UIダイアログを開く関数を追加する必要があります

http://api.jqueryui.com/dialog/#method-open

jsfiddle は同じオリジン ポリシーにより外部ファイルをプルできないため、これをローカルまたは同じサーバーで実行する必要があります。

http://jsfiddle.net/aEwUF/7/

$(function() {
    $("#griffin").dialog({
        autoOpen: true,
        modal: true,
        width: 950,
        height: 'auto',
        show: 'fade',
        hide: 'fade',
        position: {my: "center top", at:"center top", of: window },
        buttons: {
            "I have Read and Understand": function() {
                $(this).dialog("close");
            }
        },
                    // add this
        open:function(event,ui){
                $("#griffin").html("");
                $("#griffin").load($(".griffin-style").attr("href"), function() {
                $("#griffin").dialog("option", "title", $(this).find("h1").text());
                $(".griffin-style").find("h1").remove();
            }); 
        }
    });


     $(".griffin-style").on("click", function(e) {
                e.preventDefault();
                $("#griffin").html("");
                $("#griffin").dialog("option", "title", "Loading...").dialog("open");
                $("#griffin").load(this.href, function() {
                    $("#griffin").dialog("option", "title", $(this).find("h1").text());
                    $(this).find("h1").remove();
                });
    }); 

 });
于 2013-11-14T18:04:30.407 に答える
1

パラメータの下でコマンドを指定する必要がありbuttonsます。

http://jsfiddle.net/aEwUF/4/

  $(function() {
    $( "#griffin" ).dialog({
      resizable: false,
      height:150,
      modal: true,
      buttons: {
        "I have read and understand the terms": function() {
          $( this ).dialog( "close" );
          $("p").html("You have accepted the terms");
          //write ajax requests in here..
        },
        Cancel: function() {
          $( this ).dialog( "close" );
        }
      }
    });
  });
于 2013-11-14T18:08:19.717 に答える