Libraries not loading on form load- CRM 2016 - javascript

We are upgrading from CRM 2011 to CRM 2016 on premise.
I have all the libraries added on the form load in address entity form but those libraries aren't being loaded at the first time ans showing error message 'Mscrm' is undefined in the below code snippet and page.
<script language="JavaScript">
window.setTimeout(ribbonRefreshForArticle, 2000);
function ribbonRefreshForArticle() {
var uri = Mscrm.CrmUri.create(window.location.href);
if (uri.get_query() != null && uri.get_query()["etc"] == Mscrm.InternalUtilities.EntityTypeCode.KbArticle) {
refreshRibbon();
}
}
</script>
Page- http://myOrg/testDev/userdefined/edit.aspx?_CreateFromId={447AE3EE-2727-E511-84E4-005056B33BEB}&_CreateFromType=2&_gridType=1071&etc=1071&id={858C47D7-62AE-43DE-A13B-2F648EFD111E}&pagemode=iframe&rskey={03315B35-4585-4447-A4D2-059CF79CA0FD}
Need help.Thanks in advance.

I'm a little confused by your snippet, You're showing the JS within the context of an HTML script tag, but you're defining it as being called from the Form Load.
If you have an html web resource, you must first add the ClientGlobalContext <script src="../ClientGlobalContext.js.aspx?type=script" type="text/javascript"></script> ("../" may vary depending on your resource path), and then wait for your document to be ready:
$(document).ready(() => {
onLoad();
});

You have to declare your libraries in the file that contains your javascript
like:
<head>
<script src="cs_jsQuery" type="text/javascript"></script>
<script src="ClientGlobalContext.js.aspx" type="text/javascript"></script>
<script src="cs_CimailXrmProximaIncident" type="text/javascript"></script>
</head>

Related

GetGlobalContext is not defined in HTML webresrouce of Dynamics CRM

I've an HTML web resource in Dynamics CRM on-premise environment. It is saved as new_htmlpage1, now at a click of Custom button I'm opening this HTML web resource. I've added ClientGlobalContext.js.aspx as reference in HTML webresource as well. But still I am receiving error that GetGlobalContext is not defined
Below is my HTML source code.
<html>
<head>
<script src="../ClientGlobalContext.js.aspx" type="text/javascript"></script>
<script type="text/javascript">
function tempContext(){
if (typeof GetGlobalContext != "undefined") {
var userName = Xrm.Page.context.getUserName();
alert(userName);
return;
}
}
</script>
</head>
<body onload="tempContext()">
</body>
</html>
Here is the walkthrough from Microsoft that I am following, but still unable to get GlobalContext.
Please let me know what I am missing here.
The path to ClientGlobalContext.js.aspx is a relative path (relative to the location of your web resource), so ensure that you navigate up the necessary amount of times. E.g. one of the following might be what you need to use, depending on your web resource:
<script src="ClientGlobalContext.js.aspx" type="text/javascript" ></script>
<script src="../ClientGlobalContext.js.aspx" type="text/javascript" ></script>
<script src="../../ClientGlobalContext.js.aspx" type="text/javascript" ></script>
You should then call the function GetGlobalContext() from JavaScript to get access to the global context.
Right now you are trying to call Xrm.*, which is not available.
As the documentation for the GetGlobalContext function states:
Including a reference to ClientGlobalContext.js.aspx does not make the
Xrm object available in HTML web resources. Therefore, scripts
containing Xrm.* methods aren’t supported in HTML web resources.
parent.Xrm.* will work if the HTML web resource is loaded in a form
container. However, for other places, such as loading an HTML web
resource as part of the SiteMap, parent.Xrm.* also won’t work.

Web Worker Javascript cannot find functions in other javascript files

I have an HTML file like this:
<html>
<head>
<title>World Aviation</title>
<script language="javascript" src="./jquery-min.js"> </script>
<script language="javascript" src="./jsDraw2D.js"> </script>
<script language="javascript" src="./script.js"> </script>
</head>
<body>
<input onClick="startAnimBackground();" type="button" value="Start"/>
<script language="javascript">
initAirports();
initRoutes();
var w;
function startAnimBackground()
{
if(typeof(Worker) !== "undefined")
{
if(typeof(w) == "undefined")
{
w = new Worker("start_script.js");
}
} else {
startAnimation();
}
}
</script>
</body>
</html>
the file "start_script.js" contains only 1 line which calls the startAnimation() function. This function is located in "script.js"
My problem is: my browser supports web-workers, so it creates a web-worker and loads the file "start_script.js", but it fails to call the function "startAnimation()" indicating that it cannot find the function. But this function is located in script.js which is included in the head section. So, the only conclusion I can draw is that web-worker JS files have a different scope and thus is not able to include the 3 javascript files specified in the head section. So what should I do to make this work?
Thanks.
Web workers don't share functions, variables, or scripts with the main script.
To load dependencies, call importScripts() in your worker.
To allow your web worker to interact with or affect the main script or the DOM, you have to use message passing and have the main script listen for, interpret, and act on the messages.
See: https://developer.mozilla.org/en-US/docs/Web/Guide/Performance/Using_web_workers

Cannot get access to Marionette module from app.js

I am currently working my way through David Sulc's excellent "Backbone.Marionette.js: A Gentle Introduction" and have come unstuck at modules. With the app as it currently stands I am trying to access an API in a module called 'contacts.js' from the index.html script but I get the following error when I try to run the app:
"Handler not found for 'contact: entities' "
I am able to hit the API directly from the console in Chrome and manually get the 'contact' information so I was thinking this was a loading sequence problem where the API might not be available by the time app.js loads, however the loading sequence is as follows:
<script type="text/javascript" src="assets/js/vendor/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="assets/js/vendor/json2.js"></script>
<script type="text/javascript" src="assets/js/vendor/underscore-min.js"></script>
<script type="text/javascript" src="assets/js/vendor/backbone-min.js"></script>
<script type="text/javascript" src="assets/js/vendor/backbone.marionette.min.js"></script>
then the local scripts as follows:
<script type="text/javascript" src="assets/js/app.js"></script>
<script type="text/javascript" src="assets/js/entities/contact.js"></script>
and a script tag below the last two script tags directly runs the following code:
<script type="text/javascript">
... some view code
ContactManager.on("initialize:after", function(){
var contacts = ContactManager.request("contact: entities");
... some more code
</script>
the line beginning var contacts = ..... is the one giving me the error. Any help appreciated
I am as certain as I can be that I have scripted this exactly as per the book.
You have a space in your event name:
<script type="text/javascript">
... some view code
ContactManager.on("initialize:after", function(){
// Remove the space in contact: entities -->
var contacts = ContactManager.request("contact: entities");
... some more code
</script>

Uncaught ReferenceError when accessing an object from another JS file

I have various JS libraries in my web application, which are loaded before my main JS file (main.js). One of these libraries is jshashtable, but when I try to create a new Hashtable object in main.js, Google Chrome and Firefox throw a ReferenceError, complaining that the variable does not exist.
Here is the <head> of the application:
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="/static/jquery-1.4.4.min.js"></script>
<script type="text/javacsript" src="/static/jshashtable-2.1.js"></script>
<script type="text/javascript" src="/static/main.js"></script>
Here is the problem line in main.js:
posts = new Hashtable();
This line is inside a function called init which is called when the page has finished loading (using the jquery $(document).ready() function).
Any reason why Hashtable is not global? Google maps and jquery objects work with no such problem. The source of jshashtable can be seen on Google code.
Updated answer: The problem is that you've got a typo in the script tag:
<script type="text/javacsript" src="/static/jshashtable-2.1.js"></script>
<!-- ^^---- here (the letters are transposed) -->
I couldn't understand why you would be running into a problem and decided to actually copy-and-paste your script tags and replicate the structure exactly on my machine. And things stopped working and my world tilted 3° counter-clockwise until I finally stared at them long enough to see it.
Provided that the jshashtable code really is at /static/jshashtable-2.1.js and your server is serving it up correctly (double-check on Chrome's resources tab in the dev tools), I can't see any reason for that. Your scripts are in the right order, and jshashtable's docs show using a global Hashtable (and the code link you gave clearly shows it creating one).
Edit: I've just replicated that same structure (same scripts, same order, using jQuery(document).ready(function() { ... });) on my own server, and am not having that problem. I can create a Hashtable and use its functions.
My HTML:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title>Test Page</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type='text/javascript' src='jquery-1.4.4.js'></script>
<script type='text/javascript' src='jshashtable-2.1.js'></script>
<script type='text/javascript' src='main.js'></script>
</head>
<body>
</body>
</html>
My main.js:
jQuery(document).ready(function() {
try {
var ht = new Hashtable();
display("typeof ht = " + typeof ht);
display("ht.size() = " + ht.size());
}
catch (e) {
display("Exception: " + e);
}
function display(msg)
{
$("<p>").html(msg).appendTo(document.body);
}
});
Only difference is I'm not using a /static prefix, and I'm absolutely certain that makes no difference.

Multiple jQuery includes in a document

I have a document which uses old jQuery and I need new jQuery for a particular plug-in.
My document structure looks like this:
<html>
<head>
<script type="text/javascript" src="jQuery.old.js"></script>
</head>
<body>
<script>
$("#elem").doSomething(); // use old jQuery
</script>
<!-------- My plugin begins -------->
<script type="text/javascript" src="jQuery.new.js"></script>
<script type="text/javascript" src="jQuery.doSomething.js"></script>
<script>
$().ready(function(){
$("#elem").doSomething(); // use new jQuery
});
</script>
<div id="elem"></div>
<!-------- My plugin ends ---------->
<script>
$("#elem").doSomething(); // use old jQuery
</script>
</body>
</html>
I have googled for this question but found nothing that would look like my case (I need first to load old javascript (in the head) and THEN new (in the body). By the way, in the Firefox looks like old jQuery lib loads and scripts that depends on it works, but script that uses new version, and in IE and Chrome everything is exactly opposite.
To start, you should try running all the plugins under the latest version of jQuery - you may find you can use just the one latest version.
If you cannot do this, you can run in compatibility mode. Here is how.
<script src="jquery-1.3.2.js"></script>
<script>
var jqueryA = jQuery.noConflict();
</script>
<script src="jquery-1.4.2.js"></script>
<script>
var jqueryB = jQuery.noConflict();
</script>
You would need to call
jqueryB("#myelement").....
To use the alternate version.
You should use jQuery.noConflict();
See this example: http://web.enavu.com/daily-tip/using-multiple-versions-of-jquery-on-the-same-page/
As a rule of thumb, stick to one included jquery file. It's quite a large file, and there's no need to import multiple versions. I would opt for the latest version, which can be served from google or microsoft to speed up your server.
Note if you want the "doSomething" event to behave differently depending on where it's called in the page, you could try to bind the event differently. Check out the following example. As with yours, it calls the new version from within your plugin area on the page ready event - this might be later than you expected.
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body>
<div id="elem"></div>
<script>
var oldFunct = function (e,o) { alert("old jquery" + o); };
var newFunct = function (e,o) { alert("new jquery" + o); };
$("#elem").bind("doSomething", oldFunct);
$("#elem").trigger("doSomething", ["1"]);
</script>
<script>
$(document).ready(function(){
$("#elem").bind("doSomething", newFunct);
$("#elem").trigger("doSomething", ["2"]);
$("#elem").bind("doSomething", oldFunct);
});
</script>
<script>
$("#elem").trigger("doSomething", ["3"]);
</script>
</body>
</html>

Categories