可以启动 jquery 对话框，但是打开 get Uncaught TypeError: $(...).dialog is not a function

Posted 2023-05-08

【中文标题】可以启动 jquery 对话框，但是打开 get Uncaught TypeError: $(...).dialog is not a function

【英文标题】：Can initiate jquery dialog, but when opening get Uncaught TypeError: $(...).dialog is not a function

【发布时间】：2017-10-15 22:24:08

【问题描述】：

我有一个电子商务网站，允许用户通过 ajax 添加到购物车。当添加到购物车成功时，我会显示一个带有成功消息的对话框。

在某个时候，我不知道是什么时候，对话框停止显示。

我已经做了一些挖掘和调试，这就是我想出的。

初始化对话框的代码行正在运行且没有错误。

$('#cart_popup').dialog(
  autoOpen: false,
 modal: true,
width:600,
show: 
    effect: "blind",
    duration: 1000
  ,
  hide: 
    effect: "fade",
    duration: 1000
  
);

正在页面上设置实际对话框。

原始html：

    <div id='cart_popup'>
  <div id='ajax_cart_recs'>  </div>
   <div id='cart_content'></div>
 </div>

页面加载后：

<div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-front ui-draggable ui-resizable" tabindex="-1" role="dialog" aria-describedby="cart_popup" aria-labelledby="ui-id-1" style="display: none; position: absolute;"><div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix ui-draggable-handle"><span id="ui-id-1" class="ui-dialog-title">&nbsp;</span><button type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only ui-dialog-titlebar-close" role="button" title="Close"><span class="ui-button-icon-primary ui-icon ui-icon-closethick"></span><span class="ui-button-text">Close</span></button></div><div id="cart_popup" class="ui-dialog-content ui-widget-content" style="display: block;">
  <div id="ajax_cart_recs">
</div>
   <div id="cart_content"><div id="ajax-col-main" class="full content ajax_cart"> 

  </div>

 </div>

当用户单击添加到购物车时，正在发送呼叫，并且正在按预期更新对话框。

当回调到达该行时

$('#cart_popup').dialog('open');

它会产生以下错误：

jquery.min.js:4 Uncaught TypeError: $(...).dialog is not a function

我包括 jquery & jquery-ui js，以及 jquery-ui css。

【参考方案1】：

这是否符合您的预期（我模拟了 ajax 调用，请参阅代码中的 cmets）

var ajaxCall = function() 
  // simulate ajax call here,
  // trigger callBack
  $('#cart_popup').dialog('open');
;

$(document).ready(function() 

  $('#cart_popup').dialog(
    autoOpen: false,
    modal: true,
    width: 600,
    show: 
      effect: "blind",
      duration: 1000
    ,
    hide: 
      effect: "fade",
      duration: 1000
    
  );

  $('#cart_content').html('<div id="ajax-col-main" class="full content ajax_cart"></div>');

  $('#add-to-cart').on('click', function(e) 
    ajaxCall();
  );

);

<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<div id='cart_popup'>
  <div id='ajax_cart_recs'></div>
  <div id='cart_content'></div>
</div>
<button id="add-to-cart">Add to Cart Simulation</button>

【讨论】：

这在这种情况下有效，但是当我复制到我的网站时它不起作用。