Ajax request not pulling up jQuery dialog window

Question

Please review this jsFiddle...

This is a jQuery UI dialog box utilizing an ajax request to pull up the content. I can't seem to figure out what's wrong, but nothing's popping up other than the blank dialog.

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();
            });
        });
    });

Thoughts?

Answer 1

You must give the commands under buttons parameter.

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

you need to add a jQuery UI dialog open function

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

you will have to run this locally or on the same server since the jsfiddle cant pull your external file due to same origin policy

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();
                });
    }); 

 });