Question

我意识到SO上已经存在大量与进度条相关的问题。我浏览了很多人并且无法让事情发挥作用。

简单地说，我正在JSP中开发一个页面，我想在引导程序中使用动画进度条来显示，同时调用数据。

HTML：

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

Servlet（不确定这部分是否相关，但比抱歉更安全）：

@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());
}

我的脚本：

//Serves up the data
$('#btnData').click(function() {

    //THIS IS THE PROGRESS BAR
    $("#searchAnimation").show();

    $.get('daoServlet', function(responseText) {
        $('#dataDisp').html(responseText);
    });

});

我得到了这个想法，％进度条的宽度是$ .get调用在获取数据方面所处的位置。我只是不明白该怎么做。

PS - 我知道我的for / if在doGet中是一个讨厌的反模式，我还没有找到解决方法。

Answer 1

我认为ajaxStart包含了事件中的百分比信息。但即使它无法隐藏/显示100％的动画进度条以指示其加载的东西。

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

进度文档 http://twitter.github.com/bootstrap/components.html#progress

如果你加载了不使用ajax的东西，你也可以抛出ajaxStart事件来触发你的组件隐藏和显示。

使用$ .get的Bootstrap进度条

1 个答案: