ajax - 第一个 ajax portlet 显示秒的响应

Question

我是liferay的新手。我想要两个 portlet 从数据库的两个不同表中获取数据。必须在不刷新页面的情况下自动获取数据（使用 ajax）。问题是我创建的 portlet 正在获取数据并正确显示它，如果其中一个部署在页面中。如果它们都已部署，那么它们将显示第二个 portlet 表数据，即，如果门户中只有一个 portlet，它会显示正确的数据（特定 portlet 的表）并自动获取，如果两者都在门户中，则它们将获取第二个部署portlet 的数据（显示两个 portlet 的相同数据）。

这是我的两个 portlet 的 jsp 代码，我正在使用服务构建器来获取数据。

小门户 A

视图.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>

获取数据.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);
    }



}

小门户 B

视图.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);
    }

}

如果我做错了什么，请建议我...

提前致谢

萨米特KS

score 2 · Accepted Answer

问题很可能是您有两个具有相同 ID 的 DOM 元素（来自两个 portlet）。这是门户网站中的一个常见问题：您永远不知道与谁共享页面，因此您必须生成保证唯一的标识符。

一种方法是使用的输出<portlet:namespace/>- 这是一个标准化标记，可为每个 portlet 生成唯一值。它在同一个 portlet 中总是相同的。然后使用它来生成您的 ID 值：

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

注意：我只在你的例子中使用过这个fetchData，还没有fetchLink- 现在你知道出了什么问题，这将是你的任务:)

正如您在评论中所说，对于最终成为 DOM 中的全局变量的变量名称也是如此：请注意，它们最终都共享相同的 HTML 文档 - 解决此问题的一种方法是使用<portlet:namespace/>“装饰”变量名也是如此，但生成的代码很丑陋且难以维护。这也是 Liferay 最终使用 AlloyUI 替代 jQuery 的部分原因：AUI 默认为命名空间并启用动态模块加载。在一个命名空间中，您不依赖全局变量，而是拥有该块的本地变量 - 包括您要加载的模块：

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

score 1 · Accepted Answer

通常，在 Javascript 中，您应该调用您的<aui:>组件，例如

$('#<portlet:namespace/>aui_component_id')

如果您查看您的 html 源代码，您会看到所有<aui>组件在 'id' 属性中都有 'portlet_id' 作为前缀

另外，我无法理解您通过使用从actionUrls 调用的processAction 来完成这项工作。您需要“资源”阶段来获取数据而不刷新页面，因此您需要覆盖 MVCPortlet 的 serveResource 函数，并通过调用 resourceUrls 在您的 jsp 中调用它

score 0 · Accepted Answer

谢谢大家的回应。

我弄清楚问题出在哪里。

我对两个 portlet url (var url = '<%=workloadUrl.toString()%>'; && var url = '<%=fetchDatabase.toString()%>';) 使用相同的变量名。

我更改了第二个 portlet 的变量名，现在它可以工作了。

我不知道我不能在不同的 portlet 中使用相同的变量名。

ajax - 第一个 ajax portlet 显示秒的响应

3 回答 3

Related

Reference