If I open two dialogs
dialogBusy = new sap.m.BusyDialog();
dialogBusy.setShowCancelButton(true);
dialogBusy.setTitle("1");
dialogBusy.open();
dialogBusy = new sap.m.BusyDialog();
dialogBusy.setShowCancelButton(true);
dialogBusy.setTitle("2");
dialogBusy.open();
dialogBusy.close();
//dialogBusy.close();
When I call close function, I close only the 2nd dialog (correct).
How can I close all dialogs?
Dialogs can be closed conveniently with sap/m/InstanceManager.closeAllDialogs.
// InstanceManager required from "sap/m/InstanceManager"
InstanceManager.closeAllDialogs(/*fnAfterClose?*/));
Use two different dialog instances.
<script src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js" id="sap-ui-bootstrap" data-sap-ui-theme="sap_bluecrystal" data-sap-ui-libs="sap.m,sap.ui.commons"></script>
<script>
var dialogBusy = new sap.m.BusyDialog();
dialogBusy.setShowCancelButton(true);
dialogBusy.setTitle("1");
dialogBusy.open();
var dialogBusy2 = new sap.m.BusyDialog();
dialogBusy2.setShowCancelButton(true);
dialogBusy2.setTitle("2");
dialogBusy2.open();
setTimeout(function() {
dialogBusy.close();
}, 2000);
setTimeout(function() {
dialogBusy2.close();
}, 1000);
</script>
Related
When we use the DFP option used to target ads with a Key/Value pair we noticed it does not work when Prebid is also running. It appears that Prebid is overriding the setTargeting option. It would seem to be a common issue, but I cannot find any information about it.
If I disable prebid, the setTargeting works fine.
I've also tried placing the setTargeting inside the pbjs.que.push function, just after pbjs.setTargetingForGPTAsync(); but that did not help.
I've paired down the code to include just the basic setup to show how we have things configured.
<script src='https://www.googletagservices.com/tag/js/gpt.js'></script>
<script type="text/javascript" src="https://ads.bninews.com/corporate/prebid/latest/prebid.js"></script>
<script type="text/javascript" src="https://ads.bninews.com/corporate/prebid/latest/prebid_config.js?20180913"></script>
<script>
var googletag = googletag || {};
googletag.cmd = googletag.cmd || [];
</script>
<script>
googletag.cmd.push(function() {
googletag.defineSlot('/XXX/slot-300x250-1', [[300, 250]], 'div-gpt-ad-bigblock-1').addService(googletag.pubads());
googletag.pubads().setTargeting("pageurl", "/home/");
googletag.pubads().enableSingleRequest();
googletag.pubads().disableInitialLoad();
googletag.enableServices();
});
</script>
<!-- Prebid Boilerplate Section START -->
<script>
pbjs.que.push(function() {
pbjs.addAdUnits(adUnits);
pbjs.requestBids({
bidsBackHandler: initAdserver,
timeout: PREBID_TIMEOUT
});
});
function initAdserver() {
if (pbjs.initAdserverSet) return;
pbjs.initAdserverSet = true;
googletag.cmd.push(function() {
pbjs.que.push(function() {
pbjs.setTargetingForGPTAsync();
googletag.pubads().refresh();
});
});
}
// in case PBJS doesn't load
setTimeout(function() {
initAdserver();
}, FAILSAFE_TIMEOUT);
</script>
<!-- Prebid Boilerplate Section END -->
It's definitely the sequence of events that is wrong. I don't even think pbjs.setTargetingForGPTAsync() is needed at all, but you do need to wait for prebid to return with the bids before googletag.pubads().setTargeting("pageurl", "/home/");
You can solve this with a Promise that would be wrapped around prebid, and wait for the promise to resolve inside so something like:
var prebidPromiseResponse = new Promise( function(resolve){
pbjs.que.push(function() {
pbjs.addAdUnits(adUnits);
pbjs.requestBids({
bidsBackHandler: function(bids){
if (pbjs.initAdserverSet) return;
pbjs.initAdserverSet = true;
googletag.cmd.push(function() {
pbjs.que.push(function() {
resolve(bids);
});
});
},
timeout: PREBID_TIMEOUT
});
});
})
And then google tag
googletag.cmd.push(function() {
googletag.defineSlot('/XXX/slot-300x250-1', [[300, 250]], 'div-gpt-ad-bigblock-1').addService(googletag.pubads());
prebidPromiseResponse.then(function(bids){
googletag.pubads().setTargeting("pageurl", "/home/");
googletag.pubads().enableSingleRequest();
googletag.pubads().disableInitialLoad();
googletag.enableServices();
});
});
In a SAPUI5 application I would like to update the content of a control (e. g. a tile) only when this is currently visible to the user.
I created a function like this:
updatePage: function() {
for (var i = 0; i < this.myTiles.length; i++) {
if (this.myTiles[i].updater) {
this.myTiles[i].updater();
}
}
setTimeout(this.updatePage.bind(this), 10000);
},
.. where the updater is a custom function I added to the tiles that is in charge to update their content.
The problem is: I want to check if the tile is currently visible to the user (i. e. is not in a page or in a tab that is not currently selected, but was rendered previously).
Is there a way to achieve this using object properties? Do I need to manage it manually?
You can utilize jQuery do achieve that.
// determine whether your control is still part of the active DOM
jQuery.contains(document, yourControl.$());
// determine whether your control is visible (in terms of CSS)
yourControl.$().is(':visible');
// combined
MyControl.prototype.isVisible = function() {
return this.$().length && // has rendered at all
jQuery.contains(document, this.$()) && // is part of active DOM
this.$().is(':visible'); // is visible
};
Elements could still be invisible to the user by being:
out of the viewport
visibility: hidden
opacity: 0
...
Also check this answer
BR
Chris
http://api.jquery.com/jQuery.contains/
http://api.jquery.com/visible-selector/
The web API IntersectionObserver is now supported by all major browsers, including Safari.
Basic syntax
const myObserver = new IntersectionObserver(callback/*, settings?*/);
myObserver.observe(domElement);
Demo
Below is a demo with UI5. Run the snippet and try to scroll there. The page title changes depending on the visibility of the target element:
globalThis.onUI5Init = () => sap.ui.require([
"sap/ui/core/mvc/XMLView",
"sap/ui/model/json/JSONModel",
"sap/ui/core/mvc/Controller",
], async (XMLView, JSONModel, Controller) => {
"use strict";
const control = await XMLView.create({
definition: document.getElementById("myxmlview").textContent,
models: new JSONModel({ "ratio": 0 }),
controller: new (Controller.extend("demo.MyController", {
onInit: function () {
this.intersectionObserver = new IntersectionObserver(entries => {
const targetEl = this.byId("myBox").getDomRef();
const entry = entries.find(entry => entry.target === targetEl);
const model = this.getView().getModel();
model.setProperty("/ratio", entry && entry.intersectionRatio);
});
},
onBeforeRendering: function () {
this.intersectionObserver.disconnect();
},
onAfterRendering: function () {
const targetEl = this.byId("myBox").getDomRef();
this.intersectionObserver.observe(targetEl);
},
onExit: function () {
this.intersectionObserver.disconnect();
this.intersectionObserver = null;
},
}))(),
});
control.placeAt("content");
});
<script id="sap-ui-bootstrap"
src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-libs="sap.ui.core,sap.m"
data-sap-ui-async="true"
data-sap-ui-theme="sap_horizon"
data-sap-ui-oninit="onUI5Init"
data-sap-ui-resourceroots='{ "demo": "./" }'
data-sap-ui-compatVersion="edge"
data-sap-ui-excludejquerycompat="true"
data-sap-ui-xx-waitForTheme="init"
></script>
<script id="myxmlview" type="text/xml">
<mvc:View controllerName="demo.MyController"
xmlns:mvc="sap.ui.core.mvc"
xmlns:core="sap.ui.core"
xmlns="sap.m"
displayBlock="true">
<App>
<Page title="Tile visible: {= ${/ratio} > 0}">
<FlexBox renderType="Bare"
height="360vh"
justifyContent="Center"
alignItems="Center">
<core:Icon id="myBox"
src="sap-icon://color-fill"
size="5rem"
color="Critical"/>
</FlexBox>
</Page>
</App>
</mvc:View>
</script>
<body id="content" class="sapUiBody sapUiSizeCompact"></body>
I am trying to create an extension to display all the latest posts fetched from my feed using google feeds api. To implement this, I have added this code in background.js:
appAPI.ready(function() {
// Global variable to hold the toggle state of the button
var buttonState = true;
// Sets the initial browser icon
appAPI.browserAction.setResourceIcon('images/icon.png');
// Sets the tooltip for the button
appAPI.browserAction.setTitle('My Postreader Extension');
appAPI.browserAction.setPopup({
resourcePath:'html/popup.html',
height: 300,
width: 300
});});
and in popup.html,
<!DOCTYPE html><html><head><meta http-equiv="X-UA-Compatible" content="IE=edge">
<script type="text/javascript">
function crossriderMain($) {eval(appAPI.resources.get('script.js')); }</script>
</head>
<body><div id="feed"></div></body></html>
The script.js file is-
google.load("feeds", "1");
function initialize() {
var feed = new google.feeds.Feed("http://www.xxxxx.com/feed/");
feed.setNumEntries(10);
feed.load(function(result) {
if (!result.error) {
var container = document.getElementById("feed");
for (var i = 0; i < result.feed.entries.length; i++) {
var entry = result.feed.entries[i];
var div = document.createElement("div");
var link = document.createElement('a');
link.setAttribute('href', entry.link);
link.setAttribute('name', 'myanchor');
div.appendChild(document.createTextNode(entry.title));
div.appendChild(document.createElement('br'));
div.appendChild(link);
div.appendChild(document.createElement('br'));
container.appendChild(div);
}
}
});
}
google.setOnLoadCallback(initialize);
But I am unable to get desired result.The popup doesn't display anything.It just remain blank.
Since you are using a resource file for the popup's content, it's best to load the remote script from the crossriderMain function, as follows:
<!DOCTYPE html>
<html>
<head>
<!-- This meta tag is relevant only for IE -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script type="text/javascript">
function crossriderMain($) {
appAPI.db.async.get('style-css', function(rules) {
$('<style type="text/css">').text(rules).appendTo('head');
});
appAPI.request.get({
url: 'http://www.google.com/jsapi',
onSuccess: function(code) {
$.globalEval(code);
appAPI.db.async.get('script-js', function(code) {
// runs in the context of the extension
$.globalEval(code.replace('CONTEXT','EXTN'));
// Alternatively, run in context of page DOM
$('<script type="text/javascript">').html(code.replace('CONTEXT','PAGE DOM')).appendTo('head');
});
}
});
}
</script>
</head>
<body>
<h1>Hello World</h1>
<div id="feed"></div>
</body>
</html>
[Disclaimer: I am a Crossrider employee]
Currently i am using the google cloudprint button for my site
<script src="//www.google.com/cloudprint/client/cpgadget.js"></script>
<script defer="defer">
var gadget = new cloudprint.Gadget();
gadget.setPrintButton(document.getElementById("custom_print_button"));
gadget.setPrintDocument("url", "Cloud Print test page",
"http://www.google.com/cloudprint/learn/");
</script>
I want to send an email when I hit the print button, is this possible?
No problem at all... just attach an onclick handler to the print button, or bind the click with jQuery and call a function to do your email. I used it to create a document with Ajax before it was printed:
<script>
function printIT() {
jQuery.ajax({
url: "print_this.php",
context: document.body,
success: function(responseText) {
alert("Document sent!");
return false;
}
});
}
</script>
<button id="print_button_container" class="ui-link" onclick="printIT();"></button>
<script src="//www.google.com/cloudprint/client/cpgadget.js">
</script>
<script defer="defer">
var gadget = new cloudprint.Gadget();
gadget.setPrintButton(document.getElementById("print_button_container"));
gadget.setPrintDocument("url", "My Document", "http://www.yourpath.com/yourdoc.html");
</script>
Simplified version... not tested but should work :)
Our code always goes to fail section. However, we have changed path several time like
'file:///android_asset/www/readme.txt' ,
'../android_asset/www/readme.txt',
'/www/readme.txt", "readme.txt'.
[We have taken "readme.txt" file in www folder]
We picked up the code from the below link.
http://docs.phonegap.com/phonegap_file_file.md.html
I asked a similar question and couldn't really find a solution. Here's a complete example of our method call:
window.resolveLocalFileSystemURI("file:///android_asset",
function(entry){
console.log(entry.fullPath);},
function(evt){
console.log(evt.code);}
);
However during the first phase we've only got a undefined error code while in a fresh testing project we receive error code 1 (file not found, line 56).
By the way: did you realised you miss a backslash? Try to reference file:///android_asset and if it works let me know what you did :)
<!DOCTYPE html>
<html>
<head>
<title>FileReader Example</title>
<script type="text/javascript" charset="utf-8" src="cordova-1.5.0.js"></script>
<script type="text/javascript" charset="utf-8">
// Wait for PhoneGap to load
//
function onLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}
// PhoneGap is ready
//
function onDeviceReady() {
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, gotFS, fail);
}
function gotFS(fileSystem) {
fileSystem.root.getFile("file:///sdcard/example.txt", {create: true}, gotFileEntry, fail);
}
function gotFileEntry(fileEntry) {
fileEntry.file(gotFile, fail);
}
function gotFile(file){
readDataUrl(file);
readAsText(file);
}
function readDataUrl(file) {
var reader = new FileReader();
reader.onloadend = function(evt) {
console.log("Read as data URL");
console.log(evt.target.result);
};
reader.readAsDataURL(file);
}
function readAsText(file) {
var reader = new FileReader();
reader.onloadend = function(evt) {
console.log("Read as text");
console.log(evt.target.result);
};
reader.readAsText(file);
}
function fail(evt) {
console.log(evt.target.error.code);
}
</script>