Calling div run at server from backend not working with update panel?

Question

I built the search logic with textbox search. However, While I search and the query is being executed I want the spinner to run while the results are fetched.

Here's my code : -

I tried both way but the spinner does not show.

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
            <asp:UpdatePanel ID="UpdatePanel1" runat="server" ClientIDMode="Inherit" UpdateMode="Always">
        <ContentTemplate>
        <asp:TextBox runat="server" ID="Searchtext" OnTextChanged="Searchtext_TextChanged" AutoPostBack="true"></asp:TextBox>
        <div id="spinner" runat="server">
        <img src="././spinner.gif/>
        <div>
        </ContentTemplate>
            </asp:UpdatePanel>



    <script type="text/javascript">
             function show()
            {
                $('#spinner').css("display", "block");
            }
</script>

    protected void Searchtext_TextChanged(object sender, EventArgs e)
    {
          spinner.Visible = true;
      searchLogic();
      spinner.Visible = false;

    }

Other way : -

 <div id="spinner" style="display:none;">
            <img src="././spinner.gif/>
            <div>

public void searchLogic()
    {
        sqlLogic(); // Queries and Results
    }

    protected void Searchtext_TextChanged(object sender, EventArgs e)
    {
          ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "MyFunction", "show()", true);
      searchLogic(); 

    }

If I set run at server or not, when I search it shows waiting in chrome. But spinner is not fired. What I am doing wrong?

Answer 1

I realized that the best way to solve it using Asp:UpdateProgress and I solved it. Thanks op's.