Limitations When Using Pjax to Render Embedded Content

This article describes a fundamental product limitation when pjax is used to render programmatically nested content in Liferay platforms. (Pjax is a jQuery plugin, a standalone JavaScript module that uses AJAX (XmlHttpRequest) and pushState() to deliver a fast browsing experience.)

This issue is that the Liferay.widget call conflicts with pjax. This issue is reproduced regardless of whether SPA is enabled. Lastly, this issue is found in both Liferay Portal 6.2 EE and Liferay Digital Enterprise 7.0.

Steps to Reproduce

  1. Navigate to the Hello World portlet.
  2. Click the three-dot Options menu → Configuration.
  3. Copy the code snippet:
    	<script src="http://localhost:8080/o/frontend-js-web/liferay/widget.js" type="text/javascript"></script>
    		<script type="text/javascript">
    			Liferay.Widget({url: 'http://localhost:8080/widget/group/managers-dashboard/dev-page/-/com_liferay_hello_world_web_portlet_HelloWorldPortlet'});
  4. Close the Configuration window.
  5. Add a Web Content Display portlet to the page.
  6. Click the (+) sign to add a new Basic Web Content.
  7. Enter Hello World Embed in the Title field.
  8. Click the Editor Switch (< / >) button to input the code snippet.
  9. Paste the code snippet above.
  10. Click Publish.

At this point, the Hello World portlet is published inside a Web Content article and fills the entire screen instead of rendered inside the Web Content Display portlet.

However, once the page is refreshed, the web portlet is rendered correctly.

To address issue and not break APIs in both Liferay Portal 6.2 EE and Liferay Digital Enterprise 7.0, one strongly suggested potential solution is to use iframe as an alternative to render embedded content.

At this point, Liferay Engineering has deprecated all calls to the Liferay.widget and this API will not be used in future releases.


Status: Fixed

Update to Liferay Digital Experience Platform (DXP) 7.1 or apply fix pack DXP 7.0 Fix Pack 35 or newer.

Additional Information

See LPS-75743 for more information and ultimate resolution.

Was this article helpful?
0 out of 0 found this helpful