Adding progress bar for file being downloaded using phonegap and Jquery

Question

I am trying to have a progress bar for download operation. Here is my code. I am not able to set the value in the progress bar even though i m able to get the value

<div id = "progressbar" class="progress progress-striped active" style="display:none"><div id="progress-label" class ="bar">Loading...</div></div>
<script>
        $(function() {
                    var progressbar;
        progressbar = $( "#progressbar" ),
        progressLabel = $( ".progress-label" );
        progressbar.progressbar({
            value: false,
            change: function() {
                progressLabel.text( progressbar.progressbar( "value" ) + "%" );
            },
            complete: function() {
                progressLabel.text( "Complete!" );
            }
        });
    });

            var ft = new FileTransfer();
            $("#progressbar").show();
            ft.onprogress = function(progressEvent) {
            perc = Math.floor((progressEvent.loaded / progressEvent.total) * 100);
            progressbar.progressbar("value", perc);
            }
 </script>

score 0 · Answer 1 · edited May 23 '17 at 12:11

0

I guess that

$( "#progressbar" ).val(perc);

does not work ?

This may be the correct syntax to update your progressbar:

$("#progressbar").progressbar({
    value: 35
});

According to this (and plenty more infos). You may try also another way.

edited May 23 '17 at 12:11

Community

1
1

answered May 27 '13 at 13:35

nicolallias

1,055
2
22
51

$( "#progressbar" ).val(perc); – madhukar kumar May 28 '13 at 05:28
no it did not :( its setting the value in the progress bar just once, same was the problem previously – madhukar kumar May 28 '13 at 13:55
Can you make a jsfiddle of this (do not forget to link the library in "External resources")? – nicolallias May 28 '13 at 14:58

whodeee · Answer 2 · 2013-05-28T19:59:38.170

0

I just tested this and this should work for you:

    var ft = new FileTransfer();
                $("#progressbar").show();
                ft.onprogress = function(progressEvent) {

                perc = Math.floor((progressEvent.loaded / progressEvent.total) * 100);

                $("#progressbar").progressbar({value:perc}); //changed this line

                }

edited May 28 '13 at 19:59

answered May 28 '13 at 18:48

whodeee

617
5
18

Thanks a lot for your help..will give it a try but for now i used an page loader. will post my results..thanks again – madhukar kumar May 30 '13 at 09:12

Adding progress bar for file being downloaded using phonegap and Jquery

2 Answers2

Linked