Saturday, 29 December 2012 13:55

how to show data when mouse is over a button using jquery ajax with progress image

Written by 
Rate this item
(0 votes)

you may want to show dynamic data from a page when
mouse is placed over a button.

also you will want to show progress image/animation
while the page data is retrieved.to achieve this the
best way is to use ajax.here i am going to show how
to that using jquery ajax in asp.net page.jquery made
things simpler and organized.

the follwing codes shows the codes to show data
from a page when mouse is over a button or anything.
also you will see the progress image while the
data from a aspx page is retrieved.then if you
put your mouse away from the button the data
will be vanished.you have seen this type of
behaviour in many places like when you place
mouse over a help link,the help data is displayed.

<head runat="server">
<title>Untitled Page</title>
<script type="text/javascript"
src="Script/jquery-1.4.2.js"></script>

<script type="text/javascript">
$(document).ready(function(){
$("#txt").ajaxStart(function(){
$("#loading").css("display","block");
});
$("#txt").ajaxComplete(function(){
$("#loading").css("display","none");
});
$("#cc").mouseover(function(){
$("#txt").load("test.aspx");
});
$("#cc").mouseout(function(){
$("#txt").load("test2.aspx");
});

});
</script></head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="s1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="u1" runat="server">
<ContentTemplate>

<div id="test" style="margin-top:200px;">
<div id="txt">data will be shown here</div>
<%--<button id="bb">Change Content1</button--%>
<asp:Button ID="cc" Height="30px" runat="server"
Text="change content2" />
<div id="loading" style="display:none;width:70px;
height:80px;position:absolute;top:50%;left:50%;
padding:2px;"><img src='images/LoadAnimation.png'
width="64" height="64" /><br />Loading..</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</form></body></html>

there are many ways to that

Read 1530 times
Super User

Email This email address is being protected from spambots. You need JavaScript enabled to view it.
Login to post comments