[jboss-user] [JBoss Portal] - Re: auto refresh a portlet

[aamonten]

HI, I made it work based on some info found at  http://www.javapassion.com and the AjaxPortlet at http://labs.jboss.com/portletswap. What I had to do was to create a Portlet and a Servlet that generate the same response. Initially  it is my portlet that generate the response, then with ajax I request for the Servlet to make the refresh automagically.
Sang Shin gets in deeper details at http://www.javapassion.com/ajaxcodecamp/#PortletsPortals_and_Ajax. I used the AjaxPortlet to figure out the URL of the Servlet.

This is the JSP that the portlet calls, and then the magic begins:


  | <%@page contentType="text/html"%>
  | <%@page pageEncoding="UTF-8"%>
  | 
  | <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
  | 
  | <%-- Uncomment below lines to add portlet taglibs to jsp
  | <%@ page import="javax.portlet.*"%>
  | <%@ taglib uri="http://java.sun.com/portlet" prefix="portlet"%>
  | 
  | <portlet:defineObjects />
  | <%PortletPreferences prefs = renderRequest.getPreferences();%> 
  | --%>
  | 
  | <script type="text/javascript">
  |     var req;
  |     var target;
  |     var isIE;
  | 
  |     // (3) JavaScript function in which XMLHttpRequest JavaScript object is created.
  |     // Please note that depending on a browser type, you create
  |     // XMLHttpRequest JavaScript object differently.  Also the "url" parameter is not
  |     // used in this code (just in case you are wondering why it is
  |     // passed as a parameter).
  |     //
  |     
  |     
  |     function initRequest(url) {
  |         //console.log("initRequest(%s) is called", url);
  |         //alert("initRequest(" + url + ") is called");
  |         if (window.XMLHttpRequest) {
  |             req = new XMLHttpRequest();
  |         } else if (window.ActiveXObject) {
  |             isIE = true;
  |             req = new ActiveXObject("Microsoft.XMLHTTP");
  |         }
  |     }
  | 
  |     // (2) Event handler that gets invoked whenever a user types a character
  |     // in the input form field whose id is set as "userid".  This event
  |     // handler invokes "initRequest(url)" function above to create XMLHttpRequest
  |     // JavaScript object.
  |     //
  |     
  |     
  |     function getNumbers() {
  |         var url = "/MostTransactionsPortlet/MostTransactionServlet";
  |         // Invoke initRequest(url) to create XMLHttpRequest object
  |         initRequest(url);
  | 
  |         // The "processRequest" function is set as a callback function.
  |         // (Please note that, in JavaScript, functions are first-class objects: they
  |         // can be passed around as objects.  This is different from the way
  |         // methods are treated in Java programming language.)
  |         req.onreadystatechange = processRequest;
  |         req.open("GET", url, true); 
  |         req.send(null);
  |     }
  | 
  |     // (4) Callback function that gets invoked asynchronously by the browser
  |     // when the data has been successfully returned from the server.
  |     // (Actually this callback function gets called every time the value
  |     // of "readyState" field of the XMLHttpRequest object gets changed.)
  |     // This callback function needs to be set to the "onreadystatechange"
  |     // field of the XMLHttpRequest.
  |     //
  |     
  |     
  |     function processRequest() {
  |         if (req.readyState == 4) {
  |           if (req.status == 200) {
  |             var message = req.responseText;    
  |             mdiv = document.getElementById("mostTransacted");
  |             mdiv.innerHTML = message;
  |           }
  |         }
  |     }
  | 
  |     function doCounter(){
  |         setInterval("getNumbers()", 5000);
  |     }
  | </script>
  | <script>
  |     window.onload=doCounter;
  | </script>
  | 
  | <div id="mostTransacted">
  |     <table width="100%" border="0" cellspacing="1" cellpadding="2">
  |         <tr bgcolor="#6699CC">
  |             <font color="#FFFFFF">
  |                 <td align="center"><font color="#FFFFFF">INSTRUMENTO</font></td>
  |                 <td align="center"><font color="#FFFFFF">NEGOCIO</font></td>
  |                 <td align="center"><font color="#FFFFFF">MONTO($)</font></td>
  |                 <td align="center"><font color="#FFFFFF">VAR(%)</font></td>
  |             </font>
  |         </tr>
  |         <c:forEach items="${transactions}" var="transaction" varStatus="rowCounter">
  |             <c:choose>
  |                 <c:when test="${rowCounter.count % 2 == 0}">
  |                     <tr bgcolor="#6699CC">
  |                         <td><font color="#FFFFFF">${transaction.instrument}</font></td>
  |                         <td align="right"><font color="#FFFFFF">${transaction.business}</font></td>
  |                         <td align="right"><font color="#FFFFFF">${transaction.amount}</font></td>
  |                         <td align="right"><font color="#33FF33">${transaction.variable}</font></td>
  |                     </tr>
  |                 </c:when>
  |                 <c:otherwise>
  |                     <tr bgcolor="#92B6DA">
  |                         <td><font color="#FFFFFF">${transaction.instrument}</font></td>
  |                         <td align="right"><font color="#FFFFFF">${transaction.business}</font></td>
  |                         <td align="right"><font color="#FFFFFF">${transaction.amount}</font></td>
  |                         <td align="right"><font color="#33FF33">${transaction.variable}</font></td>
  |                     </tr>
  |                 </c:otherwise>
  |             </c:choose>
  |         </c:forEach>  
  |     </table>
  | </div>

Regards
Alejandro

View the original post : http://www.jboss.com/index.html?module=bb&op=viewtopic&p=4106275#4106275

Reply to the post : http://www.jboss.com/index.html?module=bb&op=posting&mode=reply&p=4106275