1. 首页
  2. 问答
  3. 如何防止用户在等待Ajax响应时的交互

如何防止用户在等待Ajax响应时的交互

2010-02-02 46 views
7

这种情况就像：我正在使用Jquery实现一些Ajax功能。例如：当用户点击“获取数据”按钮时，Jquery将调用.ajax函数从服务器获取一些数据。这个过程可能需要一些时间，所以我添加了.ajaxSend和.ajaxComplete函数来为等待过程显示一些动画（实际上是一个带有z-index：999的div中的“加载数据”gif，成为其他div的顶部。 ）。 在等待过程中（'加载数据'），我想阻止用户点击其他按钮（例如：我有其他标签，小'加载数据'gif下的按钮）。 我实现这一点的方法是：如何防止用户在等待Ajax响应时的交互

$("body").ajaxSend(function() 
    { 
     $(this).append('<div id="loading">Data Loading<\/div>'); 
     $("div#error").remove(); 
     $(this).children().not('#loading').css({'opacity':0.22}); 
    }); 
    $("body").ajaxComplete(function() 
    { 
     $("div#loading").remove(); 
     $(this).children().not('#loading').css({'opacity':1}); 
    });

不过，我不认为改变不透明度是最好的方式。除非将不透明度设置为0，否则用户仍然可以单击其他按钮/选项卡。我不知道如何在这个过程中完全避免任何用户交互？谢谢！！

来源

2010-02-02 WilliamLou

回答

5

使用重叠。

http://jqueryui.com/demos/dialog/#modal

来源

2010-02-02 19:31:41

+0

实际上，我也使用JqueryUI。是的，我只是尝试了对话框的模式选项。很容易达到我想要的效果。但是，有没有办法删除对话框右上角的交叉（关闭按钮）？ – WilliamLou 2010-02-02 19:56:33

+0

看到这个http://stackoverflow.com/questions/896777/remove-close-button-on-jqueryui-dialog – 2010-02-02 20:02:25

+0

谢谢。我选择这个作为我的答案，因为我已经使用JqueryUI，这样我就不必为blockUI效果导入另一个插件 – WilliamLou 2010-02-02 23:05:33

5

设为可见一个div的z-index高于一切。 onsucess，隐藏它。

对于IE6，考虑的选择输入

来源

2010-02-02 19:31:40 Alfabravo

+0

我希望我可以upvote（但我在接下来的几个小时内），特别是IE6的警告并形成元素。 – Sampson 2010-02-02 19:34:27

6

我用的jQuery UI座在过去良好的成功的知名度。使用Ajax效果很好：

http://malsup.com/jquery/block/

可以使用插件像这样，而不是handcoding类似的解决方案......

来源

2010-02-02 19:31:46

+0

好吧，这个插件很适合这个目的，但我不想在这个阶段导入太多的插件。不管怎么说，还是要谢谢你。如果我找不到更简单的解决方案，我可能会在稍后转向BlockUI。 – WilliamLou 2010-02-02 20:00:11

0

我在Ben Nadel's ajax pipeline上使用了一个变体。实际上，他将jQuery $ .ajax调用与可记录传出ajax请求的对象进行了包装。

当ajax请求熄灭时，您将记录请求名称。如果有更多请求尝试使用相同的名称出去，则不执行它（可选地向用户提供消息）。

来源

2010-02-02 19:41:24 womp

0

我试图得到一个类似问题的答案，我最终在这里。我知道这是一个古老的问题，但我想要解决的问题是，您希望阻止交互的元素之上的叠加层可以通过浏览器检查器轻松删除。

在我看来，处理这个问题的最好方法是为整个页面设置一个全局布尔变量，并在ajax没有运行时（至少是敏感操作）只在页面上执行动作，或者只是关闭ajax的异步调用，因为事实上在这种情况下，你似乎并不需要它（尽管我知道有些人会因为这样说而把我钉死）。

来源

2015-03-02 04:47:49 user2755140

相关问题

 相关问题