Am using Liferay 6.2 and trying to get a external page in a pop up.
Am using the following code
function ShowPopup(){
AUI().ready(function(A) {
AUI().use('aui-dialog', 'aui-io', function(A) {
var url1 = '/myportlet/myview.jsp';
// var url1 = 'www.google.com';
Liferay.Util.openWindow(
{
dialog: {
cache: false,
width: 800,
height: 700,
modal: true
},
id:'myview',
uri: url1
}
);
Liferay.provide(
window,
'closePopup',
function(popupIdToClose) {
var dialog = Liferay.Util.getWindow(popupIdToClose);
dialog.destroy(); // You can try toggle/hide whatever You want
},
['aui-base','aui-dialog','aui-dialog-iframe']
);
});
});
If I provide the first var url1('/myportlet/myview.jsp'), the popup displays properly, as it is internal link, But if I provide the second var url1('www.google.com'). The localhost url is prepended for the URI(like http://localhost:8080/www.google.com), so it is not able to display the external link in pop up.
How can i make the external url display in the popup.
If your target has different domain, you should use absolute URL including protocol - http://www.google.com.
Anyway, I think it may be hard to embed google as recently there is new trend for securing sites against iframing (and I think google has introduced these improvements). More details here How to show google.com in an iframe?.
Related
I'm helping with a Squarespace site and it has a custom form added in code on a particular page. The form collects the payer's info, then can enter any amount in the "Total to charge" field, then it is supposed to display the 2.7% fee. However, I can ONLY get the fee to display if I refresh the page (chrome, safari, either one). Click here to see the page...let me know
here is a snippet of code:
<script>
$(document).ready(function () {
var $amount = $('input[name="amount_1"]');
var $fee = $("#fee");
var $total = $("#total");
var $amount_2 = $("input[name='amount_2']");
var processing_fee = .027;
var isCurrency = function (inval) {
var regex = /^[1-9]\d*(((,\d{3}){1})?(\.\d{0,2})?)$/;
if (regex.test(inval)) {
return true;
}
return false;
};
$amount.on('input propertychange', function () {
if (isCurrency($amount.val())) {
var fee = ($amount.val() * processing_fee).toFixed(2);
var total = (Number(fee) + Number($amount.val())).toFixed(2);
$fee.text('$' + fee);
$amount_2.val(fee);
$total.text('$' + total);
}
});
$amount.on('blur', function () {
$amount.val($amount.val().replace("$", ""));
$amount.val(Number($amount.val()).toFixed(2));
if (!isCurrency($amount.val())) {
$amount.val("");
}
});
$("#paymentform").validate({
submitHandler: function (form) {
form.submit();
}
});
});
</script>
When a custom script only runs on page refresh, the cause is likely to be Squarespace's AJAX loading:
Occasionally, Ajax may conflict with embedded custom code or anchor
links. Ajax can also interfere with site analytics, logging hits on
the first page only.
Disabling AJAX is often a simple solution:
You can disable Ajax in the Style Editor, with some exceptions:
Ajax can't be disabled in Skye, Foundry, or Tudor.
Ajax can't be disabled on the blog landing page for Farro and Haute. If you uncheck Enable Ajax Loading in these templates, they
will still use Ajax to load the Blog Page.
To enable or disable Ajax:
In the Home Menu, click Design, and then click Style Editor.
Scroll down to Site: Loading.
Check or uncheck Enable Ajax Loading.
If you do not want to disable AJAX, then see "Option 2" here for how to write your code so that it will work on initial page load and on AJAX page loads.
I am looking for a way to display an on-demand pop in a Crossrider extension, in the same fassion as the Javascript 'confirm' dialog. I have an HTML page in the resources and I would like to use it in a popup, which will be displayed whenever a certain message is dispatched. I realize there is functionality to display popups in Crossrider (appAPI.browserAction.setPopup), however I would like to display a custom popup on-demand, instead of a simple JS 'confirm' dialog. Is there a way of doing that? Thank you.
You can use a combination of appAPI.browserAction.setPopup and appAPI.browserAction.clearPopup to control the popup. In the following example, the extension scope code determines which popup is required based on the page visited and sets it accordingly:
extension.js:
appAPI.ready(function($) {
if (appAPI.isMatchPages("*google", "*msn")) {
// Send message to background to set the popup based on the page url
appAPI.message.toBackground({
request: 'set-popup',
popup: (location.hostname.indexOf('google') !== -1)
? 'google.html'
: 'msn.html'
});
} else {
// Send message to background to clear the popup for other pages
appAPI.message.toBackground({
request: 'clear-popup'
});
}
});
background.js:
appAPI.ready(function($) {
appAPI.browserAction.setResourceIcon('icon.jpg');
appAPI.message.addListener(function(msg) {
switch(msg.request) {
case 'set-popup':
// When setting the page, first clear the existing popup
appAPI.browserAction.clearPopup();
// then set the new popup
appAPI.browserAction.setPopup({
resourcePath: msg.popup,
width: 300,
height: 200
});
break;
case 'clear-popup':
appAPI.browserAction.clearPopup();
break;
}
});
});
[Disclosure: I am a Crossrider employee]
I am migrating the AUI popup dialog window from liferay 6.1 to liferay 6.2. I see that there are some specific changes to be made. I had some problems with display of buttons but it is resolved now. But the problem is with the close icon (x) which should be on the top right corner. It disappeared suddenly as soon as I added a save button.
Here is my code:
myPopup = AUI().use('aui-base','liferay-util-window','aui-io-deprecated', 'event', 'event-custom', function(A) {
var buttons =[{
cssClass: 'button_close',
label: 'Save',
render:true,
id: 'myPopupButton',
on: {
click: function() {
myPopupSubmit();
}}
}];
myPopup = Liferay.Util.Window.getWindow(
{
dialog: {
title : a + ' mytitle',
centered : true,
height : 600,
width : 500,
draggable : true,
resizable : true,
modal : true,
toolbars: {
footer:buttons
},
}}).plug(A.Plugin.IO, {
uri : url
}).render();
myPopup.show();
});
}
Please let me know if you have any idea on it..
on myPopupSubmit I have also written code to close the popup as:
top.document.getElementById('closethick').click();
Since there is no closethick button it returns null.
Using the modal dialog example as a comparison, the X close button is removed when using the toolbars property.
Reviewing the source code for the toolbars property (line 309 at time of writing this) indicates that if you use this property directly, you'll need to include your own X close in the header.
An alternative would be to use the addToolbar function (as seen in the example) to include your buttons while preserving the default toolbars.
modal.addToolbar([{
cssClass: 'button_close',
label: 'Save',
render:true,
id: 'myPopupButton',
on: {
click: function() {
myPopupSubmit();
}
}
}]);
I would also consider making the instance of the dialog available to your myPopupSubmit function so that you would have direct access to perform dialog.hide() or calling dialog.hide() after myPopupSubmit versus using the X close approach.
If sticking with the current approach, the id being used will not work, you'll need to use a CSS selector as the YUI based id will change.
I am needing to send a tweet for from my iphone/ipad app using Appcelerator Titanium & javascript. I found the following example on github (code also posted below for this):
https://gist.github.com/2eabc31db388144b3abc
I have created my app details (key,secret etc) in my twitter developer account and using the code from the example i get the twitter login and authorisation popup but once you click authorise, all i get is a webview showing the callback url (that i was required to put in the twitter app settings). So the app is stuck on a webview showing the callback url but does nothing after. If i close the popup window it just goes back to my app without sending a tweet.
Can anyone help?
code in app.js:
var win = Ti.UI.createWindow({ backgroundColor: '#fff' });
var shareButton = Ti.UI.createButton({
width: 90, bottom: 10, height: 30,
title: 'Tweet!"'
});
win.add(shareButton);
win.open();
var social = require('social');
var twitter = social.create({
site: 'Twitter',
consumerKey: 'XXXXXXXXXXXXXXXX',
consumerSecret: 'XXXXXXXXXXXXXXXXXXXXX'
});
shareButton.addEventListener('click', function() {
twitter.share({
message: 'Hello, world!',
success: function() {
alert('Tweeted!');
},
error: function(error) {
alert('Oh no! ' + error);
}
});
});
As Aaron answered on the Q&A, when using Social.js, you should not use a callback URL. The code itself will watch the web view for what it needs.
I have created an application for Facebook, but I want show all content in a dialog box like Facebook style. How? like this http://www.bigthink.it/wp-content/uploads/2010/06/fb-dialog-box.jpg
Your question is not clear. What content do you want to show? What type of dialog? Do you have any code that you can share?
If you just want to wrap some content in a fb-like dialog, then you can use the javascript sdk method FB.Dialog.create, it's not officially documented (as far as I'm aware), but it works.
Here's an example of use:
var fbDialog = null,
html = '<img src="http://www.bigthink.it/wp-content/uploads/2010/06/fb-dialog-box.jpg"/>',
params = {
display: "iframe",
content: html,
loader: true,
closeIcon: true,
visible: true,
onClose: function() {
FB.Dialog.remove(fbDialog);
}
}
fbDialog = FB.Dialog.create(params);