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

});