Liferay Cook Book section 6.7.1 aui-dialog popup error

[Gwowen Fu, modificado hace 10 años.]

Hi,

I was following the Liferay Cook Book to implement the popup but having the following problem when the popup script is called:

Uncaught TypeError: undefined is not a function

<aui:script>
	function popup(url) {
		AUI().use('aui-dialog', function(A){
			var dialog = new A.Dialog({
				title: 'Book Details',
				centered: true,
				modal: true,
				width: 500,
				height: 400,
			}).plug(A.plugin.IO, {uri: url}).render();
		});
	}
</aui:script>

Do I have to load any JavaScript file for "aui-dialog", how do I do that, and which js file should I load?

Thanks!
Gwowen Fu

[Byran Zaugg, modificado hace 10 años.]

`<aui:script>` handles the AUI wrapper for you, when using the `use` attribute. Try the code below:

<aui:script use="aui-dialog">
	function popup(url) {
			var dialog = new A.Dialog({
				title: 'Book Details',
				centered: true,
				modal: true,
				width: 500,
				height: 400,
			}).plug(A.plugin.IO, {uri: url}).render();
	}
</aui:script>

[Gwowen Fu, modificado hace 10 años.]

Byran Zaugg:

`<aui:script>` handles the AUI wrapper for you, when using the `use` attribute. Try the code below:

<aui:script use="aui-dialog">
	function popup(url) {
			var dialog = new A.Dialog({
				title: 'Book Details',
				centered: true,
				modal: true,
				width: 500,
				height: 400,
			}).plug(A.plugin.IO, {uri: url}).render();
	}
</aui:script>

I got the same error. Maybe it is Liferay 6.2 issue. I am using liferay-portal-6.2.0-ce-b2 build. I will try 6.1 CE to see if that works.

[Ahmed Hasan, modificado hace 10 años.]

Hi Gwowen,

Did you have a chance to try this out in 6.1 GA2. These examples have been tried multiple times and verified to work.

Yours truly,
Ahamed Hasan
Author, Liferay Portlet Cookbook

[Gwowen Fu, modificado hace 10 años.]

Hi Ahmed,

i tried in 6.1.20 EE and got this error:

Uncaught TypeError: Cannot read property 'IO' of undefined

In the Liferay User Interface Development book published by Packtpub, it mentioned that yui.js and aui-base.js have to be included in the JSP file in order for "aui-io-request" to work, I am not sure if that is also true for "aui-dialog" and "aui-io-plugin".

I guess that's changed in 6.1, because you didn't mention that in your book.

I will try in CE 6.1 when I have time.

By the way, Liferay Cook Book is excellent.

Thanks!
Gwowen

[Byran Zaugg, modificado hace 10 años.]

Oops...

<aui:script use="aui-dialog,aui-io-plugin"></aui:script>

[Gwowen Fu, modificado hace 10 años.]

Gwowen Fu:

I will try in CE 6.1 when I have time.

I tried the same code from the book in version 6.1.2 CE GA3 and it works fine.

This really discouraged me to use it. Different version of Liferay has different result. JQuery UI is much easy.

Thanks for all the suggestions!
Gwowen

[Ahmed Hasan, modificado hace 10 años.]

Hi Gwowen,

It is quite unfortunate that it works with 6.1.2 GA3 and not in the EE version. I will look into this and see how we can make the code work in the latest EE version as well.

Yours truly,
Ahamed Hasan
Author, Liferay Portlet Cookbook

[Erick Christian Rosales Cruz, modificado hace 10 años.]

So, which is the workaround!?

How can be solved this?

My Code...

AUI().ready('aui-dialog', 'aui-overlay-manager', 'dd-constrain', 'aui-io-plugin', function(A) {
    var dialog = new A.Dialog({  
    title: 'DISPLAY CONTENT', 
    centered: true,
    modal: true,
    width: 400,
    height: 200,
    bodyContent: 'newtest1'
     }).render();
 });

The result...
Uncaught TypeError: undefined is not a function

I'm unhappy with the difficultness to get the things work on LIferay and AlloyUI.

[James Falkner, modificado hace 10 años.]

Erick Christian Rosales Cruz:

So, which is the workaround!?

How can be solved this?

My Code...

...

The result...
Uncaught TypeError: undefined is not a function

I'm unhappy with the difficultness to get the things work on LIferay and AlloyUI.

Liferay Portal 6.2 includes AlloyUI 2.x, whereas Liferay Portal 6.1 includes an older version (1.5.x). Several of AlloyUI's modules have been changed, renamed, and/or deprecated, so it's unfortunately no surprise that AUI code that works in 6.1 does not work in 6.2.

The AUI team tried to make the migration process as painless as possible (check out the official docs, which includes a tool you can use to automatically do it for you!).

But in this case, you need to change a couple of the module names to their deprecated names in 6.2. So, aui-dialog becomes aui-dialog-iframe-deprecated, and aui-io-plugin becomes aui-io-plugin-deprecated.

Here's the code that should work in 6.2 using these new names:

ready('aui-dialog-iframe-deprecated', 'aui-base', 'liferay-util-window', 'aui-io-plugin-deprecated', function(A) {
    function popup(url) {
        Liferay.Util.Window.getWindow(
                {
                        centered: true,
                        constrain2view: true,
                        modal: true,
                        resizable: false,
                        width: 450
                }
                ).plug(
                    A.Plugin.IO,
                    {
                         uri: url
                    }
                ).render();
 
    }
    
    popup('http://localhost:8080/web/guest/documents');
    
 });

[Pier Paolo Ramon, modificado hace 10 años.]

Hi Erick, could you please show us the stack which caused you this problem? This could help us to find where does that error actually comes from.

[Fabian Parra, modificado hace 10 años.]

In the line--> }).plug(A.plugin.IO, {uri: url}).render(); focus in the A.plugin invocation its should be A.Plugin. Amazing how to Mayus make the diference.

[Arun Kumar S, modificado hace 10 años.]

Liferay 6.2 working code.

1. Add the below script in main.js file

Liferay.namespace('Book');

Liferay.provide(
		Liferay.Book,
		'popup',
		function(url) {
			var A = AUI();

			var dialog = Liferay.Util.Window.getWindow(
				{
					dialog: {
						destroyOnHide: true
					},
					title: 'Book Details'
				}
			);

			dialog.plug(
				A.Plugin.IO,
				{
					uri: url
				}
			);
		},
		['aui-io-plugin-deprecated', 'liferay-util-window']
	);

2. Include main.js file in liferay-portlet.xml

<footer-portlet-javascript>/js/main.js</footer-portlet-javascript>

3. Modify the jsp code

String popup = "javascript:Liferay.Book.popup('"+ viewBookURL.toString()+"');";

HTH
Thanks,
Arun.

[Wasim Malik, modificado hace 10 años.]

Arun Kumar S thanks your code is working on 6.2 ee
It is working code by when i close the popup and again click on link it is not opening

[Muhammad Ghufron, modificado hace 9 años.]

Thank you very much Arun Kumar,

It works for me,


in previous version (Alloy UI 1.5x) we can add button inner dialog like

buttons:[	                
                {
           			text: '<liferay-ui:message key="move-to-archive" />',
                  	handler: function(){	 		                  	
                  		postToURL(path, groupId, articleId, version, '&lt;%= Constants.MOVE %&gt;');
         			},
            		isDefault:true	            	
                },
                
                {
           			text: '<liferay-ui:message key="delete-permanently" />',
                  	handler: function(){
                  		postToURL(path, groupId, articleId, version, '&lt;%= Constants.DELETE %&gt;');                  		
         			}		            		         	
                },
                
                {
                  	text: '<liferay-ui:message key="cancel" />',
                  	handler: function(){
                    	this.fire('close');
                   }
                 }],

i have tried in liferay 6.2 but it doesn't work, may you know how to add button inner the dialog ?

Salam,
Muhammad Ghufron