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]
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 trying to add a click listener to a button in a leaftlet popup in my ionic app.
Here I am creating the map & displaying markers, also the method I want called when the header tag is clicked is also below:
makeCapitalMarkers(map: L.map): void {
let eventHandlerAssigned = false;
this.http.get(this.capitals).subscribe((res: any) => {
for (const c of res.features) {
const lat = c.geometry.coordinates[0];
const lon = c.geometry.coordinates[1];
let marker = L.marker([lon, lat]).bindPopup(`
<h4 class="link">Click me!</h4>
`);
marker.addTo(map);
}
});
map.on('popupopen', function () {
console.log('Popup Open')
if (!eventHandlerAssigned && document.querySelector('.link')) {
console.log('Inside if')
const link = document.querySelector('.link')
link.addEventListener('click', this.buttonClicked())
eventHandlerAssigned = true
}
})
}
buttonClicked(event) {
console.log('EXECUTED');
}
When I click this header, Popup Open & Inside if are printed in the console, so I know I'm getting inside the If statement, but for some reason the buttonClicked() function isn't being executed.
Can someone please tell me why this is the current behaviour?
I just ran into this issue like 2 hours ago. I'm not familiar with ionic, but hopefully this will help.
Create a variable that keeps track of whether or not the content of your popup has an event handler attached to it already. Then you can add an event listener to the map to listen for a popup to open with map.on('popupopen', function(){}). When that happens, the DOM content in the popup is rendered and available to grab with a querySelector or getElementById. So you can target that, and add an event listener to it. You'll have to also create an event for map.on('popupclose', () => {}), and inside that, remove the event listener from the dom node that you had attached it to.
You'd need to do this for every unique popup you create whose content you want to add an event listener to. But perhaps you can build a function that will do that for you. Here's an example:
const someMarker = L.marker(map.getCenter()).bindPopup(`
<h4 class="norwayLink">To Norway!</h4>
`)
someMarker.addTo(map)
function flyToNorway(){
map.flyTo([
47.57652571374621,
-27.333984375
],3,{animate: true, duration: 5})
someMarker.closePopup()
}
let eventHandlerAssigned = false
map.on('popupopen', function(){
if (!eventHandlerAssigned && document.querySelector('.norwayLink')){
const link = document.querySelector('.norwayLink')
link.addEventListener('click', flyToNorway)
eventHandlerAssigned = true
}
})
map.on('popupclose', function(){
document.querySelector('.norwayLink').removeEventListener('click', flyToNorway)
eventHandlerAssigned = false
})
This is how I targeted the popup content and added a link to it in the demo for my plugin.
So yes you can't do (click) event binding by just adding static HTML. One way to achieve what you want can be by adding listeners after this new dom element is added, see pseudo-code below:
makeCapitalMarkers(map: L.map): void {
marker.bindPopup(this.popUpService.makeCapitalPopup(c));
marker.addTo(map);
addListener();
}
makeCapitalPopup(data: any): string {
return `` +
`<div>Name: John</div>` +
`<div>Address: 5 ....</div>` +
`<br/><button id="myButton" type="button" class="btn btn-primary" >Click me!</button>`
}
addListener() {
document.getElementById('myButton').addEventListener('click', onClickMethod
}
Ideally with Angular, we should not directly be working with DOM, so if this approach above works you can refactor adding event listener via Renderer.
Also I am not familiar with Leaflet library - but for the above approach to work you need to account for any async methods (if any), so that you were calling getElementById only after such DOM element was successfully added to the DOM.
I am new to the Sharepoint 2010. I have basic understanding but not sure about the coding part in SP2010.
I have one contact list and I have one button on different page.
I want when I click on that button, new pop-up window should appear contains that only contact list and on window there should a close button too.
I have sharepoint designer also and heard that it's possible through JS coding but not sure how to do this and where to add JS coding into the SP 2010 or SP designer 2010.
You could use SP.UI.ModalDialog.showModalDialog for this requirement.
Sample script.
<script type="text/javascript">
function OpenDialog(dialogUrl, dialogTitle) {
var options = {
// define a URL (and yes, you can pass params to that URL) or reference your HTML object, but NOT both!
url: '/Lists/SourceList/EditForm.aspx?ID=1&IsDlg=1',
tite: 'Modal Title',
allowMaximize: false,
showClose: true,
width: 430,
height: 230,
dialogReturnValueCallback: myCallbackFunction
};
SP.UI.ModalDialog.showModalDialog(options);
}
function myCallbackFunction(result) {
switch (result) {
case SP.UI.DialogResult.OK:
alert("You clicked OK");
// reload data as necessary here
break;
case SP.UI.DialogResult.cancel:
alert("You clicked cancel or close.");
break;
}
}
</script>
Show Modal Dialog
I am using the app creator and trying to react to close tab window event using the code below.
I then preview the app in a separate window, but when I close the tab I don't get the confirmation pop up.
When I inject this code in the js console it works as expected.
Doesn't cloudfare app support such functionality?
window.onbeforeunload = function (e) {
// Your logic to prepare for 'Stay on this Page' goes here
return "Please click 'Stay on this Page' and we will give you candy";
};
I tested this and was able to see the pop up when after clicking to close the tab. Are you certain that this assignment is happening? In the previewed window, what is the output of window.onbeforeunload?
You also need to make sure to set the returnValueof e to something other than null e.g. :
function sendAlert() {
window.onbeforeunload = (e) => {
const dialogText = 'Random Text';
e.returnValue = dialogText;
return dialogText; }
}
i am just trying to implement facebook and twitter in my Webworks App and cannot get them work together.
I am using the FaceBook-OAuth-2 and the Twitter-OAuth-1 sample and i just put both stuff together and my problem is that only the first startOAuth() opens a window in the app to login the second doesn't so if i first clicked facebook it works after when i try twitter nothing happens.
https://github.com/blackberry/BB10-WebWorks-Samples
thanks
function setClickHandlers() {
console.log('set click handlers');
var fb = document.getElementById('facebookOn');
fb.addEventListener('click', function(e) {
// if the childWindow is already open, don't allow user to click the button
if(childWindow !== null) {
return false;
}
e.preventDefault();
toast('Contacting Facebook...');
setTimeout(function() {
startOAuth();
}, 500);
});
console.log('set twitter click handlers');
var tw = document.getElementById('twitterOn');
tw.addEventListener('click', function(e) {
// if the childWindow is already open, don't allow user to click the button
if(childWindow !== null) {
return false;
}
e.preventDefault();
toast('Fetching access token...');
setTimeout(function() {
twittergetAccessToken();
}, 500);
});
}
I would start by adding some debug code in your click handler to see if that's getting called when you click the button in the first place.
If it is, then I recommended you use Web Inspector (console) to see if there are any errors. If there are, they'll show up there.
Good reference for Web Inspector here - http://developer.blackberry.com/html5/documentation/web_inspector_overview_1553586_11.html
If the click handler is not being fired then perhaps you have the wrong element ID, or the setClickHandlers function is not being executed.