Dialog給出TypeError

Question

我只是試圖打開一個JQ對話框，並得到一個JS TypeError（不是函數）。
這裏的DIV：

<div id="change_dialog" style="display:none"> 
     Change the number of attendees<br /> for <span id="name_to_change"> </span>? 
     <select id="change_select"> 
     <option value="1">1</option> 
     <option value="2">2</option> 
     <option value="3">3</option> 
     <option value="4">4</option> 
     <option value="5">5</option> 
     <option value="6">6</option> 
     <option value="7">7</option> 
     <option value="8">8</option> 
     <option value="9">9</option> 
     <option value="10">10</option> 
     </select></p> 
     <input type="button" id="change_qty_button" value="Change" /> &nbsp;<input type="button" id="change_abort" value="Cancel" /> 
    </div> 

而這裏的JS：

$('#change_button').click(function(){ 
    $(".res_button").each(function(){ 
     if ($(this).prop('checked')){ 
      $id = $(this).val(); 
      change_name=$("#"+$id).val(); 
     } 
    }); 
    $('#name_to_change').html(change_name); 
    $('#change_dialog').dialog('open'); 
    $('.button_class').hide(); 
    return false; 
}); 

$('#change_dialog').dialog({ 
    autoOpen: false, 
    modal: false, 
    minWidth: 180, 
    closeOnEscape: true, 
    title: "Attendee Quantity Change", 
    show:{ effect: "fold", duration: 1000 }, 
    hide:{ effect: "fold", duration: 1000 } 
}); 

這裏的錯誤行：

TypeError: $(...).dialog is not a function

到錯誤的點線是：$('#change_dialog').dialog({

我沒有看到任何錯誤，在任何地方。我已經評論了kazoo上的各種線路來嘗試隔離錯誤。即使函數存在但是空了，我仍然會得到相同的錯誤。

Answer 1

如上所述，您需要包含jQuery UI庫，其託管在https://code.jquery.com/ui/。此外，你的JavaScript中有一個小錯誤，會給你一個未定義的變量錯誤。

的JavaScript

$(document).ready(function() { 
    $('#change_button').click(function(){ 
     var change_name; //if not included, is undefined at line 10 
     $(".res_button").each(function(){ 
      if ($(this).prop('checked')){ 
       $id = $(this).val(); 
       change_name = $("#"+$id).val(); 
      } 
     }); 
     $('#name_to_change').html(change_name); //this was undefined 
     $('#change_dialog').dialog('open'); 
     $('.button_class').hide(); 
     return false; 
    }); 

你可以看到它在此琴工作：https://jsfiddle.net/2pkzsxun/1/

希望幫助！