如何等待阿贾克斯的反应时，prevent用户的互动 [英] how to prevent users' interaction when waiting for ajax's response

问题描述

该方案是这样的：我使用jQuery来实现一些Ajax特性。例如：当用户点击一个按钮获取数据，jQuery将调用阿贾克斯函数来从服务器获取一些数据。这个过程可能需要一些时间，所以我加了.ajaxSend和.ajaxComplete功能表现出一定的动画等待进程（实际上是一个读取数据用z-index一个div里的gif：999在里面其他的div的顶部）。 在等待的过程中（在加载数据），我想prevent用户点击其它按钮（例如：我有其他选项卡，下面的小加载数据GIF按钮）。 我做到了这一点的方法是：

The scenario is like: I'm using Jquery to implement some ajax features. For example: when a user click a button "get data", Jquery will call .ajax function to fetch some data from the server. This process might take some time, so I added .ajaxSend and .ajaxComplete functions to show some animation for the waiting process (actually a 'Loading Data' gif inside a div with z-index: 999 to be the top of other divs inside the ). During the waiting process (the 'Loading Data'), I would like to prevent users to click other buttons (for example: I have other tabs, buttons below the small 'Loading Data' gif). The way I achieved this is by:

    $("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，用户仍然可以通过点击其他按钮/标签。我不知道如何完全避免在此过程中的任何用户交互？谢谢！

However, I don't think changing the opacity is the best way. Unless you make the opacity to 0, users can still click on other buttons/tabs. I don't know how to totally avoid any user interactions during this process? Thanks!!

推荐答案

使用的叠加。

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

这篇关于如何等待阿贾克斯的反应时，prevent用户的互动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！