Question

我有一个电子商务网站，我允许用户通过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＆amp; jquery-ui js和jquery-ui css。

Answer 1

这是否按照您期望的方式工作（我模拟了ajax调用，请参阅代码中的注释）

＆＃13;

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

＆＃13;

<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>

＆＃13;

可以启动jquery对话框，但是当打开get Uncaught TypeError时：$（...）。对话框不是一个函数

1 个答案: