UpdateProgress not displaying when button is clicked

Question

I have a UpdatePanel inside the UpdatePanel I have "li" and "href" for navigating to another page. After the UpdatePanel I have the updateprogress but it does not work when the "li" gets clicked. I user the UpdateProgress throughout my code for different types of UpdatePanels and it all works the only thing I cannot get to work is if the button or "li" "href" is clicked it does not load the image. Here is my code, What am I missing?

<asp:UpdatePanel ID="upnavcontainer" runat="server">
    <ContentTemplate>
        <div id="navcontainer" 
            style="border-style: outset; border-width: thin; background-color: #663300; height: 30px; ">                
            <ul id="navlist" runat="server">
                <li runat ="server" id="Home" >
                    <a href='<%= ResolveUrl("~/Default.aspx") %>' title="Home"><span>Home</span></a></li>            
            <%
                if (_ApplicationAccess("Diabetes")) {
                %>
                <li runat ="server" id="Diabetes">
                    <a id="current" href='<%= ResolveUrl("~/Home/Home.aspx") %>' title="Diabetes"><span>Diabetes</span></a></li> 
                <%
                }
            %>     
            <%
                if (_ApplicationAccess("Dashboard")) {
                %>
                <li runat ="server" id="Dashboard">
                    <a href='<%= ResolveUrl("~/Dashboard/Default.aspx") %>' title="Dashboard"><span>Dashboard</span></a></li> 
                <%
                }
            %>       
            </ul>
        </div>
    </ContentTemplate>
</asp:UpdatePanel>
<asp:updateprogress associatedupdatepanelid="upnavcontainer" id="upProgessNav" runat="server">
    <progresstemplate>
        <div id="progressBackgroundFilter"></div>
        <div id="processMessage">
                <img alt="Loading" src="App_Themes/Sugar2006/images/ajax-loader.gif" />
        </div>
    </progresstemplate>
</asp:updateprogress>

Answer 1

What am I missing?

The problem here is that you use direct writes on the web page using the <%= %> inside the UpdatePanel.

When you use UpdatePanel, the update needs to be done all on code behind, or else fail, and the reason for that is because on postback he can run only the code behind and can make the render update only by this way.

So to make it work remove the <%= %> logic on the aspx part of the page and change them with literals that you render on code behind.

Eg. Replace all this part with

 <%
   if (_ApplicationAccess("Diabetes")) {
  %>
   <li runat ="server" id="Diabetes">
      <a id="current" href='<%= ResolveUrl("~/Home/Home.aspx") %>' 
         title="Diabetes"><span>Diabetes</span></a></li> 
  <%
  }
 %>     

with

<asp:literal run="server" id="txtDiabetes" />

and on code behind.

if (_ApplicationAccess("Diabetes")) {
    // render here the output
    txtDiabetes.Text = string.format("<li id=\"Diavetes\" ..... >", ResolveUrl("~/Home/Home.aspx"));
}