Forum | Appery.io

How to add a progress bar for uploading file with restful. (not tiggzi DB)

After i added the jQuery UI for the progress bar, the test mode will not working anymore. Is there any other way adding the progress bar in tiggzi?

Hello! You can do that using JS https://www.google.com.ua/search?q=js...

Tiggzi uses jqueryui by default, that's why after you added jqueryui it stops working.
You have to use just progressbar from jqueryui. Here is the CSS code

code.ui-widget-content { border: 1px solid #aaaaaa/{borderColorContent}&#47 background: #ffffff/{bgColorContent}/ url(images/ui-bg_flat_75_ffffff_40x100.png)/{bgImgUrlContent}/ 50%/{bgContentXPos}/ 50%/{bgContentYPos}/ repeat-x/{bgContentRepeat}&#47 color: #222222/{fcContent}&#47 }
.ui-widget-header { border: 1px solid #aaaaaa/{borderColorHeader}&#47 background: #cccccc/{bgColorHeader}/ url(images/ui-bg_highlight-soft_75_cccccc_1x100.png)/{bgImgUrlHeader}/ 50%/{bgHeaderXPos}/ 50%/{bgHeaderYPos}/ repeat-x/{bgHeaderRepeat}&#47 color: #222222/{fcHeader}&#47 font-weight: bold; }

.ui-progressbar { height:2em; text-align: left; overflow: hidden !important; }
.ui-progressbar .ui-progressbar-value {margin: -1px; height:100%; }
/code

Here is the JS code

code(function( $, undefined ) {

$.widget( "ui.progressbar", {
version: "1.9.0",
options: {
value: 0,
max: 100
},

min: 0,

create: function() {
this.element
.addClass( "ui-progressbar ui-widget ui-widget-content ui-corner-all" )
.attr({
role: "progressbar",
"aria-valuemin": this.min,
"aria-valuemax": this.options.max,
"aria-valuenow": this.value()
});

this&#46;valueDiv = $( "<div class='ui-progressbar-value ui-widget-header ui-corner-left'><&#47;div>" )
&#46;appendTo( this&#46;element );

this&#46;oldValue = this&#46;value();
this&#46;refreshValue();
},

_destroy: function() {
this&#46;element
&#46;removeClass( "ui-progressbar ui-widget ui-widget-content ui-corner-all" )
&#46;removeAttr( "role" )
&#46;removeAttr( "aria-valuemin" )
&#46;removeAttr( "aria-valuemax" )
&#46;removeAttr( "aria-valuenow" );

this&#46;valueDiv&#46;remove();
},

value: function( newValue ) {
if ( newValue === undefined ) {
return this&#46;_value();
}

this&#46;_setOption( "value", newValue );
return this;
},

setOption: function( key, value ) {
if ( key === "value" ) {
this&#46;options&#46;value = value;
this&#46;refreshValue();
if ( this&#46;value() === this&#46;options&#46;max ) {
this&#46;trigger( "complete" );
}
}

this&#46;_super( key, value );
},

_value: function() {
var val = this&#46;options&#46;value;
&#47;&#47; normalize invalid value
if ( typeof val !== "number" ) {
val = 0;
}
return Math&#46;min( this&#46;options&#46;max, Math&#46;max( this&#46;min, val ) );
},

percentage: function() {
return 100 * this&#46;value() &#47; this&#46;options&#46;max;
},

refreshValue: function() {
var value = this&#46;value(),
percentage = this&#46;percentage();

if ( this&#46;oldValue !== value ) {
this&#46;oldValue = value;
this&#46;_trigger( "change" );
}

this&#46;valueDiv
&#46;toggle( value > this&#46;min )
&#46;toggleClass( "ui-corner-right", value === this&#46;options&#46;max )
&#46;width( percentage&#46;toFixed(0) + "%" );
this&#46;element&#46;attr( "aria-valuenow", value );
}
});

})( jQuery );/code

To turn it on use Panel component with Type=div.

Run next JS (you can put it on page Load - it depends on when you want to show progress bar)

codeTiggzi( "panelName" )&#46;progressbar({
value: 0
});/code

panelName - name of your Panel component where progressbar will be shown
to change it's position you can use code

Tiggzi("panelName").progressbar( "value", 32 );

where 32 - new progressbar position

Great!~

It is necessary to add a custom CSS, JS to the page?

Using:

Appery("panelName").progressbar( "value", 32 );

and nothing happens, doesn't work.

Some help?

Hello! It is necessary to add a custom CSS, JS to the page? - yes, please follow the instruction above.

Sorry for the inconvenience, but how do I add a CSS or a JS to the page?.

I cannot edit the HTML code of my page and I cannot find how to do this.

It is necessary to "export" the project and manually change the sourcecode in eclipse?

Click Create new--CSS/JavaScript. Please take a look at the screenshot

Hi there,

I need to implement a progress bar at the loading of one page, and it should last about 5 seconds (so it doesn't matter if stuff is actually loaded duriing the meantime or not).

So I read your answer above and
1) I tried putting this as an event that triggers at page load :

Appery( "progressbar_div" ).progressbar({
value: 0
});

2) I put the whole js code you gave above in a new javascript page named "progressbar".

3) And my html code on the page is :

But it doesn't work ;(
What have I done wrong ? .

I m reallly stuck right now... Thanks a lot for your answer !

Hi Berenice,

Please specify did you pass all instructions in Marinas post?

I mean you need to add JS and CSS.

Also you should have "progressbar_div" div component on your page.

Regards.

Hi, thanks for your answer. Yes I added JS (and CSS), as I said in #2 above.
My html code somehow didn't paste on my last post, here it is :

So what is wrong here ?