How to add a progress bar for uploading file in tiggzi

Tue Feb 26, 2013 7:23 am

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?

Tue Feb 26, 2013 9:30 am

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.valueDiv = $( "<div class='ui-progressbar-value ui-widget-header ui-corner-left'></div>" )
.appendTo( this.element );

this.oldValue = this.value();
this.refreshValue();
},

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

this.valueDiv.remove();
},

value: function( newValue ) {
if ( newValue === undefined ) {
return this._value();
}

this._setOption( "value", newValue );
return this;
},

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

this._super( key, value );
},

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

percentage: function() {
return 100 * this.value() / this.options.max;
},

refreshValue: function() {
var value = this.value(),
percentage = this.percentage();

if ( this.oldValue !== value ) {
this.oldValue = value;
this._trigger( "change" );
}

this.valueDiv
.toggle( value > this.min )
.toggleClass( "ui-corner-right", value === this.options.max )
.width( percentage.toFixed(0) + "%" );
this.element.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" ).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

Tue Feb 26, 2013 10:10 am

Great!~

Mon Apr 29, 2013 2:27 pm

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?

Mon Apr 29, 2013 4:20 pm

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

Mon Apr 29, 2013 4:56 pm

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?

Mon Apr 29, 2013 5:03 pm

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

Sat Jul 19, 2014 12:18 pm

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 !

Mon Jul 21, 2014 1:49 am

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.

Mon Jul 21, 2014 5:41 pm

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 ?