First ajax portlet shows the seconds ones response - ajax

Question

I am new to liferay. I want two portlet to fetch data from the two different tables of the database. The data has to be fetched automatically without refreshing the page(using ajax). The problem is the portlets I created are fetching the data and showing it properly, if one of them is deployed in a page. If both of them are deployed then they are showing the second portlets tables data i.e if only one portlet is in the portal its showing the correct data (the specific portlet's table) and automatically fetching, if both are in portal they are fetching the second deployed portlet's data(showing same data for both portlets).
Here is the jsp code of both of my portlet, I am using service builder for fetching data.
Portlet A
view.jsp
<%#page contentType="text/html"%>
<%#page pageEncoding="UTF-8"%>
<%# taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet" %>
<%# taglib uri="http://alloy.liferay.com/tld/aui" prefix="aui"%>
<%# taglib uri="http://liferay.com/tld/ui" prefix="liferay-ui"%>
<%# page import="javax.portlet.PortletContext"%>
<%# page import="com.liferay.portal.kernel.portlet.LiferayWindowState"%>
<%# page import="javax.portlet.RenderRequest"%>
<%# page import="java.util.*"%>
<%# page import="javax.portlet.*"%>
<portlet:defineObjects />
<portlet:actionURL
windowState="<%=LiferayWindowState.EXCLUSIVE.toString()%>"
var="fetchDatabase">
<portlet:param name="databaseFetch" value="fetchWorkData"></portlet:param>
</portlet:actionURL>
<%
PortletPreferences prefs = renderRequest.getPreferences();
%>
<script type="text/javascript">
var url = '<%=fetchDatabase.toString()%>';
$(document).ready(function() {
$("#fetchLink").click(function() {
$.post(url).done(function(data) {
$("#fetchData").html(data);
});
});
});
$(document).ready(function() {
//For Initial loading of database
$('#fetchData').load(url);
function timeRefresh() {
// setTimeout("location.reload(true);",timeoutPeriod);
// make a ajax call here.
$.post(url).done(function(data) {
$("#fetchData").html(data);
});
}
//Recalling the function repeatedly in given interval
setInterval(function() {
timeRefresh();
}, 6000);
});
</script>
<aui:layout id="fetchedData">
<aui:button value="Refresh" id="fetchLink"></aui:button>
<hr />
<aui:layout id="fetchData"></aui:layout>
</aui:layout>
FetchData.java
package com.cherry.ajax.database;
import java.io.IOException;
import javax.portlet.ActionRequest;
import javax.portlet.ActionResponse;
import javax.portlet.PortletException;
import javax.portlet.PortletRequestDispatcher;
import javax.portlet.RenderRequest;
import javax.portlet.RenderResponse;
import com.cherry.ajax.database.service.TestLocalServiceUtil;
import com.liferay.portal.kernel.exception.SystemException;
import com.liferay.util.bridges.mvc.MVCPortlet;
/**
* Portlet implementation class FetchData
*/
public class FetchData extends MVCPortlet {
String action = "";
#Override
public void processAction(ActionRequest request, ActionResponse response)
throws IOException, PortletException {
action = request.getParameter("databaseFetch");
try {
TestLocalServiceUtil.add();
} catch (SystemException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
#Override
public void doView(RenderRequest request, RenderResponse response)
throws IOException, PortletException {
response.setContentType("text/html");
PortletRequestDispatcher dispatcher = null;
if (action.equals("fetchWorkData")) {
dispatcher = getPortletContext().getRequestDispatcher(
"/html/jsp/showData.jsp");
} else {
dispatcher = getPortletContext().getRequestDispatcher(
"/html/jsp/view.jsp");
}
action = "";
dispatcher.include(request, response);
}
}
Portlet B
view.jsp
<%#page contentType="text/html"%>
<%#page pageEncoding="UTF-8"%>
<%# taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet" %>
<%# taglib uri="http://alloy.liferay.com/tld/aui" prefix="aui"%>
<%# taglib uri="http://liferay.com/tld/ui" prefix="liferay-ui"%>
<%# page import="javax.portlet.PortletContext"%>
<%# page import="com.liferay.portal.kernel.portlet.LiferayWindowState"%>
<%# page import="javax.portlet.RenderRequest"%>
<%# page import="java.util.*"%>
<%# page import="javax.portlet.*"%>
<portlet:defineObjects />
<portlet:actionURL
windowState="<%=LiferayWindowState.EXCLUSIVE.toString()%>"
var="workloadUrl">
<portlet:param name="drAction" value="getWorkData"></portlet:param>
</portlet:actionURL>
<%
PortletPreferences prefs = renderRequest.getPreferences();
%>
<script type="text/javascript">
var url = '<%=workloadUrl.toString()%>';
$(document).ready(function() {
$("#workloadLink").click(function() {
$.post(url).done(function(data) {
$("#drData").html(data);
});
});
});
$(document).ready(function() {
//For Initial loading of database
$('#drData').load(url);
function refresh() {
// setTimeout("location.reload(true);",timeoutPeriod);
// make a ajax call here.
$.post(url).done(function(data) {
$("#drData").html(data);
});
}
//Recalling the function repeatedly in given interval
setInterval(function() {
refresh();
}, 6000);
});
</script>
<aui:layout id="DrWorkload">
<aui:button value="Refresh" id="workloadLink"></aui:button>
<hr />
<aui:layout id="drData"></aui:layout>
</aui:layout>
DrStatus.java
package com.cherry.ajax.database;
import java.io.IOException;
import javax.portlet.ActionRequest;
import javax.portlet.ActionResponse;
import javax.portlet.PortletException;
import javax.portlet.PortletRequestDispatcher;
import javax.portlet.RenderRequest;
import javax.portlet.RenderResponse;
import com.cherry.ajax.database.service.WorkloadLocalServiceUtil;
import com.liferay.portal.kernel.exception.SystemException;
import com.liferay.util.bridges.mvc.MVCPortlet;
/**
* Portlet implementation class DrStatus
*/
public class DrStatus extends MVCPortlet {
String action = "";
#Override
public void processAction(ActionRequest request, ActionResponse response)
throws IOException, PortletException {
action = request.getParameter("drAction");
try {
WorkloadLocalServiceUtil.check();
} catch (SystemException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
#Override
public void doView(RenderRequest request, RenderResponse response)
throws IOException, PortletException {
response.setContentType("text/html");
PortletRequestDispatcher dispatcher = null;
if (action.equals("getWorkData")) {
dispatcher = getPortletContext().getRequestDispatcher(
"/html/drstatus/workloadData.jsp");
} else {
dispatcher = getPortletContext().getRequestDispatcher(
"/html/drstatus/view.jsp");
}
action = "";
dispatcher.include(request, response);
}
}
Please suggest me if I am doing any thing wrong ...
Thanks in advance
Samith K S

Answer 1

The problem is most likely that you have two DOM elements with the same ID (from both portlets). This is a common problem in portals: You never know whom you share the page with, thus you'll have to generate guaranteed-to-be-unique identifiers.
One way to do this is to use the output of <portlet:namespace/> - this is a standardized tag that generates a unique value per portlet. It's always identical within the same portlet. Then use this to generate your ID values:
<div id="<portlet:namespace />fetchData">
...
</div>
<script type="text/javascript">
var url = '<%=fetchDatabase.toString()%>';
$(document).ready(function() {
$("#fetchLink").click(function() {
$.post(url).done(function(data) {
$("#<portlet:namespace />fetchData").html(data);
});
});
});
Note: I've only used this on your example fetchData, not yet on fetchLink - that'll be your task now that you know what goes wrong :)
As you state in your comment, the same holds for variable names that end up as global variables in the DOM: Be aware that they all share the same HTML document in the end - one way to work around this is to use <portlet:namespace/> to "decorate" variable names as well, but the resulting code is ugly and hard to maintain. This is part of the reason why Liferay ended up with AlloyUI as replacement for jQuery: AUI defaults to namespacing and enables dynamic module loading. Within one namespace you didn't rely on global variables but have the variables local to that one block - including the modules that you wanted to load:
AUI().use('node', 'module2', 'module3', function (A) {
A.foo.bar()
// this variable is scoped to just this function
// no conflict with other content on the same page!
var someVariable = 'something';
doSomething();
});

Answer 2

As a rule, in Javascript, you should call your <aui:> components like
$('#<portlet:namespace/>aui_component_id')
If you view your html source, you'll see that all <aui> components have the 'portlet_id' as prefix in the 'id' attribute
Also, I can't understand hoe you make that work by using processAction, that is called from actionUrls. You need the 'resource' phase to fetch data without refreshing the page, so you'll need to override the MVCPortlet's serveResource function, and call it in your jsp's by calling resourceUrls

Answer 3

Thank you all of your resopnse.
I figure out what the problem is.
I am using same variable name for the both portlets urls (var url = '<%=workloadUrl.toString()%>'; && var url = '<%=fetchDatabase.toString()%>';).
I changed the variable name of the second portlet and now its working.
I didn't know I can't use same variable names in different portlets.