Jquery progress bar implementation for JSP/Liferay

I'm quite new to JSP/Liferay portlet development and I'm trying to add a progress bar using jQuery, I found this question but wasn't very specific to how it will be done using AJAX.

I was wondering if anyone can point me in the right direction to help me get started.

thanks.

EDIT:

I used JSON simple, and manage to make some changes but I am getting a bad request(error code 400 when using fire bug) and a 404 not found on my JS

below is my code:

public void processAction(
        ActionRequest actionRequest, ActionResponse actionResponse)
    throws IOException, PortletException {

//some code here


    this.generateJSON(actionRequest, actionResponse);//manual call the method?

 public void generateJSON(ActionRequest actionRequest, ActionResponse actionResponse)
    throws IOException, PortletException {
        try{
                        //just want to see a progress bar so do static for now...
            JSONObject obj=new JSONObject();
            obj.put("percent",new Integer(30));
            StringWriter out = new StringWriter();
            obj.writeJSONString(out);
            String jsonText = out.toString();
        }catch(Exception ex){
            System.out.print(ex);
        }
        }
    }//end of class

JS here

    function checkStatus(){
    $.ajax({
          type: 'POST',
          //url: '<%=request.get开发者_运维问答ContextPath()%>/checkStatusServlet',
          url: '<%=request.getContextPath()%>/generateJSON',
          dataType: 'json',
          success: function( data )
          {
            alert(data.statusPercent);  
            var statusPercent = data.percent;
            //Update your jQuery progress bar   
            $( "#progressbar" ).progressbar({value: statusPercent});

          }
    });
    //below works and alert is being called...
    /*for (i=0;i<=5;i++)
    {
         $( "#progressbar" ).progressbar({value: i+10});
    }
    alert('got here');
    */
}

HTML/JSP

<%@ page import="javax.portlet.PortletPreferences" %>
<portlet:defineObjects/>
<portlet:renderURL var="resourceUrl"></portlet:renderURL>
<!-- Javascript files -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="js/main.js"></script>
<!-- end of Java script files -->
<script type="text/javascript">
    setTimeout('checkStatus()',1000);
</script>
<div id="progressbar"></div>

You can't generate JSON in processAction. This method is meant to change the portlet state, but not generate output. The portal-way to accomplish what you need it to use the serveResource method/lifecycle-phase: you get the URL for this from the portal ( < portlet:resourceURL / >). Specifically you shouldn't create them yourself.

An alternative (but not the portal way) is to use a servlet - but in this you don't have the portlet state that you might need.

And you might want to use < portlet:namespace / > to disambiguate your global names - or use proper namespacing - because you can never say how many times your portlet will be placed on a page.

(added spaces to jsp-tags so that they don't get eaten by markup)

Short: Read about resource-serving for portlets, this will most likely solve your underlying problem: With the code you give above you won't be able to access your JSON at all - no matter what you do on the JS side.

The answer really depends on your specific needs. Are you trying to display how much time is actually left for some task, or how much time till a page loads or what?

You could poll from the client and update the progress bar in the browser depending on how much is left to process. A simple jQuery ajax example:

function checkStatus
{
    $.ajax({
          type: 'POST',
          url: '<%=request.getContextPath()%>/checkStatusServlet',
          dataType: 'json',
          success: function( data )
          {
            var statusPercent = data.statusPercent;

            //Update your jQuery progress bar   
            $( "#progressbar" ).progressbar({value: statusPercent });
          }
    });
}

Then you can simply poll this function till its done

setTimeout('checkStatus()' 1000);

Of course you will also need to construct a servlet or struts action or portlet to handle the processing on the server, and return the appropriate status for the task.

EDIT:

Use the JSON library From your servlet or action. (code below is from struts2 action)

public String checkStatus()
{       
    try 
    {
        Integer percentDone = 50;  //Calculate how much time is left

        JSONObject statusResult = new JSONObject();

        statusResult.put("statusPercent", percentDone);

        //Obtain HttpServletResponse.. 
        //implementation depends on your framework. 
        //PortletResponse should work too.
        PrintWriter out = this.response.getWriter();
        out.write( statusResult.toString(4) );
        out.flush();
        out.close();
    }
    catch (IOException e) {} 
    catch (JSONException e) {}

    return null;
}