Ajax 请求未拉起 jQuery 对话框窗口

Question

请查看此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();
            });
        });
    });

想法？

Answer 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" );
        }
      }
    });
  });

Answer 2

你需要添加一个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();
                });
    }); 

 });