Làm cách nào để gửi biểu mẫu bằng cách sử dụng yêu cầu Ajax trong Liferay?

Question

Tôi là người mới trong cổng thông tin cuộc sống. Tôi đã phát triển một portlet trong liferay cho demo. Tôi đã sử dụng giao tiếp giữa các portlet trong ví dụ này. Những gì tôi đang làm là: - Tôi có một portlet tìm kiếm, trong đó tôi đang có một trường văn bản để tìm kiếm. Khi tôi nhấp vào nút tìm kiếm, nó sẽ lấy dữ liệu từ cơ sở dữ liệu và hiển thị dữ liệu đó bằng cách sử dụng tìm kiếm trong một portlet khác. Tôi đã sử dụng chú thích ProcessEvent và ActionEvent cho dự án này.

Bây giờ những gì tôi muốn là khi tôi nhấp vào nút tìm kiếm thì trang sẽ không được làm mới (tức là tôi muốn sử dụng khái niệm AJAX) và dữ liệu sẽ được hiển thị trên portlet kia.

Code Snippet

Portlet A - view.jsp

<%@include file="/html/init.jsp"%> 
<portlet:defineObjects /> 

<!-- 

<portlet:actionURL var="actionURL" name="pitchBall"></portlet:actionURL> 

//--> 
**Change to Resource URL** 
<portlet:resourceURL var="resourceURL"> 
</portlet:resourceURL> 


<aui:form method="POST" action="<%= resourceURL%>" name=" <portlet:namespace>fm1</portlet:namespace>"> 
    <aui:input name="search" id="search" /> 
    <aui:button type="submit" name="Search" value="Search" /> 
</aui:form> 

Portlet A - SearchPortlet Lớp

package com.test; 

/** 
* Portlet implementation class SearchPortlet 
*/ 
public class SearchPortlet extends GenericPortlet { 

    @Override 
    public void render(RenderRequest request, RenderResponse response) 
      throws PortletException, IOException { 
     // TODO Auto-generated method stub 
     super.render(request, response); 

    } 

    @ProcessAction(name="pitchBall") 
    public void pitchBall(ActionRequest request, ActionResponse response) throws SystemException { 
     String name = ParamUtil.getString(request, "search");  
     QName qName = new QName("http://liferay.com/events", "ipc.pitch"); 
     response.setEvent(qName, name); 
    } 

    public void init() { 
     editJSP = getInitParameter("edit-jsp"); 
     helpJSP = getInitParameter("help-jsp"); 
     viewJSP = getInitParameter("view-jsp"); 
    } 

    public void doEdit(
      RenderRequest renderRequest, RenderResponse renderResponse) 
     throws IOException, PortletException { 

     include(editJSP, renderRequest, renderResponse); 
    } 

    public void doHelp(
      RenderRequest renderRequest, RenderResponse renderResponse) 
     throws IOException, PortletException { 

     include(helpJSP, renderRequest, renderResponse); 
    } 

    @Override 
    public void doView(
      RenderRequest renderRequest, RenderResponse renderResponse) 
     throws IOException, PortletException { 
     //super.doView(renderRequest, renderResponse); 
     System.out.println("In doView code"); 

     renderResponse.setContentType(renderRequest.getResponseContentType()); 

     // file to display... 
     String url = "/html/searchportlet/view.jsp"; 

     // read the above file and output it... 
     getPortletContext().getRequestDispatcher(url).include(renderRequest, renderResponse); 
     //include(viewJSP, renderRequest, renderResponse); 
    } 

    @Override 
    public void serveResource(ResourceRequest request, ResourceResponse response) 
      throws PortletException, IOException { 
     // TODO Auto-generated method stub 
     //super.serveResource(request, response); 
     System.out.println("In serveResource code"); 

     response.setContentType("text/html"); 

     String name = request.getParameter("search"); 

     // this seems to be the page that was calling...? 
     String resourceID = request.getResourceID(); 
     System.out.println("resourceId was : " + resourceID); 


     System.out.println("message was : " + name); 
     PrintWriter writer = response.getWriter(); 

     writer.print(name); 
    } 

    protected void include(
      String path, RenderRequest renderRequest, 
      RenderResponse renderResponse) 
     throws IOException, PortletException { 

     PortletRequestDispatcher portletRequestDispatcher = 
      getPortletContext().getRequestDispatcher(path); 

     if (portletRequestDispatcher == null) { 
      _log.error(path + " is not a valid include"); 
     } 
     else { 
      portletRequestDispatcher.include(renderRequest, renderResponse); 
     } 
    } 

    protected String editJSP; 
    protected String helpJSP; 
    protected String viewJSP; 

    private static Log _log = LogFactoryUtil.getLog(SearchPortlet.class); 

} 

Portlet B - view.jsp

<%@include file="/html/init.jsp"%> 
<portlet:defineObjects /> 

<% 
String name = (String)renderRequest.getParameter("name"); 
%> 

<liferay-ui:search-container 
    emptyResultsMessage="author-empty-results-message"> 

    <liferay-ui:search-container-results 
     results="<%= KeyurAuthorLocalServiceUtil.getStudentByName(name) %>" /> 

    <liferay-ui:search-container-row className="com.test.model.KeyurAuthor"> 

     <liferay-ui:search-container-column-text name="authorId" 
      property="authorId" /> 
     <liferay-ui:search-container-column-text name="authorName" 
      property="authorName" /> 
     <liferay-ui:search-container-column-text name="authorEmail" 
      property="authorEmail" /> 
    </liferay-ui:search-container-row> 

    <liferay-ui:search-iterator></liferay-ui:search-iterator> 


</liferay-ui:search-container> 

Portlet B - SearchResultPortlet Lớp

/** 
* Portlet implementation class SearchResultPortlet 
*/ 
public class SearchResultPortlet extends GenericPortlet { 

    public void init() { 
     editJSP = getInitParameter("edit-jsp"); 
     helpJSP = getInitParameter("help-jsp"); 
     viewJSP = getInitParameter("view-jsp"); 
    } 

    @ProcessEvent(qname="{http://liferay.com/events}ipc.pitch") 
    public void catchBall(EventRequest request, EventResponse response) { 
     Event event = request.getEvent(); 
     String name = (String)event.getValue(); 
     response.setRenderParameter("name", name); 
    } 

    public void doEdit(
      RenderRequest renderRequest, RenderResponse renderResponse) 
    throws IOException, PortletException { 

     include(editJSP, renderRequest, renderResponse); 
    } 

    public void doHelp(
      RenderRequest renderRequest, RenderResponse renderResponse) 
    throws IOException, PortletException { 

     include(helpJSP, renderRequest, renderResponse); 
    } 

    public void doView(
      RenderRequest renderRequest, RenderResponse renderResponse) 
    throws IOException, PortletException { 

     include(viewJSP, renderRequest, renderResponse); 
    } 

    protected void include(
      String path, RenderRequest renderRequest, 
      RenderResponse renderResponse) 
    throws IOException, PortletException { 

     PortletRequestDispatcher portletRequestDispatcher = 
      getPortletContext().getRequestDispatcher(path); 

     if (portletRequestDispatcher == null) { 
      _log.error(path + " is not a valid include"); 
     } 
     else { 
      portletRequestDispatcher.include(renderRequest, renderResponse); 
     } 
    } 

    protected String editJSP; 
    protected String helpJSP; 
    protected String viewJSP; 

    private static Log _log = LogFactoryUtil.getLog(SearchResultPortlet.class); 

} 

Answer 1

Khi đưa ra yêu cầu ajax trên cổng thông tin portlet của bạn nên implemet

javax.portlet.ResourceServingPortlet 

GenericPortlet đã không nhưng bạn muốn ghi đè lên nó, và thay vì sử dụng <portlet:actionURL /> bạn nên sử dụng <portlet:resourceURL /> fro từ hành động.

Và trong thiết lập của bạn, bạn nên có biểu mẫu tìm kiếm với trường ẩn cho từ khóa và khi nhấp vào nút gửi trong tìm kiếm portlet, bạn nên sao chép từ khóa từ biểu mẫu đó, với IPC, để tìm kiếm kết quả portlet và gọi gửi trên kết quả tìm kiếm từ (mà không gửi biểu mẫu trong portlet tìm kiếm (A)).

lớp SearchResultPortlet của bạn nên được

public class SearchResultPortlet extends GenericPortlet { 
    ... 
    public void serveResource(ResourceRequest request, ResourceResponse response) throws PortletException, java.io.IOException { 
     // do search and return result 
    } 
    ... 
} 

EDIT: hoàn thành ví dụ

SearchForm

import java.io.IOException; 

import javax.portlet.GenericPortlet; 
import javax.portlet.PortletException; 
import javax.portlet.RenderRequest; 
import javax.portlet.RenderResponse; 

public class SearchForm extends GenericPortlet { 

    @Override 
    protected void doView(RenderRequest p_request, RenderResponse p_response) throws PortletException, IOException { 
     getPortletContext().getRequestDispatcher("/WEB-INF/jsp/search.jsp").include(p_request, p_response); 
    } 
} 

SearchResult

import java.io.IOException; 

import javax.portlet.GenericPortlet; 
import javax.portlet.PortletException; 
import javax.portlet.RenderRequest; 
import javax.portlet.RenderResponse; 
import javax.portlet.ResourceRequest; 
import javax.portlet.ResourceResponse; 

public class SearchResult extends GenericPortlet { 

    @Override 
    protected void doView(RenderRequest p_request, RenderResponse p_response) throws PortletException, IOException { 
     getPortletContext().getRequestDispatcher("/WEB-INF/jsp/result.jsp").include(p_request, p_response); 
    } 

    @Override 
    public void serveResource(ResourceRequest p_request, ResourceResponse p_response) throws PortletException, IOException { 
        //do your search here and put results in 'result' 
     p_request.setAttribute("result", "results for: " + p_request.getParameter("search")); 

     getPortletContext().getRequestDispatcher("/WEB-INF/jsp/html.jsp").include(p_request, p_response); 
    } 
} 

search.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> 

<%@ taglib uri="http://java.sun.com/portlet" prefix="portlet" %> 

<portlet:defineObjects /> 

<script type="text/javascript"> 

    function doSearch() { 
     Liferay.fire('searchKeywords', document.getElementById("<portlet:namespace/>search").value);  
    } 

</script> 

<form> 
    <input type="text" name="search" id="<portlet:namespace/>search" /> 
    <button name="Search" value="Search" onclick="doSearch()" type="button">Search</button> 
</form> 

result.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> 

<%@ taglib uri="http://java.sun.com/portlet" prefix="portlet" %> 
<%@ taglib uri="http://liferay.com/tld/aui" prefix="aui" %> 

<portlet:defineObjects /> 
<portlet:resourceURL var="rurl" /> 

<script type="text/javascript"> 
    Liferay.on('searchKeywords', function(event, p_data){ 
     var A = AUI(); 
     A.use('aui-io-request', function(aui) { 
      A.io.request("<%= rurl %>", { 
       method : 'POST', 
       data: {search: p_data}, 
       dataType : 'html', 
       on : { 
        success : function() { 
         AUI().one("#<portlet:namespace/>placeholder").html(this.get('responseData')); 
        } 
       } 
      }); 
     }); 
    }); 
</script> 

Search Results:<br /> 
<div id="<portlet:namespace/>placeholder"> 
</div> 

html.jsp (đây là cho kết quả render)

<%= request.getAttribute("result") %> 

Answer 2

Bạn có thể sử dụng thông tin liên lạc portlet của Inter về phía khách hàng. Hãy gọi portletA portlet tìm kiếm và portletB tìm kiếm trong một portlet khác. Tôi giả sử bạn đang sử dụng Liferay 6+.

Bước 1: nhấn vào nút tìm kiếm trên portletA sẽ kích hoạt chức năng folowing javascript trên trình duyệt:

var A = AUI(); 
A.use('aui-io-request', 
    function(aui) { 
     A.io.request(<portletA_serch_action_url>, { 
      method : 'GET', 
      dataType : 'json', 
      on : { 
       success : function() { 
        Liferay.fire('myEvent', this.get('responseData');      
       } 
      } 
     }); 
    } 
); 

Lưu ý các cuộc gọi đến A.io.request(<portletA_serch_action_url>... đây là url hành động phía máy chủ portletA. Xem Blog Liferay sau đây để biết thêm thông tin về Liferay 6 và ajax: http://www.liferay.com/web/nathan.cavanaugh/blog/-/blogs/alloyui-working-with-ajax.

Bước 2: trên phản hồi của máy chủ portletA, phía máy khách portletA sẽ khởi chạy sự kiện với dữ liệu được truy xuất từ ​​máy chủ. Lưu ý cuộc gọi đến Liferay.fire('myEvent', this.get('responseData'); đây là cách mà Liferay hỗ trợ Giao tiếp Inter Portlet phía máy khách ở phía máy khách (Xem http://www.liferay.com/community/wiki/-/wiki/Main/Client-side+Inter-Portlet+Communication).

myEvent là sự kiện được kích hoạt, this.get('responseData'); là dữ liệu được truy xuất từ ​​máy chủ.

Bước 3: phía khách hàng portletB nghe trên myEvent và đưa ra các dữ liệu

portletB sẽ lắng nghe trên myEvent và sau đó làm cho dữ liệu:

Liferay.on(
'myEvent', 
function(event, data){ 
    var portletId = data.portletId; 
    var portlet = data.portlet; 

    if(portletId.indexOf('YOUR_PORTLET_A_ID') > -1){ 
     alert(data); 
    } 
} 
); 

Lưu ý việc kiểm tra của provenience của dữ liệu từ portletA:

if(portletId.indexOf('YOUR_PORTLET_A_ID') > -1){... 

Bạn có thể xóa séc đó nếu bạn không có các portlet khác bắn cùng t.

Hy vọng trợ giúp này.