2

I realize there are a good number of progress bar related questions already present on SO. I browsed through many of them and was unable to get things working.

Simply put, I am developing a page in JSP and I want to use an animated progress bar within bootstrap to display while the calls are being made for the data.

HTML:

<div class="row-fluid"> <div class="span12 progress progress-striped active"> <div id="searchAnimation" class="bar" hidden="true"></div> </div> </div>

Servlet (Not sure if this part is relevant, but better safe than sorry):

@Override protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //String that gets returned as HTML StringBuilder returnAsHTML = new StringBuilder(); //See if the class is closed, has a lab, or is just a regular class for(ClassInfo classes : springClassListings) { //Class is full, style accordingly if(classes.getSectionMeetingInfo().contentEquals("LEC") && classes.getSectionEnrolled().contentEquals("0")) { returnAsHTML.append(closedClass(classes)); } else if(classes.getSectionMeetingInfo().contentEquals("LAB")) //These are labs, style accordingly { returnAsHTML.append(labClass(classes)); } else //These are normal classes without lab components { returnAsHTML.append(openClass(classes)); } } response.setContentType("text/html"); response.setCharacterEncoding("UTF-8"); response.getWriter().write(returnAsHTML.toString()); }

And my scripting:

//Serves up the data $('#btnData').click(function() { //THIS IS THE PROGRESS BAR $("#searchAnimation").show(); $.get('daoServlet', function(responseText) { $('#dataDisp').html(responseText); }); });

I get the idea, % the width of the progress bar by a where the $.get call is at in terms of getting the data. I just don't understand how to do it.

PS - I know my for/if in the doGet is a nasty anti pattern, I just haven't figured out a way around it yet.

Improve this question
4
  • It is possible to do what you want to do, however i'm pretty sure it's going to take way more than your going to be willing to implement ( and way more than it's worth ) to be able to set the progressbar's percent to the actual percent done that the request is. You're better off just using an animated gif. It would require either websockets or back and forth requests as well as changes to the server-side that allows other scripts to figure out how far along the process is and generate a %. Commented Jan 17, 2013 at 19:22
  • @KevinB Yes I had one implemented, I just didn't like it as much. Thanks for the honest answer though. Commented Jan 17, 2013 at 19:25
  • Basically, the problem you have to solve is you have to be able to calculate on the client how far long the server is in processing and returning the request. There is no built-in way of doing that in most cases, therefore either the process has to notify the client with it's progress (websockets for example) or the process needs to make that information available to subsequent requests that the client would then need to make (long polling) to get that value. Commented Jan 17, 2013 at 19:27
  • @KevinB Thanks for the in-depth response, even though I currently am not going to implement it, you gave me an understanding of how it works if I want to revisit it in the future. Commented Jan 17, 2013 at 19:30

1 Answer 1

Reset to default
1

I thought ajaxStart included percentage information in the event. But even if it doesn't its possible to hide/show the animated progress bar at 100% to indicate its loading something.

ajaxStart docs http://api.jquery.com/ajaxStart/

progress docs http://twitter.github.com/bootstrap/components.html#progress

If you load stuff that is not using ajax you can also throw the ajaxStart event to trigger your component to hide and show.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.