Search code examples
javascriptjquerypythoncherrypy

Call JQuery on load using Python CherryPy

I have the following JQuery function which I want to be called when the page loads.

class Fitbit(object):
@cherrypy.expose
def index(self):

    currentDate = (time.strftime("%d/%m/%Y"))

    return """<html>
    <head>
        <title>Fitbit</title>
        <link href="/static/css/fitbit.css" rel="stylesheet">
        <script>
           $(document).ready(function(){
               $('.bar-percentage[data-percentage]').each(function () {
          var progress = $(this);
          var percentage = Math.ceil($(this).attr('data-percentage'));
          $({countNum: 0}).animate({countNum: percentage}, {
            duration: 2000,
            easing:'linear',
            step: function() {
              // What todo on every count
            var pct = '';
            if(percentage == 0){
              pct = Math.floor(this.countNum) + '%';
            }else{
              pct = Math.floor(this.countNum+1) + '%';
            }
            progress.text(pct) && progress.siblings().children().css('width',pct);
            }
          });
        });
        });

        </script>
    </head>

    <body>

    <h4>{0}</h4>

                <article class="infoWindow">
                    <article class="infoLogo"><img alt="backDate" src="/static/images/footprint.png" width="40" height="40"/>Steps</article>
                    <div id="bar-1" class="bar-main-container azure">
                        <div class="wrap">
                            <div class="bar-percentage" data-percentage="38"></div>
                            <div class="bar-container">
                            <div class="bar"></div>
                        </div>
                    </div>
                  </div>
                </article>
    </body>

    </html>""" .format(currentDate)

    #return html
    index.exposed = True

if __name__ == '__main__':
 conf = {
 '/': {
     'tools.sessions.on': True,
     'tools.staticdir.root': os.path.abspath(os.getcwd())
 },
 '/static': {
     'tools.staticdir.on': True,
     'tools.staticdir.dir': './public'
 },
 '/images': {'tools.staticdir.on': True,
    'tools.staticdir.dir': './public'}
 }
 cherrypy.quickstart(Fitbit(), '/', conf)

This is within my HTML which is in my .py file using return """<html> etc. I am using CherryPy to do this, and I need to find how to call this function when the page loads. All examples I have found are called on a button click, which isn't any help to me, especially as I am new to this and not sure how to do similar for on load. Thanks

Solution

  • This will call init on ready...

    $('document').ready(init);
        function init(){
            $('.bar-percentage[data-percentage]').each(function () {
            var progress = $(this);
            var percentage = Math.ceil($(this).attr('data-percentage'));
            $({countNum: 0}).animate({countNum: percentage}, {
                duration: 2000,
                easing:'linear',
                step: function() {
                // What todo on every count
                    var pct = '';
                    if(percentage == 0){
                        pct = Math.floor(this.countNum) + '%';
                    }else{
                        pct = Math.floor(this.countNum+1) + '%';
                    }
                progress.text(pct) && progress.siblings().children().css('width',pct);
                }
            });
        });
    };

    Hope this helps!