使用jquery在div中显示加载图标

发布于 2024-09-27 22:04:15 字数 504 浏览 4 评论 0原文

我有一个这样的 div 标签，所以

<div id="mainHolder">

<span>asjlkdasjdka</span>
<img src='image.jpg' />
<input type="button" id="myButton" value="Click me" onclick="callWcf();" />

</div>

我使用 jquery 进行客户端开发，单击 div 中的按钮将执行一些服务器端处理。

我有 callWcf 函数进行 wcf 调用，并具有成功和失败函数。

我想要做的是，单击按钮后，隐藏 mainHolder div 的内容并将其替换为旋转图像，以向用户显示正在进行处理。然后当完成后，无论成功还是失败，重新显示div mainHolder当前的内容。

有人帮我实现这个吗？我想要一个通用功能，也许我可以与其他 div 和场景重用。

谢谢。

原文

I have a div tag like so

<div id="mainHolder">

<span>asjlkdasjdka</span>
<img src='image.jpg' />
<input type="button" id="myButton" value="Click me" onclick="callWcf();" />

</div>

I am using jquery for my client side development and clicking the button in the div will do some server side processing.

I have callWcf function makes the wcf call and has a succeed and failure function.

What I want to do is that once the button is clicked, hide the content of the mainHolder div and replace it with a spinning image to show the user there is processing happening. And then when its finished, be it success or failure, re show the current content of the div mainHolder.

Anyone help me out implementing this? I would like a general function maybe that I could reuse with other divs and scenarios.

Thanks.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

捶死心动 2024-10-04 22:04:15

在主容器内创建两个额外的 div 并为其指定内容 id。
另一个 div 是 spinner 的 id：（根据需要使用 css 样式以及隐藏）

然后将代码放置在 dom 准备功能下的 JS 文件中。

$("#content").bind("ajaxStart", function(){

   // Show Spinner
   $('#content').hide();
   $('#spinner').show();

}).bind("ajaxComplete", function(){

   // Hide Spinner
   $('#content').show();
   $('#spinner').hide();

})

Create two extra divs inside main holder and give it an id of content.
and the other div an id of spinner: (style with css as needed as well as hidden)

Then place code below in JS file under dom ready function.

$("#content").bind("ajaxStart", function(){

   // Show Spinner
   $('#content').hide();
   $('#spinner').show();

}).bind("ajaxComplete", function(){

   // Hide Spinner
   $('#content').show();
   $('#spinner').hide();

})

回复收藏 0 原文

~没有更多了~