Classes conflict when i use Timer with updatePanal

Question

I'm trying to build asp.net application using updatePanal as this code :

      <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
                    <asp:Timer runat="server" id="Timer1" Interval="10000" OnTick="Timer1_Tick"></asp:Timer>

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
     <Triggers>
                <asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
            </Triggers>
    <ContentTemplate>

            <div class="col-xs-6 col-md-3">
                <div class="panel panel-default">
                    <div class="panel-body easypiechart-panel">
                        <h4>Humidity </h4>
                        <div   class="easypiechart" id="easypiechart-blue" data-percent="4" ><span class="percent">92%</span>
                        </div>
                                                                            <button class="btn btn-primary">Adjust Humidity</button><br /><br /><br />

                    </div>
                </div>
            </div>
        </ContentTemplate>
            </asp:UpdatePanel>

Before updating this is my div ! :

after updating it turns into this :

Why this happen ?

Answer 1

You probably have to call the javascript function that builds the easypiechart again when the timer does a tick.

protected void Timer1_Tick(object sender, EventArgs e) 
{
    ScriptManager.RegisterStartupScript(Page, Page.GetType(), "buildPie", "YourBuildPieFunction();", true);
}

UPDATE

First of all your code is incomplete. In the javascript you posted in the comments you have the line document.getElementById('percentH').innerText = percentage + "%";. But "percentH" does not exist. The <span> element must have that ID <span id="percentH" class="percent">92%</span>.

Second the piechart is not being build by that code. If you use https://rendro.github.io/easy-pie-chart/ or something similar, somewhere on the page there should be something like this:

$(function() {
    $('.easypiechart').easyPieChart({
        //your configuration goes here
    });
});

That is the part of javascript code that needs to be called by the ScriptManager.