I'm trying to display a loading animation and background color while a treeview is populated by a webservice. I'm implementing the ajax incremental display pattern by just loading a div for a menu and the Loading animation in it's own div at the start. The java script calls a ajax web service to programmatically populate a treeview which I want to display in the menu div. The only thing I don't know how to do is get the populated Treeview control from the webservice to the actual website.
Here is my javascript located in the head of the menu.aspx page:
<script type="text/javascript" language="JavaScript">
<!--
function pageLoad() {
MenuService.LoadMenu(OnComplete,OnTimeOut,OnError);
}function OnComplete(result){
document.getElementById("menuLoad").style.display="none";//erases loading Message
}
function OnTimeOut(result){
alert("Timeout")
}function OnError(result){
alert("Error")
}
// --></script>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
<Services>
<asp:ServiceReference Path="MenuService.asmx" />
</Services>
</asp:ScriptManager>
<div id="menuLoad"><IMG src="Resources/Images/ajax-loader-Menu.gif" /> Loading Menu...</div>
<div id="menu">
</div>
</form>
Can anyone help with my problem? I doubt it is too complex, I'm just very new at using Ajax and web services. Should me web service return the treeview? or what? Is there a better way to do what I'm intending?
Thanks for the help in advance class='cmt'>//erases loading Message } function OnTimeOut(result){ alert("Timeout") } function OnError(result){ alert("Error") }// -->
I found any easier way to do this which out having to use a webservice, It initially loads a Page that Contains the Loading message and graphic and then using javascript to load the actual menu which is a completely different aspx page. The new page just loads the nodes of the treeview in the code behind.
MenuLoading.aspx:
<head runat="server"> <title>Menu</title> <link href="Resources/Css/Site.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" language="JavaScript"><!-- function pageLoad() { document.location.href="Menu.aspx" } // --></script></head><body onload="pageLoad()"> <form id="form1" runat="server"> <div id="menuLoad"><IMG src="Resources/Images/ajax-loader-Menu.gif" /> Loading Menu...</div> </form></body>menu.aspx:
<head runat="server"> <title>Menu</title> <link href="Resources/Css/Site.css" rel="stylesheet" type="text/css" /></head><body> <form id="form1" runat="server"> <div id="menu"> <asp:TreeView ID="TreeView1" runat="server" ExpandDepth="1" ImageSet="XPFileExplorer" ShowLines="True" NodeIndent="5" OnSelectedNodeChanged="TreeView1_SelectedNodeChanged"> <HoverNodeStyle ForeColor="White" BackColor="#47678E" /> <LeafNodeStyle ImageUrl="Resources/Images/Grid.bmp" HorizontalPadding="2px" /> <NodeStyle Font-Names="Tahoma" Font-Size="8pt" ForeColor="Black"/> </asp:TreeView> </div> </form></body>Hopefully I clearly explained my solution.
No comments:
Post a Comment