Dropbox error: Failed to open popup window - javascript

I am experiencing a confusing error (for me it is confusing since I am new to this sort of thing, and I cannot find any good tutorials on it either) when I try to integrate a Dropbox saver into my webpage. The webpage is built using MVC4. The problem I am experiencing is that when I click on the "Save to Dropbox" button, I get the following error in dropins.js:
"Failed to open a popup window. Dropbox.choose and Dropbox.save should only be called from within a user-triggered event handler such as a tap or click event."
What does it mean? How must I rewrite my code to make this work? I've even tried making a button that calls Dropbox.save(), but the same error pops up.
So, the code:
// Button to open the saver dialog.
<button onclick="openSaveDialog();">Save</button>
// Javascript function.
function openSaveDialog() {
window.open('#Url.Action("SaveDialog")', '_blank');
}
// Controller function called by the above Javascript function.
public ActionResult SaveDialog()
{
return View();
}
// Here is the code for the save dialog. Note that the key to the Dropbox javascript link has been omitted for my safety ;)
#{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Save</title>
<script type="text/javascript" src="https://www.dropbox.com/static/api/2/dropins.js" id="dropboxjs" data-app-key="<key omitted for safety>"></script>
</head>
<body>
<div id="save">
</div>
</body>
</html>
Any advice is warmly welcome... been scratching my head at this for a good two days now, trying to find any tutorials at all.

Related

window.print() in Apps Script custom modal dialog box

I am creating a custom modal dialog pop up box in Google Sheets via an Apps Script that is running an onEdit trigger. The idea is, the user clicks on a checkbox in some cell in a column. The trigger detects this edit, and calls a function that utilizes Apps Script UI and HtmlService class. This creates a simple modal dialog box that is built using some html. In the html, I have a button that calls window.print(). However, by calling it, nothing happens. I think it's because of the Same Origin Policy issue. The Html Service is likely using another domain name to launch the dialog box that's different than docs.google.com. So, window calls are likely problematic. Is there another way around this? How does one create customized printing for Google Apps? I've seen some variations of creating a pdf on the fly and printing those, but this seems really inefficient for the end user.
When the checkbox is clicked, the following function is called:
function openDialog() {
var html = HtmlService.createHtmlOutputFromFile('html') ;
SpreadsheetApp.getUi()
.showModalDialog(html, 'Print Receipt');
}
Here is the following html:
<!DOCTYPE html>
<html>
<head><base target="_top">
</head>
<body>
<img src="https://i.imgur.com/someimage.png" alt="Logo" width="100" height="100">
<h3>testing</h3>
<button onclick="print()">Print</button>
</body>
<script>
function print() {
window.print();
}
</script>
</html>');
You should consider renaming the print function to something else, say "printPage" else it may be invoking the native print API. Also, the extra parenthesis in the HTML maybe removed.
<!DOCTYPE html>
<html>
<head><base target="_top">
</head>
<body>
<img src="https://i.imgur.com/someimage.png" />
<h3>testing</h3>
<button onclick="printPage()">Print</button>
</body>
<script>
function printPage() {
window.print();
}
</script>
</html>

JavaFx WebView Window.print does not work

I am trying to integrate the JavaFx WebView into a Swing application. I am through with the implementation and am finally stuck on just one last missing piece. As part of the requirement, we do need the ability to print certain content. The content is all existing third party html / site and all works fine, except for the embedded print button on the pages. The Print button calls the window.print() and somehow that does not work and am unable to print. This is a needed feature for us and am out of ideas and need some help.
<!DOCTYPE html>
<html>
<body>
<p>Click the button to print the current page.</p>
<button onclick="myFunction()">Print this page</button>
<script>
function myFunction() {
window.print();
}
</script>
</body>
</html>
My web engine initialization is as follows:
Runnable r = () ->
{
WebView view = new WebView();
m_WebEngine = view.getEngine();
//view.setContextMenuEnabled(false);
getWebEngine().setOnStatusChanged(getStatusHandler());
getWebEngine().getLoadWorker().workDoneProperty().addListener(getProgressListener());
getWebEngine().getLoadWorker().exceptionProperty().addListener(getErrorListener());
getWebEngine().titleProperty().addListener(getTitleListener());
getWebEngine().getLoadWorker().stateProperty().addListener(getStatusListener());
getWebEngine().setOnAlert(event -> showAlert(event.getData()));
getWebEngine().setConfirmHandler(message -> showConfirm(message));
getWebEngine().setJavaScriptEnabled(true);
getJfxPanel().setScene(new Scene(view));
};
Platform.runLater(r);
I tried with alert, popup, prompt and all other handlers and just doesn't work.
Any help on handling this properly would be greatly appreciated.

Change the html page using a Processing function

I have a Processing sketch that I want to embed in a landing page inside a that will prompt the user to press a button and enter the site.
The function to receive the mouse click is inside the Processing file but needs to change the displayed html page - how can I do this?
<html><head>
<meta charset="utf-8" />
<title>Landing page before the main site</title>
<script src="processing-1.4.1.min.js"></script>
</head><body>
<canvas id="lander" data-processing-sources="lander/lander.pde"></canvas>
</body></html>
And the Processing sketch has the function:
void mousePressed(){
if(overBox){
// push the displayed page to home.html
}
}
Aside from being a terrible idea because you've now locked away what should be web functionality into a canvas (this is what we hate about Flash, too), you're in JavaScript context, so you can just call window.location = "http://...."; and it'll work.
That said, there is absolutely no reason to do what you're about to do here. An HTML5 button label and CSS to style it to look like your button is all you need, using Processing is plain old "you'r doing it wrong" in this instance.

Capture onClose event for Spreadsheet App Modal Dialog in Google Apps Script

I want to do something when the Modal Dialog (opened using showModalDialog()) is closed from the Spreadsheet App.
However I cannot find the reference of such event, in the API documents provided by Google. I found how to capture this event in a Alert Box, and by using this piece of code I can capture how the user closed the Alert Box, but I cannot use this in a Modal Dialog or a Modeless Dialog.
Is there a way to do this? Please kindly answer if you do.
This is not possible. And you should write your script in a way that this does not matter. For example, by showing a big action button in the dialog, making it clear to the user that he must click there for the script to continue.
But if you really want to make this happen, I guess you could use an HtmlService dialog that make regular async calls to the backend and each call waits for the next one before quitting, then if the "next" call does not get in time, it can assume the dialog got closed and execute your close procedure instead of simply quitting.
Here's an alternative solution. You can use google hosted jquery in the HTML (served by GAS) to track unload events when the page is closed. Here is some sample code:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<!-- page content -->
</body>
<!-- Minified google hosted jquery (see https://developers.google.com/speed/libraries/)-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- And here's where the magic happens -->
<script type="text/javascript">
$(document).ready( e => {
console.log('-- DOM ready --');
/** Add jquery unload listener */
$(window).on('unload', e => {
console.log("Invoked just before unload");
// do pre-unload stuff
});
});
</script>
</html>

Javascript function not recognized in CRM 2011 HTML Web resource

Following up from my solved [previous issue][1], I'm having trouble building a simple HTML Web resource containing some basic javascript, page is rendered correctly but script doesn't seem to work properly.
My HTML resource is very basic:
<html>
<head>
<script src="ClientGlobalContext.js.aspx" />
<script type="text/javascript" src="new_jquery_1.7.2.min" />
<script type="text/javascript">
function buttonClick() { alert('Yo !'); }
</script>
</head>
<body>
<input type="button" value="Test" onclick="javascript: buttonClick();" />
</body>
</html>
Although the page shows up fine, clicking the button yields The value of the property is null or undefined not a function object error like the functions wasn't there, but I checked via F12 console that the code is rendered correctly.
I also tried invoking the web resource via the direct url, in the form of
http://mycrmserver/myorg/WebResources/new_myResource
But (as I expected) the behavior of the page was the same.
I checked Google, I surfed a couple of other SO questions and MSDN and all state this is the right way to do it, what's wrong with my code ?
Other (not sure if useful) details:
If the F12 tool is open the error comes up as a SCRIPT5007 javascript runtime error in the console. If it's not, I get the usual script error notify popup if I browse to the webresource direct url, or nothing happens at all if I try to open the resource inside the CRM.
The CRM environment is updated to Rollup 3 (updating it is not an option unfortunately)
I'm using IE 9 (Remember: Dynamics CRM can't be used in non-IE browsers yet)
UPDATE
Shorthand tags confuse the CRM.
Basically this syntax sometimes gets messed up:
<script src="ClientGlobalContext.js.aspx" />
But this works perfectly:
<script src="ClientGlobalContext.js.aspx"></script>
Root cause is a missing script tag, despite the code you posted being correct.
CRM does some messing about with the HTML you post into the script editor window. What is rendered in the browser is this (note that the ClientGlobalContext.js.aspx tag is not closed in the same way as your pasted code):
<HTML><HEAD>
<SCRIPT src="ClientGlobalContext.js.aspx">
<script type="text/javascript" src="new_jquery_1.7.2.min" />
<script type="text/javascript">
function buttonClick() { alert('Yo !'); }
</SCRIPT>
<META charset=utf-8></HEAD>
<META charset=utf-8></HEAD>
<BODY><INPUT onclick=javascript:buttonClick(); value=Test type=button></BODY></HTML>
Resolution:
Add full "close" tags to each opening script tag (rather than using "/>").

Categories

Resources