Forums

Home » Alloy UI » English

Combination View Flat View Tree View
Threads [ Previous | Next ]
toggle
Gwowen Fu
Liferay Cook Book section 6.7.1 aui-dialog popup error
September 10, 2013 11:37 AM
Answer

Gwowen Fu

Rank: Expert

Posts: 315

Join Date: December 27, 2010

Recent Posts

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


 1
 2<aui:script>
 3    function popup(url) {
 4        AUI().use('aui-dialog', function(A){
 5            var dialog = new A.Dialog({
 6                title: 'Book Details',
 7                centered: true,
 8                modal: true,
 9                width: 500,
10                height: 400,
11            }).plug(A.plugin.IO, {uri: url}).render();
12        });
13    }
14</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
Byrån Zaugg
RE: Liferay Cook Book section 6.7.1 aui-dialog popup error
September 10, 2013 11:58 AM
Answer

Byrån Zaugg

LIFERAY STAFF

Rank: Regular Member

Posts: 180

Join Date: April 5, 2012

Recent Posts

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

 1<aui:script use="aui-dialog">
 2    function popup(url) {
 3            var dialog = new A.Dialog({
 4                title: 'Book Details',
 5                centered: true,
 6                modal: true,
 7                width: 500,
 8                height: 400,
 9            }).plug(A.plugin.IO, {uri: url}).render();
10    }
11</aui:script>
Gwowen Fu
RE: Liferay Cook Book section 6.7.1 aui-dialog popup error
September 10, 2013 12:56 PM
Answer

Gwowen Fu

Rank: Expert

Posts: 315

Join Date: December 27, 2010

Recent Posts

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

 1<aui:script use="aui-dialog">
 2    function popup(url) {
 3            var dialog = new A.Dialog({
 4                title: 'Book Details',
 5                centered: true,
 6                modal: true,
 7                width: 500,
 8                height: 400,
 9            }).plug(A.plugin.IO, {uri: url}).render();
10    }
11</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
RE: Liferay Cook Book section 6.7.1 aui-dialog popup error
September 11, 2013 1:46 AM
Answer

Ahmed Hasan

Rank: Expert

Posts: 306

Join Date: April 13, 2007

Recent Posts

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
RE: Liferay Cook Book section 6.7.1 aui-dialog popup error
September 11, 2013 8:20 PM
Answer

Gwowen Fu

Rank: Expert

Posts: 315

Join Date: December 27, 2010

Recent Posts

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
Byrån Zaugg
RE: Liferay Cook Book section 6.7.1 aui-dialog popup error
September 11, 2013 2:52 PM
Answer

Byrån Zaugg

LIFERAY STAFF

Rank: Regular Member

Posts: 180

Join Date: April 5, 2012

Recent Posts

Oops...
1<aui:script use="aui-dialog,aui-io-plugin">
Gwowen Fu
RE: Liferay Cook Book section 6.7.1 aui-dialog popup error
September 11, 2013 8:27 PM
Answer

Gwowen Fu

Rank: Expert

Posts: 315

Join Date: December 27, 2010

Recent Posts

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
RE: Liferay Cook Book section 6.7.1 aui-dialog popup error
September 16, 2013 11:39 PM
Answer

Ahmed Hasan

Rank: Expert

Posts: 306

Join Date: April 13, 2007

Recent Posts

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
RE: Liferay Cook Book section 6.7.1 aui-dialog popup error
December 23, 2013 9:13 AM
Answer

Erick Christian Rosales Cruz

Rank: New Member

Posts: 5

Join Date: November 28, 2013

Recent Posts

So, which is the workaround!?

How can be solved this?

My Code...

 1
 2AUI().ready('aui-dialog', 'aui-overlay-manager', 'dd-constrain', 'aui-io-plugin', function(A) {
 3    var dialog = new A.Dialog({ 
 4    title: 'DISPLAY CONTENT',
 5    centered: true,
 6    modal: true,
 7    width: 400,
 8    height: 200,
 9    bodyContent: 'newtest1'
10     }).render();
11 });


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
RE: Liferay Cook Book section 6.7.1 aui-dialog popup error
December 23, 2013 12:08 PM
Answer

James Falkner

Community Moderator

Rank: Liferay Legend

Posts: 1406

Join Date: September 17, 2010

Recent Posts

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:

 1
 2ready('aui-dialog-iframe-deprecated', 'aui-base', 'liferay-util-window', 'aui-io-plugin-deprecated', function(A) {
 3    function popup(url) {
 4        Liferay.Util.Window.getWindow(
 5                {
 6                        centered: true,
 7                        constrain2view: true,
 8                        modal: true,
 9                        resizable: false,
10                        width: 450
11                }
12                ).plug(
13                    A.Plugin.IO,
14                    {
15                         uri: url
16                    }
17                ).render();
18
19    }
20   
21    popup('http://localhost:8080/web/guest/documents');
22   
23 });
Fabian Parra
RE: Liferay Cook Book section 6.7.1 aui-dialog popup error
February 6, 2014 2:37 PM
Answer

Fabian Parra

Rank: New Member

Posts: 1

Join Date: February 6, 2014

Recent Posts

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.emoticon
Arun Kumar S
RE: Liferay Cook Book section 6.7.1 aui-dialog popup error
February 7, 2014 1:27 AM
Answer

Arun Kumar S

Rank: Regular Member

Posts: 182

Join Date: June 23, 2008

Recent Posts

Liferay 6.2 working code.

1. Add the below script in main.js file
 1
 2Liferay.namespace('Book');
 3
 4Liferay.provide(
 5        Liferay.Book,
 6        'popup',
 7        function(url) {
 8            var A = AUI();
 9
10            var dialog = Liferay.Util.Window.getWindow(
11                {
12                    dialog: {
13                        destroyOnHide: true
14                    },
15                    title: 'Book Details'
16                }
17            );
18
19            dialog.plug(
20                A.Plugin.IO,
21                {
22                    uri: url
23                }
24            );
25        },
26        ['aui-io-plugin-deprecated', 'liferay-util-window']
27    );


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

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


3. Modify the jsp code
1
2String popup = "javascript:Liferay.Book.popup('"+ viewBookURL.toString()+"');";



HTH
Thanks,
Arun.
Wasim Malik
RE: Liferay Cook Book section 6.7.1 aui-dialog popup error
March 18, 2014 10:36 PM
Answer

Wasim Malik

Rank: New Member

Posts: 2

Join Date: February 26, 2014

Recent Posts

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
RE: Liferay Cook Book section 6.7.1 aui-dialog popup error
November 9, 2014 8:09 PM
Answer

Muhammad Ghufron

Rank: New Member

Posts: 18

Join Date: August 7, 2014

Recent Posts

Thank you very much Arun Kumar,

It works for me,


in previous version (Alloy UI 1.5x) we can add button inner dialog like
 1
 2buttons:[                   
 3                {
 4                       text: '<liferay-ui:message key="move-to-archive" />',
 5                      handler: function(){                                  
 6                          postToURL(path, groupId, articleId, version, '<%= Constants.MOVE %>');
 7                     },
 8                    isDefault:true                   
 9                },
10               
11                {
12                       text: '<liferay-ui:message key="delete-permanently" />',
13                      handler: function(){
14                          postToURL(path, groupId, articleId, version, '<%= Constants.DELETE %>');                         
15                     }                                        
16                },
17               
18                {
19                      text: '<liferay-ui:message key="cancel" />',
20                      handler: function(){
21                        this.fire('close');
22                   }
23                 }],


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