I have below html code:
<html>
<head>
<script src="http://differentDomain/main.js"></script>
</head>
</html>
And the main.js has following code:
window.onload = function {
console.log('event fired!!');
}
Now event fired!! is getting logged if I use relaod button to load the page. However, it is not happening if I hit the URL using enter key in the address field.
In the course of testing, I get to add new local javascript file in the page like:
<html>
<head>
<script src="http://differentDomain/main.js"></script>
<script src="http://sameDomain/local.js"></script>
</head>
</html>
Surprisingly after adding the above file, load event started firing and event fired!! is getting logged in both cases.
Firstly please let me know why event is not getting fired for first time.
Secondly how adding a new file after the existing file makes difference in event getting fired.
Note: I could observe in the network tab that the local file is not getting cached but main.js does.
Related
A funny thing happened to me while I was cleaning up some old JavaScript code this week. When I took out some slow code, the page started throwing Reference Errors on code in a file that was included via an Ajax call.
Below is (greatly simplified) example of the issue. The first file will work without error when requested directly. But when called via Ajax, the document-ready event has already occurred, so the code within executes immediately. Chrome throws an error such as: "VM1414:2 Uncaught ReferenceError: they_log is not defined"
<html>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.js"></script>
<script>
$(document).ready(function() {
they_log("Be alerted");
});
</script>
<!-- Two separate script tags prevent hoisting -->
<script>
function they_log($string) {
console.log($string);
}
</script>
</body>
</html>
However, if the comment "alert" line below is uncommented, the Reference Errors are not thrown in Chrome or Firefox (although they still occur in Safari - unless you let the modal dialog hang open for several seconds).
<!doctype html>
<html lang="en">
<head>
<title>Prototype of reference error issue</title>
</head>
<body>
<div id="place" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.js"></script>
<script>
$.get( "http://localhost/path/to/first/file.html", function( data ) {
$("#place").html(data);
});
//alert("I get rid of the reference error");
</script>
</body>
</html>
My question is, how does the alert message (or similar slow code in the including file) prevent the reference errors from occuring?
I'm particularly interested if whatever is happening to let the code execute without error can be counted on to work consistently (in Chrome and Firefox, at least) or if there is something like a race condition going on where it may fail intermittently.
What I observe is your alert run before document ready, and it prevents document ready until the alert dialog is closed. Fiddle: https://jsfiddle.net/24pg3yzk/
While the alert dialog is displayed, the Ajax request and its done handler $("#place").html(data); may have finished. So yes, it's race condition.
Is it standard or consistent behavior? I don't know. I think it makes sense since alert "Dialog boxes are modal windows - they prevent the user from accessing the rest of the program's interface until the dialog box is closed" (source), but nothing to affirm it from the jQuery doc.
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.
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>
I wrote a small page with jQuery and an external .js file. But it won't load the jQuery part. Here my Code:
<!DOCTYPE html>
<head>
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/testScript.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<button id="testBtn">Oh my Goood...</button>
<div id="testDiv">testText</div>
</body>
</html>
And here is my external Script:
alert("no jQuery");
$("button#testBtn").click(function(){
alert("Works!");
});
As you can see, jQuery will load before all other scripts. The alert pops up fine. But if I click the button, nothing happens. If I put the script inside the html document directly, the button event works as expected.
I reviewed these questions: Link and Link. But still not working as expected.
Instead of using the $(document).ready() method, you could also just move your javascript references to the bottom of the page, right above the </body> tag. This is the recommended way to include javascript in webpages because loading javascript blocks the page rendering. In this case it also makes sure the elements are already rendered when the javascript is executed.
You'll need to add the click function inside document ready.
$(document).ready(function(){
$("button#testBtn").click(function(){
alert("Works!");
});
});
Your method fails because the code is being executed as the page is being loaded and the elements it refers to haven't been loaded yet. Using $(document).ready holds the function execution till the DOM elements are ready.
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 "/>").