CODEWITHSUNDEEP
javascriptjqueryasp.net
Antony Raj
Antony Raj

Reputation: 79

Asp Update Panel with javascript

I have created a chart using jquery and I placed the div tag in the update panel. And whenever the panel is updating the chart is disappeared. My code

 $(document).ready(function () { 
    $("#test-circle").circliful({
        animation: 1,
        animationStep: 5,
        animateInView: true,
        foregroundBorderWidth: 15,
        backgroundBorderWidth: 15,
        percent: document.getElementById("<% =lbl.ClientID%>").innerHTML,
        text: document.getElementById("<% =lbl.ClientID%>").innerHTML+'%',
        textSize: 28,
        textStyle: 'font-size: 12px;',
        textColor: '#fff',

    });

});

Now, what should I want to do???

Upvotes: 2

Views: 123

Answers (1)

Aristos
Aristos

Reputation: 66641

After the UpdatePanel updates, the DOM have change, the JavaScript is not work for that part any more, so you need to re-initialize it.

You do that with the tools that the update panel gives you. One way is to use the pageLoad() javascript function

function pageLoad()
{
    // init here your javascript
    // This is called when the page load first time
    //  and called again each time you have an Update inside an UpdatePanel
}

Some other way is to initialize the EndRequest like this

<script type="text/javascript"> 
   $(document).ready(function () {
       var prm = Sys.WebForms.PageRequestManager.getInstance();    
       prm.add_initializeRequest(InitializeRequest);
       prm.add_endRequest(EndRequest);

       // Place here the first init
       initGraph();
    });        

    function InitializeRequest(sender, args) {
    }

    function EndRequest(sender, args) {
       // after update occur on UpdatePanel re-init what you need
       initGraph();
    }

    function initGraph() {
        $("#test-circle").circliful({
            animation: 1,
            animationStep: 5,
            animateInView: true,
            foregroundBorderWidth: 15,
            backgroundBorderWidth: 15,
            percent: document.getElementById("<% =lbl.ClientID%>").innerHTML,
            text: document.getElementById("<% =lbl.ClientID%>").innerHTML+'%',
            textSize: 28,
            textStyle: 'font-size: 12px;',
            textColor: '#fff',
        });
    }
</script>

reference : https://msdn.microsoft.com/en-us/library/bb386417%28v=vs.100%29.aspx?f=255&MSPPError=-2147217396

One extra note. In the InitializeRequest I usually clears any javascript handler or any timer that may running, just before change the content.

Upvotes: 2

Related Questions