1. Home
  2. Portal
  3. Display the content of an article in a modal pop-up

Display the content of an article in a modal pop-up

thumbnail
2442406, modified 17 Years ago.
Display the content of an article in a modal pop-up
Junior Member Posts: 37 Join Date: 3/10/09 Recent Posts
Hi everyone,

I'm trying, like the title of this post says, to display the content of my article in a modal pop-up. I notice a modal pop-up is used during the edition of an article, when the user wants to create a link between a word and, for example, an URL.

I want to use the same modal pop-up in order to display the content of my article. But how can I do that ? I don't know if I have to insert another parameter in the URL of my "page" containing my article or if I have to call a javascript function when I edit my article. If I have to call a javascript function, I don't know which one and where i can find it.

I saw in my research that Liferay have something called AjaxUtil.js but I can't find it. I use a Liferay Portal Standard Edition 5.1.2.

Thanks in advance,

Hesediel.

Edit :

After more researches, I found this : http://www.liferay.com/web/guest/community/wiki/-/wiki/Main/Using+Pop-up+in+Liferay but I really don't know how to implement this. For a window pop-up, I know we only have to put windowState on POP_UP. But in order to use a "floating div pop-up" it's different :

1) We have to put windowState on Exlusive.
2) We have to put javascript ( ?? ) in the onclick when we create a HTML link ( ?? ).

I tried to do this things but I didn't reached my purpose. With the help of Firebug, I've tried to see how this thing is implemented on Liferay but I don't find anything.
thumbnail
682861, modified 17 Years ago.
RE: Display the content of an article in a modal pop-up
Liferay Legend Posts: 1228 Join Date: 4/14/08 Recent Posts
See if the following links ring the bell:
- Liferay popup for v5.2.1
- [Resloved] AjaxUtil is not defined javascript error in 5.2LR
thumbnail
2442406, modified 17 Years ago.
RE: Display the content of an article in a modal pop-up
Junior Member Posts: 37 Join Date: 3/10/09 Recent Posts
Hi Victor,

Thanks to all this informations, I see what i have to do in order to reach my purpose.

Hesediel.

Edit :

Hi everyone,

With all the documentations Victor gave to me, I came up with something but it still doesn't work. My code is :

function ShowPopUp()
{
var url = '/web/guest/article';
var popup = Liferay.Popup({ title: "Glossaire", modal: true, width:300 , height:400, scrollsbar:true});
jQuery(popup).load(url, { windowState : 'LiferayWindowstate.EXCLUSIVE'});
}

Here I just want to display the content of /web/guest/article in a modal popup. When I clicked on the link, I saw the modal popup.

Its content was the content of /web/guest/article with the default liferay header, spite of windowState set to LiferayWindowstate.EXCLUSIVE.

Firebug had one error (when the modal popup opened) :
Liferay._ajaxOld is not a function.

But the modal popup was here. So i tried to close the modal popup and it worked. The second after, I tried to click on the default button to edit an article. Firebug had another error :
Liferay.Util is undefined.

I had to refresh the page in order to be able to edit the article.

Thanks in advance,

Hesediel.
thumbnail
3103467, modified 16 Years ago.
RE: Display the content of an article in a modal pop-up
New Member Posts: 4 Join Date: 5/15/09 Recent Posts
Has a remedy to this situation been found? I'm running into the exact same situation. I'm using the javascript below in a piece of web content to open a modal window with the goal of showing only another piece of web content:

function newpopup() {
var popup = new Liferay.Popup( {
position:[150,150],
modal:true,
width:500,
height:300,
} );
jQuery(popup).load('/web/pcc/carrierselect', { windowState: 'LiferayWindowstate.EXCLUSIVE'});
}

However, the site's header and footer is rendered as well. What else needs to be done to only render the display of a piece of web content on another page?

Many thanks!
thumbnail
682861, modified 16 Years ago.
RE: Display the content of an article in a modal pop-up
Liferay Legend Posts: 1228 Join Date: 4/14/08 Recent Posts
JJ, popup screen content would depend on what is rendered at '/web/pcc/carrierselect'. Generally if it is not a portlet instance-based url, having EXCLUSIVE state would not help.

You can try the following code:
- if you are in LFR 5.2+
- you know the friendly URL where your article portlet is located, eg. /web/guest/myarticle_url;
- you know portlet id of the article you would like to popup (you can fetch it by going to 'Configuration' and taking value of Portlet ID), eg. 56_INSTANCE_g7M1;
- the following code shall popup content of this portlet

<script type="text/javascript">
function popupMe() { 
	var popup = Liferay.Popup({title: "My Article",modal:true,position:[150,150],width:500});
	jQuery(popup).load(
 		'/web/guest/myarticle_url/-/56_INSTANCE_g7M1', 
 		{ });
</script>

That's probably is not what you want, but provides some idea.
3272618, modified 16 Years ago.
RE: Display the content of an article in a modal pop-up
New Member Posts: 7 Join Date: 6/8/09 Recent Posts
hi victor,

thanks a lot.
i am getting popup of portlet B from portlet A without header part of portlet B.
i used the following url in portlet A,

/widget/web/guest/registration/-/[b]Registration_WAR_Registration_INSTANCE_1gKG[/b]

but portletids, will be different in different servers(development, production).
how to get portletid of B from portlet A? and where i have to change my code?
there is no link between these 2 portlets, except clicking on hypelink from portelt A, portlet B have to be opened.

pls suggest for this.

thanks in advance.
thumbnail
682861, modified 16 Years ago.
RE: Display the content of an article in a modal pop-up
Liferay Legend Posts: 1228 Join Date: 4/14/08 Recent Posts
The only way to make actions within portlet in a popup mode, stay in it and render results is via AJAX calls. If you do not do AJAX, any other action will be changing current url and popup portlet will be closing because of this change.

Have some reading about AJAX. Rough idea is: within your popup jsp have div container with known id, then when action is submitted, the result shall be rendered back into this div using jQuery.load() method.


<form name="<portlet:namespace/>yourForm" action="your portlet action">
// your form params

// your button
<input type="button" onclick="javascript:<portlet:namespace/>buttonClicked();return false;">

</form>

<script type="text/javascript">
// this js call will submit action and result is going to be rendered within given <div>
function <portlet:namespace/>buttonClicked() {
	var inputs = jQuery("input, textarea, select", document.<portlet:namespace/>yourForm); 
	var url = document.<portlet:namespace/>yourForm.action +  "&" + inputs.serialize();
	jQuery('#<portlet:namespace/>content').load(url);         
}
</script>

<div id="<portlet:namespace/>content">
this is where the rendering result will have to go to
</div>