Search code examples
ajaxjqueryliferayliferay-6

First ajax portlet shows the seconds ones response

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

Solution

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