• 1

Read this first!

We do not monitor these forums. The forum is provided to exchange information and experience with other users ONLY. Forum responses are not guaranteed.

However, please submit a ticket if you have an active subscription and wish to receive support. Our ticketing system is the only way of getting in touch with RSJoomla! and receiving the official RSJoomla! Customer Support.

For more information, the Support Policy is located here.

Thank you!

TOPIC: Progress Bar?

Progress Bar? 11 years 4 months ago #7624

Is there a way to add a progress bar after they hit the submit button? I have a form with 4 image uploads and it takes about 45 seconds to submit. I don't want the viewer to think nothing is happening while it's working to upload. Thanks.
The administrator has disabled public write access.

Re:Progress Bar? 11 years 4 months ago #7627

  • octavian
  • octavian's Avatar
  • OFFLINE
  • RSJoomla! Official Staff
  • Posts: 771
  • Thank you received: 104
Hello,

Try the following:
- Put the loading "gif" image (You can use: www.ajaxload.info/ to generate your own animated image, I find it pretty useful) in a FreeText component. Use the following HTML code in the "Text" field:
<div id="loading" style="display: none">Please wait, we are processing your request <img src="path/to/your.gif" alt="" /></div>

- Add another FreeText component for the Javascript:
<script type="text/javascript">
function display_loading()
{
document.getElementById('loading').style.display = 'block';
}
</script>

- Finally, move to the Scripts section, and add this code to the "Script called on form display" area:
$formLayout = str_replace('<form method="post"','<form method="post" onsubmit="display_loading();"',$formLayout);

Let me know how this turns out :)
Please note: my help is not official customer support. To receive your support, submit a ticket by clicking here
Regards,
RSJoomla! Development Team
The administrator has disabled public write access.

Re:Progress Bar? 11 years 4 months ago #7631

It works perfectly and looks great. thanks.
The administrator has disabled public write access.

Re:Progress Bar? 10 years 8 months ago #9603

Pinsel wrote:
It's fine, but it isn't really a progress-bar which shows the exactly time.

While not a real progress bar, the animated gif is sufficient for my purposes. However I cannot get consistent results with the coding suggested.

I develop using an iMac and have no problems in that environment. The animated gif appears as an activity indicator during file uploads both in Safari and Firefox.

Unfortunately when testing my upload form using a PC running Windows XP I get varied results. With Firefox and Netscape 7.2 the animated gif displays and operates as expected during uploads. BUT - with Internet Explorer 7 the gif image appears but is not animated. It is useless for the purpose.

I added and additional Free Text field to the form which included an embedded copy of the animated gif so that it would be visible for the whole time the form is displayed. That showed and was animated while data were entered into the form fields. However, when the submit button was clicked the animation stopped. The image activated by the submit button appears but is also static as before. When the file upload is complete the associated gif disappears as normal and the additional permanent one re-starts its animation.

It seems that there is a conflict between the uploading process and gif animation with IE 7 or there is a problem with my coding.

I would greatly appreciate hearing from anyone who has had success with the animated gif during file upload using IE in a Win OS and a listing of the code used would be very helpful.

With thanks in advance, Bill.
The administrator has disabled public write access.

Re:Progress Bar? 10 years 8 months ago #9616

  • effone
  • effone's Avatar
  • OFFLINE
  • Fresh Boarder
  • Posts: 12
Tried to install the code bout nothing shows up when I star the upload.

I created 2 free text entries in my form and added the code to the Scripts section but nothing happens when I click on Submit. The file uplads just fine but there is no on screen gif as I had planned on.

Any thoughts would be appreciated.
Thanks
The administrator has disabled public write access.

Re:Progress Bar? 9 years 8 months ago #12635

  • xingu
  • xingu's Avatar
  • OFFLINE
  • Junior Boarder
  • Posts: 32
  • Thank you received: 1
Thanks, this is awesome. With large files this will help people know it's doing something.

However, I cannot get the gif to spin in IE 8. Which is weird because if I open the gif from my computer in IE it is spinning.

Any suggestions. With the majority of people still using this crappy browser it would be nice to get it spinning.

Thanks again, this rocks!
The administrator has disabled public write access.

Re:Progress Bar? 9 years 8 months ago #12717

  • xingu
  • xingu's Avatar
  • OFFLINE
  • Junior Boarder
  • Posts: 32
  • Thank you received: 1
Upon investigating this issue with IE, I have found the problem. Once again IE sucks. I found this.
IE assumes that the clicking of a link heralds a new navigation where the current page contents will be replaced. As part of the process for perparing for that it halts the code that animates the GIFs. I doubt there is anything you can do about it (unless you aren't actually navigating in which case use return false in the onclick event).

There were 2 solutions, but as I am not a coder I don't understand how to implement this. Could someone help. This is one of the few things I wish was included in the form component.

1.
The accepted solution did not work for me.
After some more research I came across this workaround, and it actually does work.
Here is the gist of it:
<script>
function showProgress() {
var pb = document.getElementById("progressBar");
pb.innerHTML = '<img src="./progress-bar.gif" width="200" height ="40"/>';
pb.style.display = '';
}
</script>

and in your html:
<input type="submit" value="Submit" onclick="showProgress()" />
<div id="progressBar" style="display: none;"><img src="./progress-bar.gif" width="200" height ="40"/></div>

So when the form is submitted the img tag is inserted which for some reason it is not effected by the ie animation issues.
Tested in Firefox, ie6, ie7 and ie8.

2.
IE assumes that the clicking of a link heralds a new navigation where the current page contents will be replaced. As part of the process for perparing for that it halts the code that animates the GIFs. I doubt there is anything you can do about it (unless you aren't actually navigating in which case use return false in the onclick event).
I tried the solution given by AnthonyWJones above by adding -

return false;

at the end of the script in the clicked link and it worked. Thanks!
The administrator has disabled public write access.

Re:Progress Bar? 9 years 2 months ago #14432

Works perfectly, thank you.
The administrator has disabled public write access.

Re:Progress Bar? 8 years 5 months ago #17406

  • rizalito
  • rizalito's Avatar
  • OFFLINE
  • Fresh Boarder
  • Posts: 1
HI, I tried using the proposed solution but I could not get it to work. Any tips?
The administrator has disabled public write access.

Re: Progress Bar? 8 years 4 months ago #17631

  • milosmilcom
  • milosmilcom's Avatar
  • OFFLINE
  • Fresh Boarder
  • Posts: 4
  • Thank you received: 1
As I'm using ajax validation, think that didn't exist when this topic started, this solution was partially helpful.
The problem is that the loading gif appears onsubmit (click) even if the form didn't validated and files didn't start uploading…

As I'm using jQuery, this example is done with jQuery and one page form. Will make some tests for multi-page forms or if somebody get how to obtain the variable, please post it.
EDIT: Multipage variable added

Add a Free Text field, and put this code inside:
<div id="loading" style="display: none;">
	Please wait, we are uploading the files <br /> 
	<img src="[CHANGE_THIS_TO_YOUR_PATH]/ajax-loader.gif" alt="" />
</div>
 
<script type="text/javascript">
/* <![CDATA[ */
jQuery(document).ready(function() {
 
	var formId 	= jQuery('form input[name="form[formId]"]').val(),
		form 	= rsfp_getForm(formId),
		page 	= '{page}';
 
	jQuery('#Submit').click( function () {
		var Valid = ajaxValidation(form, page);
		if (Valid) { 
			jQuery('#loading').css('display','block');
		}
	});
});
/* ]]> */
</script>

You can make your own loading gif and change style params for it, however, you need one gif for this example, use the link provided in the first answer.

Hope not missing something....
Last Edit: 8 years 4 months ago by milosmilcom.
The administrator has disabled public write access.
The following user(s) said Thank You: beth.ray

Re: Progress Bar? 8 years 3 weeks ago #19213

  • xingu
  • xingu's Avatar
  • OFFLINE
  • Junior Boarder
  • Posts: 32
  • Thank you received: 1
Still not working in IE

Anyone have a html5 solution or something??
The administrator has disabled public write access.

Re:Progress Bar? 7 years 11 months ago #20207

  • innoslov
  • innoslov's Avatar
  • OFFLINE
  • Fresh Boarder
  • Posts: 1
Hello Ocatvian, am having aproblem implemeting Ajax Loading gif when form is submited in my joomla form pls can u assist me to accomplish the... Just another Joomla beginner. Thanx in Advance.
The administrator has disabled public write access.

Progress Bar? 7 years 7 months ago #21871

  • xingu
  • xingu's Avatar
  • OFFLINE
  • Junior Boarder
  • Posts: 32
  • Thank you received: 1
Yes this would be very helpful. It seems no matter what directions I give people on waiting until the page refreshes and that tells you the uploads are complete they still think nothing is happening and give up or keep pressing the submit button.

I also don't get why they don't just give us the solution they use in the RSFiles uploader. Doesn't that have an upload progress indicator?
The administrator has disabled public write access.

Progress Bar? 7 years 1 month ago #24898

  • geral82
  • geral82's Avatar
  • OFFLINE
  • Fresh Boarder
  • Posts: 3
Thanks for all your information that benefit me.

I was having the problem mentioned by milosmilcom that the message was showing even before validation.

To solve this i did the following:

Instead of using a javascript function, i add this:

document.getElementById('loading').style.display = 'block';

in components/com_rsform/assets/js/script.js, after ajaxvalidation is true on line 182.

It will show like this aftwards:
	if (success == true) {
		try {
			document.getElementById('rsform_error_' + formId).style.display = 'none';
			document.getElementById('loading').style.display = 'block';
		}

This solved my ajax validation problem!
The administrator has disabled public write access.

Progress Bar? 7 years 6 days ago #25277

I still cannot get this to work. I have tried everything listed above... :(

Can someone please put a step-by-step guide as to how they got this working?

When the user clicks Submit, I want an animated gif that says "Processing your request." When the form is fully uploaded, it will bring them to a page that says "Thank you for your submission. An agent will be contacting you shortly." Right now, when the user clicks submit, the page just refreshes for a long period of time...which could be a problem for impatient users...

Thanks ahead of time.
The administrator has disabled public write access.

Progress Bar? 6 years 11 months ago #25652

  • grafik7
  • grafik7's Avatar
  • OFFLINE
  • Fresh Boarder
  • Posts: 1
Yes, it would be great if you could add a short step by step manual for implementing a progress bar.

I know that your rivals Bree... Forms have a progress bar implemented, but I want to stay with RS Joomla, because I'm very happy with the components and the support.

Thank you!
Fabrizio
The administrator has disabled public write access.

Re:Progress Bar? 6 years 5 months ago #27479

  • beth.ray
  • beth.ray's Avatar
  • OFFLINE
  • Fresh Boarder
  • Posts: 4
can't get either to work in Safari 7.0.3

the first one worked bury only if I stop the upload - if I hit the x in the browser url bar, I see it, but not when the file is actually uploading.

the second option gives no indication of where to add the scripts, but after several tries in different locations, it still doesn't work
The administrator has disabled public write access.

Re: Progress Bar? 6 years 5 months ago #27480

  • beth.ray
  • beth.ray's Avatar
  • OFFLINE
  • Fresh Boarder
  • Posts: 4
the message appears, but the animation doesn't....animate. It's static (Safari 7, mac)
The administrator has disabled public write access.

Re:Progress Bar? 4 years 1 month ago #35726

octavian wrote:
Hello,

Try the following:
- Put the loading "gif" image (You can use: www.ajaxload.info/ to generate your own animated image, I find it pretty useful) in a FreeText component. Use the following HTML code in the "Text" field:
<div id="loading" style="display: none">Please wait, we are processing your request <img src="path/to/your.gif" alt="" /></div>


- Add another FreeText component for the Javascript:
<script type="text/javascript">
function display_loading()
{
document.getElementById('loading').style.display = 'block';
}
</script>

- Finally, move to the Scripts section, and add this code to the "Script called on form display" area:
$formLayout = str_replace('<form method="post"','<form method="post" onsubmit="display_loading();"',$formLayout);

Let me know how this turns out :)

Hello octavian!
your code works but does not work if you have enabled ajax validation
Can you help?
The administrator has disabled public write access.

Re:Progress Bar? 3 years 7 months ago #36615

  • lukasm
  • lukasm's Avatar
  • OFFLINE
  • Fresh Boarder
  • Posts: 1
I have the same problem.
Is it possible to show the percentage of downloads?
Last Edit: 3 years 7 months ago by lukasm.
The administrator has disabled public write access.
  • 1

Read this first!

We do not monitor these forums. The forum is provided to exchange information and experience with other users ONLY. Forum responses are not guaranteed.

However, please submit a ticket if you have an active subscription and wish to receive support. Our ticketing system is the only way of getting in touch with RSJoomla! and receiving the official RSJoomla! Customer Support.

For more information, the Support Policy is located here.

Thank you!