How to open new popup window from liferay portal using jsp? - javascript

How to open new popup window from portal using java script.
I have jsp page with button , if i click the button need to open new popup window from portal.
onClick="window.open('/html/viewpdf.jsp','mywindow','width=500,height=350,toolbar=no,resizable=yes')">
this doesn't working jsp page.

Try this:
onClick="
var organizationWindow = window.open('<portlet:renderURL windowState="<%= LiferayWindowState.POP_UP.toString() %>"><portlet:param name="jspPage" value="/html/viewpdf.jsp"/><portlet:param name="redirect" value="#"/></portlet:renderURL>',
'title',
'directories=no, height=340, location=no, menubar=no, resizable=yes,scrollbars=yes, status=no, toolbar=no, width=680');
organizationWindow.focus();"

you can create an icon <liferay-ui:icon image="add" message="Add a Person to this group" url="javascript:alertAdd();" />
then add the script that this icon calls to open the popup
<aui:script use="aui-dialog,aui-overlay-manager">
Liferay.provide(
window,
'alertAdd',
function() {
var instance = this;
var url='${details}';
Liferay.Util.openWindow(
{
cache: false,
dialog: {
align: Liferay.Util.Window.ALIGN_CENTER,
after: {
render: function(event) {
this.set('y', this.get('y') + 50);
}
},
width: 820
},
dialogIframe: {
id: 'addIFrame',
uri: url
},
title: Liferay.Language.get('cloud'),
uri: url
}
);
},
['liferay-util-window']
);
NOTE that you will need the URL ${details}
<portlet:renderURL var="details">
<portlet:param name="mvcPath" value="/html/grouping/member_search_popup.jsp"/></portlet:renderURL>

Yes , this opening popup window.But in liferay portal just opening http://localhost:8080/web/guest only. not opening the viewpdf.jsp.
my requirment is print the datatable values from the page.So datatable have scrollbar, though doesn't print page not correct.
So that i planned to display the datatable values in the popup window and there print button, it should display the all data.
function callsubmit(){
window.print();
window.opener.document.location = window.opener.document.location.href;
window.close();
}
I would like know how to print datatable all values to print.

Related

Target="_blank" opening in old window

I have an asp.net 2.0 website. On one page - let's call it "P1", I have a button that opens a new window using javascript - let's call the new window "P2".
<script type="text/javascript">
function openMapEditor() {
var editor = window.open('<%= Page.ResolveURL("~/imgmap/MapEditor.aspx") %>', '', 'scrollbars=yes, resizable=yes, width=965, height=800');
var timer = setInterval(function() {
if(editor.closed) {
clearInterval(timer);
__doPostBack('','');
}
}, 1000);
}
</script>
...
<asp:Button ID="cmdEditMap" runat="server" CssClass="cmdbutton" Text="Upload Image" OnClientClick="openMapEditor(); return false;" />
Clicking on the button opens an actual new window in Chrome as I had hoped.
In the new window, I have a link to open another page.
<a name="img_href_check" href="http://facebook.com/fn" target="_blank" onclick="return (new RegExp('^https?://+')).test(this.getAttribute('href'));">Check</a>
What I was hoping was that the page would open in a new tab in P2, but what actually happens is that it is opened in a new tab P1.
How can I make it so that the page opens in a new tab in P2?
Thanks in advance!

How to prevent execCommand('SaveAs', from opening new tab or window

I have to generate a download pop up in IE.
Iam using the below code.
when i click on buttton it opens a new tab and the Save as Dialogue box
function SaveContents(element) {
if (document.execCommand) {
var oWin = window.open("about:blank","_blank");![enter image description here][1]
oWin.document.write(element);
oWin.document.close();
var success = oWin.document.execCommand('SaveAs', false, "FilteredReport.xls")
oWin.close();
}
}
How can i make the Save as Dialogue box appear with out opening new window or tab..
Also can i write data of a string to excel with out using
oWin.document.write(element);
beacuse its getting written to the new tab or window that opens
Below image explains..
Instead of IEwindow.document.execCommand('SaveAs', true, fileName + ".xls"); use below snippet
if (window.navigator.msSaveOrOpenBlob) {
blobObject = new Blob([CSV]);
window.navigator.msSaveOrOpenBlob(blobObject, 'Export.xls');
}
IEwindow.close();
include an iframe with ID IframeForExcelExportonIE
<iframe id="IframeForExcelExportonIE" style="display: none"></iframe>
IframeForExcelExportonIE.document.open("txt/html", "replace");
IframeForExcelExportonIE.document.write(cln.innerHTML);
IframeForExcelExportonIE.document.close();
IframeForExcelExportonIE.focus();
sa = IframeForExcelExportonIE.document.execCommand("SaveAs", true, " test.xls");

CKEditor and elFinder in modal dialog

I need to integrate elFinder to CKEditor. I followed this:
https://github.com/Studio-42/elFinder/wiki/Integration-with-CKEditor
It is working but opening pop-up window for image selection is not very nice so I want to open elFinder in modal dialog.
For "modal integration" i followed this thread:
http://bxuulgygd9.tal.ki/20110728/integration-with-ckeditor-759177/
The last post there partially works. It really opens elfinder in modal. BUT:
When I want to insert image URL to URL field in CKFinder I have to know its exact ID. Is also does not fill image resolution and brings some other problems. The best solution would be to run function called in "ordinary popup" integration, which handles everything:
window.opener.CKEDITOR.tools.callFunction(funcNum, file);
But in "popup integration", funcNum callback is registered, in modal integration it is not so I'm unable call it. Do you have any tip to run elfinder (or any other image manager - it would be the same) in modal window? I'm desperate.
I have solved it myself. This code is combination of several tutorials and allows to fully integrate elFinder in modal window. Maybe somebody will consider it useful.
CKEDITOR.on('dialogDefinition', function(event) {
var editor = event.editor;
var dialogDefinition = event.data.definition;
console.log(event.editor);
var dialogName = event.data.name;
var tabCount = dialogDefinition.contents.length;
for (var i = 0; i < tabCount; i++) {
var browseButton = dialogDefinition.contents[i].get('browse');
if (browseButton !== null) {
browseButton.hidden = false;
browseButton.onClick = function(dialog, i) {
editor._.filebrowserSe = this;
jQuery('<div \>').dialog({modal: true, width: "80%", title: "Insert image", zIndex: 99999,
create: function(event, ui) {
jQuery(this).elfinder({
resizable: false,
url: "/path/to/connector.php",
getFileCallback: function(url) {
CKEDITOR.tools.callFunction(editor._.filebrowserFn, url);
jQuery('a.ui-dialog-titlebar-close[role="button"]').click()
}
}).elfinder('instance')
}
})
}
}
}
});

confirm dialog in dojo

How to create a confirm dialog box in dojo? I would like to have an ok cancel dialog to appear on button click with dojo dialog (no javascript confirm dialog).
So far i can only display a dialog on click event.
Heres my code:
<script type="text/javascript">
dojo.require("dijit.form.Button");
dojo.require("dijit.Dialog");
var secondDlg;
dojo.ready(function(){
// create the dialog:
secondDlg = new dijit.Dialog({
title: "Programmatic Dialog Creation",
style: "width: 300px",
draggable:false
});
});
showDialogTwo = function(){
// set the content of the dialog:
secondDlg.set("content", "Hey, I wasn't there before, I was added at " + new Date() + "!");
secondDlg.show();
}
</script>
</head>
<body class="claro" style="margin-right:10px;">
<button id="buttonTwo" data-dojo-type="dijit.form.Button" data-dojo-props="onClick:showDialogTwo" type="button">Show me!</button>
</body>
How can i make this ok cancel dialog box?
<script type="dojo/method" event="onClick">
var dialog = new dijit.Dialog({
title: "Delete Switch Type",
style: "width: 400px",
content : "Do you really want to delete ?????<br>"
});
//Creating div element inside dialog
var div = dojo.create('div', {}, dialog.containerNode);
dojo.style(dojo.byId(div), "float", "left");
var noBtn = new dijit.form.Button({
label: "Cancel",
onClick: function(){
dialog.hide();
dojo.destroy(dialog);
}
});
var yesBtn = new dijit.form.Button({
label: "Yes",
style : "width : 60px",
onClick : <your function here>,
dialog.hide();
dojo.destroy(dialog);
}
});
//adding buttons to the div, created inside the dialog
dojo.create(yesBtn.domNode,{}, div);
dojo.create(noBtn.domNode,{}, div);
dialog.show();
</script>
I'm using this code as inline dojo/method - on the click event of the button. you can modify anyway
The Confirm Dialog is supported since Dojo 1.10.
See the release notes and the documentation.
The solution above does not take into account the little cross at the top right of the dialog.
I had done, long ago, a little suite of dialogs, you might find some happiness here, especially ConfirmDialog.js
I just uploaded them on github today so you can take a look at them : http://github.com/PEM-FR/Dojo-Components/tree/master/dojox/dialog
They should be usable "as-is" or with minor changes

Creating this kind of popup in Firefox Addons?

I'm trying to create a popup like this for use in my addon - is it possible? If so, how's it done?
Thanks in advance!
It's possible in Firefox/XUL, it's also called as door-hanger popup.
https://developer.mozilla.org/en/JavaScript_code_modules/PopupNotifications.jsm#Notification_events
http://scenari-platform.org/svn/dev-core/trunk/Lib_XulRunner/Darwin/modules/PopupNotifications.jsm
For example, the code here is popup notification with time out function, if you dont want you can remove the time out function.
The normal functionality of the time out function & it will disappear automatically if the user clicks any where on the browser.
Components.utils.import('resource://app/modules/PopupNotifications.jsm');
var notify = new PopupNotifications(gBrowser,
document.getElementById("notification-popup"),
document.getElementById("notification-popup-box"));
var notification = notify.show(
gBrowser.selectedBrowser, /*browser*/
"Extension-popup", /*id*/
"Hi, there!, I got a message for you!!",/*message*/
null, /* anchor ID */
/* mainAction */
{
label: "Build PDE",
accessKey: "D",
callback: function() {
if(nodeSRC!=null) pde.emptyNodeSRC(nodeSRC);
window.openDialog("chrome://myextension/content/mypage.xul", "hello", "chrome,width=400,height=360",userContent, nodeSRC);
}
},
null, /* secondaryActions*/
{ blablal:'options'}
);
setTimeout(function(){
notification.remove();
}, 900);
It is also possible to do this by creating a panel and setting it's type to "arrow". In fact that's almost the same example that they have on the panel.type reference page:
Here's how to do it:
<panel id="testPanel" type="arrow">
<vbox>
(... content goes here ...)
</vbox>
</panel>
Then you would open it with:
panel.openPopup(elementThatShouldTriggerIt, "before_start", 0, 0, false, false);
More information on MDN.Panel

Categories

Resources