blocks|key|685156|text|看一下jQuery+get方法。它使用起来非常简单，而且还可以处理回调，所以添加代码将鼠标光标设置回原处将不会有任何问题……|type|unstyled|depth|inlineStyleRanges|entityRanges|data|685157|http://api.jquery.com/jQuery.get/|offset|length|685158|例如。|685159|$('html,+body').css("cursor",+"wait");
$.get("yourajaxcall.url",+function(data)+{
++++$('html,+body').css("cursor",+"auto");

++++//++Success+-+do+something+with+"data"+here

}).error(function()+{
++++$('html,+body').css("cursor",+"auto");

++++//++There+was+an+error+-+do+something+else

});|code-block|syntax|javascript|685160|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|X|0|0|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|U|8|@]|9|@$D|V|E|W|1|X]]|A|$]]|$1|F|3|G|5|6|7|Y|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|Z|8|@]|9|@]|A|$K|L]]|$1|M|3|-4|5|6|7|10|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|C]]]]

Have a look at the jQuery get method. It's very simple to use and handles callback as well, so you'll have no problem adding the code to set the mouse cursor back...

<a href="http://api.jquery.com/jQuery.get/" rel="noreferrer">http://api.jquery.com/jQuery.get/</a>

Example...

<pre><code>$('html, body').css("cursor", "wait");
$.get("yourajaxcall.url", function(data) {
 $('html, body').css("cursor", "auto");

 // Success - do something with "data" here

}).error(function() {
 $('html, body').css("cursor", "auto");

 // There was an error - do something else

});
</code></pre>

blocks|key|685232|text|对于这个问题，This+post+here有一个很好的解决方案。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|685233|以下是他的解决方案：|685234|function+globalAjaxCursorChange()+
{
++$("html").bind("ajaxStart",+function(){
+++++$(this).addClass('busy');
++}).bind("ajaxStop",+function(){
+++++$(this).removeClass('busy');
++});
}|code-block|syntax|javascript|685235|然后在CSS中：|685236|html.busy,+html.busy+*+{++
++cursor:+wait+!important;++
}++|685237|我喜欢CSS方法和切换类，而不是在Javascript中实际更改CSS。在我看来，这是一种更干净的方法。|685238|要明确地将其应用于您的代码，您可以将尝试将光标更改为$(this).addClass('busy');的Javascript更改为，然后当您想要更改回光标时，只需调用$(this).removeClass('busy');即可|style|CODE|685239|entityMap|0|LINK|mutability|MUTABLE|url|http://postpostmodern.com/instructional/global-ajax-cursor-change/^0|7|E|0|0|0|0|0|0|0|Q|P|2B|S|0^^$0|@$1|2|3|4|5|6|7|12|8|@]|9|@$A|13|B|14|1|15]]|C|$]]|$1|D|3|E|5|6|7|16|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|17|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|6|7|18|8|@]|9|@]|C|$]]|$1|M|3|N|5|H|7|19|8|@]|9|@]|C|$I|J]]|$1|O|3|P|5|6|7|1A|8|@]|9|@]|C|$]]|$1|Q|3|R|5|6|7|1B|8|@$A|1C|B|1D|S|T]|$A|1E|B|1F|S|T]]|9|@]|C|$]]|$1|U|3|-4|5|6|7|1G|8|@]|9|@]|C|$]]]|V|$W|$5|X|Y|Z|C|$10|11]]]]

<a href="http://postpostmodern.com/instructional/global-ajax-cursor-change/" rel="noreferrer">This post here</a> has a great solution for the problem. 

Here's his solution: 

<pre><code>function globalAjaxCursorChange() 
{
 $("html").bind("ajaxStart", function(){
 $(this).addClass('busy');
 }).bind("ajaxStop", function(){
 $(this).removeClass('busy');
 });
}
</code></pre>

And then in the CSS:

<pre><code>html.busy, html.busy * { 
 cursor: wait !important; 
} 
</code></pre>

I like the CSS approach and toggling a class rather than actually changing the CSS in the Javascript. Seems like a cleaner approach to me.

To apply this to your code specifically, you would change the Javascript that is trying to change the cursor to just <code>$(this).addClass('busy');</code> then when you want to change the cursor back just call <code>$(this).removeClass('busy');</code>

blocks|key|469238|text|在main函数中添加以下内容：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|469239|$('html,+body').css("cursor",+"wait");++|code-block|syntax|javascript|469240|然后声明这个函数(这是ajax的结果)：|469241|function+returnedValues+()+{++++
++if+(xmlhttp.readyState==4)+
++{++++++
+++++$('html,+body').css("cursor",+"auto");+++
++}++
}+|469242|并将令人惊叹地工作:)|469243|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

In your main function add the following:

<pre><code>$('html, body').css("cursor", "wait"); 
</code></pre>

then declare this function (which is the ajax result):

<pre><code>function returnedValues () { 
 if (xmlhttp.readyState==4) 
 { 
 $('html, body').css("cursor", "auto"); 
 } 
} 
</code></pre>

And will work amazingly :)

blocks|key|469297|text|我不喜欢简单地将css属性添加到body标记的解决方案:如果您已经为元素分配了一个光标，那么它将不起作用。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|469298|在这里看看我的解决方案：https://stackoverflow.com/a/26183551/1895428|offset|length|469299|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/a/26183551/1895428^0|0|C|18|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@$D|P|E|Q|1|R]]|A|$]]|$1|F|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|G|$H|$5|I|J|K|A|$L|M]]]]

I don't like the solution that simply add the css property to the body tag: it's not gonna work if you already have a cursor assigned to your element.

Have a look on my solution here:
<a href="https://stackoverflow.com/a/26183551/1895428">https://stackoverflow.com/a/26183551/1895428</a>

blocks|key|469365|text|在Stack+Overflow上提供的答案对我来说都不起作用。我使用最新最好的FireFox进行开发，这里的其他人使用IE、Chrome等。每次我调用jQuery的AJAX时，什么都不会发生，只有当AJAX调用返回时，光标才会改变。那么它就会卡在等待游标中。所以-调用完成，服务器返回新的信息，信息被显示，然后WHAM！等待光标显示，并且不会消失。我尝试了所有给出的答案。.ajaxXXXX的东西被调用了。(我在函数中添加了一个警告(“HERE”)；，那些“HERE”一直都会出现。每一个调用。非常令人沮丧。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|469366|所以我说：“好吧--新的东西不管用。那去老学校怎么样？”我知道这样做很笨拙--但这并不是我正在做的大项目。它只是一个很小的编辑器，所以几个人可以同时编辑我们的数据库。永远看不到互联网的光芒。只访问内部网。:-)不管怎么说，这个方法非常有效，效果非常好。您需要提供自己的等待游标。我刚刚从谷歌图片中抓取了一个来使用。|469367|首先-+HTML：|469368|<div+id='wait'+name='wait'
style='position:absolute;top:-9999px;left:-9999px;background-color:rgba(0,0,0,0.3);'>
<table+border='0'+cellspacing='0'+cellpadding='0'+style='width:100%25;height:100%25;'><tbody>
<tr><td+style='width:100%25;height:50%25;'>+</td></tr>
<tr><td+align='center'><img+id='cursor'+name='cursor'+src="images/wait.gif"></td></tr>
</tbody></table>
</div>|code-block|syntax|javascript|469369|然后是jQuery：|469370|function+waitCursor()
{
++++$('#wait').css({
++++++++'top'+:+'0px',
++++++++'left'+:+'0px',
++++++++'width'+:+'100%25',
++++++++'height'+:+'100%25'
++++++++});
}

function+defCursor()
{
++++$('#wait').css({
++++'top':+'-9999px',
++++'left'+:+'-9999px',
++++'width'+:+'0%25',
++++'height'+:+'0%25'
++++});|469371|和|469372|$(document).ajaxStart(function(){+waitCursor();+})
++++.ajaxComplete(function(){+defCursor();+})
++++.ajaxStop(function(){+defCursor();+});|469373|老派但也很简单。只是有个DIV里面有一张桌子该表只有to行。第一个是整个屏幕高度的50%25。第二个简单地将等待光标放在屏幕的中心。你总是可以将第一个图像的高度设置为45%25，或者屏幕高度的一半减去图像高度的一半。但正如我所说的--这只是一个简单的内部程序。问题是-这在所有浏览器上都有效，而不需要经历很多麻烦才能让它显示出来。我在其他主要网站上也看到过类似的东西。因此，很明显，其他人已经受够了浏览器在需要时不显示等待光标，这是事实-我记得看到过这种情况，并想知道复制它有多难。现在我知道了--一点也不难。|469374|玩得开心!|469375|entityMap^0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Z|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|10|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|11|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|12|8|@]|9|@]|A|$]]|$1|M|3|N|5|H|7|13|8|@]|9|@]|A|$I|J]]|$1|O|3|P|5|6|7|14|8|@]|9|@]|A|$]]|$1|Q|3|R|5|H|7|15|8|@]|9|@]|A|$I|J]]|$1|S|3|T|5|6|7|16|8|@]|9|@]|A|$]]|$1|U|3|V|5|6|7|17|8|@]|9|@]|A|$]]|$1|W|3|-4|5|6|7|18|8|@]|9|@]|A|$]]]|X|$]]

None of the answers provided here on Stack Overflow would work for me. I'm using the latest and greatest FireFox for development and others here use IE, Chrome, etc.... Every time I made a call to jQuery's AJAX nothing would happen and ONLY when the AJAX call came back - would the cursor change. Then it would be stuck in the wait cursor. So - the call is made, the server returned the new information, the information was displayed and then WHAM! Wait cursor displays and won't go away. I tried ALL of the answers given. The .ajaxXXXX stuff were being called. (I put an ALERT("HERE"); into the functions and those "HERE"'s showed up all of the time. Every single call. Very depressing.

So I went "Ok - new stuff doesn't work. What about going old school?" I know it is clunky to do so - but this isn't some great big program I'm working on. It's just a little editor so several people can edit our database at the same time. Never going to see the light of the internet. Only the intranet. :-) Anyway, this works and works terrifically. You need to provide your own wait cursor. I just grabbed one off of Google Images to use.

First - the HTML:

<pre><code>&lt;div id='wait' name='wait'
style='position:absolute;top:-9999px;left:-9999px;background-color:rgba(0,0,0,0.3);'&gt;
&lt;table border='0' cellspacing='0' cellpadding='0' style='width:100%;height:100%;'&gt;&lt;tbody&gt;
&lt;tr&gt;&lt;td style='width:100%;height:50%;'&gt; &lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td align='center'&gt;&lt;img id='cursor' name='cursor' src="images/wait.gif"&gt;&lt;/td&gt;&lt;/tr&gt;
&lt;/tbody&gt;&lt;/table&gt;
&lt;/div&gt;
</code></pre>

Then the jQuery:

<pre><code>function waitCursor()
{
 $('#wait').css({
 'top' : '0px',
 'left' : '0px',
 'width' : '100%',
 'height' : '100%'
 });
}

function defCursor()
{
 $('#wait').css({
 'top': '-9999px',
 'left' : '-9999px',
 'width' : '0%',
 'height' : '0%'
 });
</code></pre>

and

<pre><code>$(document).ajaxStart(function(){ waitCursor(); })
 .ajaxComplete(function(){ defCursor(); })
 .ajaxStop(function(){ defCursor(); });
</code></pre>

Old school but simple also. Just has a DIV with a table in it. The table has only to rows. The first one is 50% of the height of the entire screen. The second one simply centers the wait cursor on the screen. You could always make the height of the first one 45% or whatever half the height of the screen is minus half the height of the image. But as I said - this is just for a simple in-house program. The thing is - this works on all browsers without trying to jump through a lot of hoops to get it to show up. I've seen something similar on other major websites. So obviously others have gotten fed-up over the browsers not showing a wait cursor when needed and truth to tell - I remembered seeing this and wondered just how hard it would be to replicate. Now I know - it isn't hard at all.

Have fun!

blocks|key|685432|text|简单而容易的解决方案，只需将以下代码添加到您希望受到影响的每个页面：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|685433|$(document).ajaxStart(function(){+
++++$("body").addClass('ajaxLoading');
});
$(document).ajaxStop(function(){+
++++$("body").removeClass('ajaxLoading');
});|code-block|syntax|javascript|685434|和CSS：|685435|.ajaxLoading+{++
++cursor:+progress+!important;++
}++|685436|当然，您可以根据需要对其进行更改，但要想以一种简单有效的方式在每次ajax调用时显示加载光标，这就是可行的方法(至少，我会这样做)。|685437|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

Simple and easy solution, just add the following code to each page you want to be affected:

<pre><code>$(document).ajaxStart(function(){ 
 $("body").addClass('ajaxLoading');
});
$(document).ajaxStop(function(){ 
 $("body").removeClass('ajaxLoading');
});
</code></pre>

And the CSS:

<pre><code>.ajaxLoading { 
 cursor: progress !important; 
} 
</code></pre>

Of course, you can change this according to your needs, but for a simple effective way to display a loading cursor on every ajax call, this is the way to go (Or at least, the way I would do it).

blocks|key|685490|text|++$('html,+body').css("cursor",+"wait");++|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|685491|在调用AJAX之前使用以下代码|unstyled|685492|然后：|685493|++$('html,+body').css("cursor",+"default");+++|685494|在成功函数中|685495|示例：|685496|++$('html,+body').css("cursor",+"wait");+
+++++++++++++++$.ajax({
+++++++++++++++++++++++url://your+url++,
+++++++++++++++++++++++type:+//your+type+post+or+get+
+++++++++++++++++++++++dataType:+"html",
+++++++++++++++++++++++data:+//data+send+by+ajax
+++++++++++++++++++++++success:+function(returnData){
+++++++++++++++++++++++$('html,+body').css("cursor",+"default");
+++++++++++++++++++++++++++++++++++//any+other+actions+....
+++++++++++++++++++++++++++++++++++},
+++++++++++++++++++++++++++++++++++error:+function(e){
+++++++++++++++++++++++++++++++++++++alert(e);
+++++++++++++++++++++++++++++++++++}
++++++++++++++++++++++++++++++++});++++++|685497|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|T|8|@]|9|@]|A|$]]|$1|G|3|H|5|F|7|U|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|V|8|@]|9|@]|A|$B|C]]|$1|K|3|L|5|F|7|W|8|@]|9|@]|A|$]]|$1|M|3|N|5|F|7|X|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|Y|8|@]|9|@]|A|$B|C]]|$1|Q|3|-4|5|F|7|Z|8|@]|9|@]|A|$]]]|R|$]]

<pre><code> $('html, body').css("cursor", "wait"); 
</code></pre>

Use this code before calling AJAX

Then:

<pre><code> $('html, body').css("cursor", "default"); 
</code></pre>

In the success function 

Example:

<pre><code> $('html, body').css("cursor", "wait"); 
 $.ajax({
 url://your url ,
 type: //your type post or get 
 dataType: "html",
 data: //data send by ajax
 success: function(returnData){
 $('html, body').css("cursor", "default");
 //any other actions ....
 },
 error: function(e){
 alert(e);
 }
 }); 
</code></pre>

blocks|key|685547|text|$('html，body‘)光标(“.css”，"wait")；工作正常|type|unstyled|depth|inlineStyleRanges|entityRanges|data|685548|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

$('html, body').css("cursor", "wait"); 
is working perfectly

I want to change the mouse pointer to the "Wait" symbol when we run the AJAX call and return back to default pointer after completing the call. I have tried as follows but my problem is it's just working on Firefox until I dont click/press the mouse button. Here is my code:

<pre><code>function initializeAjax(url){
 $('html, body').css("cursor", "wait");

 try {
 if (url.substring(0,4) == ".mdf") {
 var database = window.location.pathname.slice(0,window.location.pathname.lastIndexOf('.mdf'));
 var url = database + url;
 }

 initRequest(url);
 returnedValues = null;
 req.onreadystatechange = returnedValues;
 nocache = Math.random();
 req.open("GET", url+"&amp;nocache = "+nocache, false);
 req.send(null);

 $('html, body').css("cursor", "auto");
 return req.responseText;
 }
 catch(err) {
 return "Error 8";
 }
}
</code></pre>

Could anyone please help how to change above to solve the problem soo that it shud work in Firefox and IE too.

Change Mouse pointer when ajax call

数据库

服务器

jQuery

我想在运行AJAX调用时将鼠标指针更改为"Wait“符号，并在完成调用后返回到默认指针。我尝试过如下操作，但我的问题是，在我不点击/按下鼠标按钮之前，它只能在Firefox上工作。下面是我的代码：function initializeAjax(url){    $('html, body').css("cursor",...

问在ajax调用时更改鼠标指针
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在ajax调用时更改鼠标指针EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在ajax调用时更改鼠标指针
EN