When I load a library from a function it doesn't load and even crashes the page!
What's up with that??
HTML head:
<script type="text/javascript" src="https://www.google.com/jsapi?key=INSERT-YOUR-KEY"></script>
<script type="text/javascript">
// --- LOADING LIKE THIS WORKS FINE ---
// jQuery is completely loaded
function jqueryLoaded() {
$("body").css("background-color","orange");
}
google.load("jquery", "1.4.3");
google.setOnLoadCallback(jqueryLoaded);
// --- LOADING FROM AN EVENT DOES NOT WORK?? ---
// jQuery UI is completely loaded
function jqueryUILoaded() {
$("body").css("background-color","green");
}
function loadJqueryUI() {
alert("load jQuery UI now..");
google.load("jqueryui", "1.8.6");
google.setOnLoadCallback(jqueryUILoaded);
}
// with a setTimeout it doesn't work either..
// setTimeout("loadJqueryUI()", 2000);
</script>
HTML body:
<input type="button" value="load jQuery UI" onclick="loadJqueryUI()"/>
Okay, it seems that we can not load jQuery dynamically:
http://code.google.com/apis/loader/#Dynamic
The standard google.load functionality loads the API(s) when your page loads
The only Libraries supported by Google Loader, loaded dynamically and with callbacks are:
Google Maps API
Google Search API
Google Feeds API
Google Language API
Google Visualization API
Bummer!
I am going for a lazy-load polling plugin:
http://wonko.com/post/lazyload-200-released
Have you considered replacing INSERT-YOUR-KEY with, erm, your key?
Related
I have this weird issue while using ArcGIS API for JavaScript v4.4 in my code. I am trying to build an Excel Web Add-in in which I would like to load an ArcGIS map but when I load ArcGIS I get a multipleDefine error.
ArcGIS is getting bundled with Dojo which is used as the loader for all the ArcGIS/esri packages. I have no other choices to load my own custom JS bundles with Dojo because of the way ArcGIS has built their API. So I can't decide to not use Dojo and thus not getting the multipleDefine error.
I load my own JS files like this:
<script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js" type="text/javascript"></script>
<script>
var dojoConfig = {
parseOnLoad: false,
async: false,
// we make aliases for our js file
aliases: [
['index', './Bundles/index.js'],
],
};
</script>
<script src="https://js.arcgis.com/4.4/init.js"></script>
<script>
require(['index'], function (index) {
//...do something
});
</script>
When I restart the page I get a multipleDefine error once in every two/three trials. After a lot of investigation I understood that the error lies with the Office.js API but I had a hard time to find a good solution.
After a while I found the cause of the problem; we cannot start office-js and Dojo together because they both want to add scripts in the head tag of our page and somehow they end up in conflict with one another, thus we get the dreaded multipleDefined Dojo error and some of our files do not get loaded.
Once this cause was identified I decided to solve it by making sure Dojo, Argis and my custom js files got loaded once Office and dependencies were fully loaded.
I implemented it like this in my js code:
// This Dojo config variable has to be defined before Dojo is loaded in our scripts
var dojoConfig = {
// we make aliases for our custom js file
aliases: [
['index', './Bundles/index.js'],
],
// We require our dependencies (our own code bundles) with Dojo.
// Notice that it is mandatory to bundle our js files
// as AMD Modules for Dojo to be able to load them as dependencies.
deps: ['index'],
};
// Once office has fully initialized we can add our arcgis file and let
// him load our own required javascript files.
// We cannot start Office-js and Dojo/Arcgis together because they both
// want to add scripts in the head tag of the HTML page and
// somehow they end up in conflict, thus we get the dreaded
// multipleDefined Dojo error and some of our files
// do not get loaded.
Office.initialize = function (reason) {
// we manually add the Arcgis script to the header of our page
// once we are sure Office and dependencies has fully loaded.
var tag = document.createElement('script');
tag.src = 'https://js.arcgis.com/4.4/init.js';
document.getElementsByTagName('head')[0].appendChild(tag);
};
Once this was added the code started working like a charm.
What is the best way to detect if a reCaptcha v2 does not load? I would like to alert users when they need to use the captcha to continue, but it was unable to load.
You can pass a callback function when you make the request for the captcha
Add this to the url:
?onload=myfunction
for example:
<script src="https://www.google.com/recaptcha/api.js?onload=loadedCallback&render=explicit"
async defer>
</script>
Js:
function loadedCallback(){
//Recaptcha its loaded
}
I have tried to run a Windows Phone 8 App written in Sencha Touch in Worklight. I used sencha in the following way:
<script src="//Microsoft.WinJS.1.0/js/base.js"></script><script src="//Microsoft.WinJS.1.0/js/ui.js"></script><script>
// Define WL namespace.
var WL = WL ? WL : {};
/**
* WLClient configuration variables.
* Values are injected by the deployer that packs the gadget.
*/
WL.StaticAppProps = {
"APP_DISPLAY_NAME": "Cockpit",
"APP_ID": "Cockpit",
"APP_SERVICES_URL": "http:\/\/192.168.99.11:10080\/CockpitProj\/apps\/services\/",
"APP_VERSION": "1.2.1",
"ENVIRONMENT": "windows8",
"LOGIN_DISPLAY_TYPE": "embedded",
"WORKLIGHT_PLATFORM_VERSION": "6.1.0.00.20131219-1900",
"WORKLIGHT_ROOT_URL": "http:\/\/192.168.99.11:10080\/CockpitProj\/apps\/services\/api\/Cockpit\/windows8\/"
};</script>
<script src="worklight/cordova.js"></script>
<script src="worklight/wljq.js"></script>
<script src="worklight/worklight.js"></script>
</head>
<body>
<div class="loadingSpinner bigLoad" id="appLoadingIndicator"></div>
<script src="js/initOptions.js" type="text/javascript"></script>
<script src="js/sencha-touch-all.js" type="text/javascript"></script>
<script src="js/app.js" type="text/javascript"></script>
<script src="js/messages.js" type="text/javascript"></script>
</body>
</html>
If I run this code, I get an exception:
Unable to add dynamic content. A script attempted to inject dynamic
content, or elements previously modified dynamically, that might be
unsafe. For example, using the innerHTML property to add script or
malformed HTML will generate this exception. Use the toStaticHTML
method to filter dynamic content, or explicitly create elements and
attributes with a method such as createElement. For more information,
see http://go.microsoft.com/fwlink/?LinkID=247104.
This can be solved by every sencha call inside the sencha-touch-all into a
MSApp.execUnsafeLocalFunction(function () {}
This can only be a workaround, as there are too many of these sencha calls.
What is the general concept of using Sencha for Windows Phone, like
these steps from Phonegap:
IMO there is no good way around it in Windows Phone development. Doesn't matter if it is a pure Cordova app, or a Worklight-based app.
See the second option in the following discussion. Perhaps you could set it in a way that it will work for all code parts required by your app:
http://social.msdn.microsoft.com/Forums/windowsapps/en-US/e35017b4-e21b-4807-8668-fc3c332c6b32/javascript-runtime-error
Copy-paste:
The host enforcement code will throw an access denied exception in the
event that you try to set the innerHTML (and outerHTML and a couple of
others) of an element to HTML which doesn't conform to a whitelist of
known safe HTML. You can get around this in a couple of ways:
call toStaticHTML() on your string first which should strip out everything which is disallowed
use WinJS.Utilities.setInnerHTMLUnsafe(element, text), this allows you to set innerHTML to anything you like
use msWWA.execUnsafeLocalFunction, for instance:
msWWA.execUnsafeLocalFunction(function () { element.innerHTML = text; })
Option 2 is implemented in terms of 3. Be aware that if you set
innerHTML of an element to html that you don't control (e.g. something
you downloaded off the web like an RSS feed) it may contain script
which will be able to access the WinRT and do bad things which is why
the names of the functions in 2) and 3) are purposefully a little
scary.
Hi I am looking for tutorial based on Dojo 1.8.
What I am looking for is:- create and instantiate widget pragmatically after dojo page fully loaded and parsed, triggered after dojo/on button. I am not sure of which tutorial in Dojo website, for me to learn.
Please advise.
Thanks in advance.
Clement
There isn't one tutorial that fully answer all your question but the following will be helpful:
Dojo Events tutorial and dojo/on reference
dojo/ready reference
dojo/parser reference
To capture both the full loading of the page and parsing you need to use a combination of dojo/ready and dojo/parser. (I'm assuming that the parsing you refer to is the dojo widget parser, rather than the standard browser parsing of HTML).
To run code after parsing you'll need to add parseOnLoad: false to your dojoConfig and run the parser manually; otherwise, there is no way of capturing when it is complete.
<script type="text/javascript" async="true">
require([
"dojo/ready",
"dojo/parser",
"dojo/on,
"dojo/query"
], function(
ready, parser, on, $
){
ready(function(){
// Only run after the page is fully loaded
parser.parse().then(function(instances){
// Only run after parser has parsed the page
var myButton = $("#myButtonid"); // Find your button
if(myButton.length > 0){ // Check button is found
on(myButton[0], "click", function(evt){
// ... add your code here to create and
// instantiate widget
});
}
});
});
}
</script>
Don't forget that you need to turn off automatic parsing of widgets in you dojoConfig, hence, something like this (in the head):
<script type="text/javascript">
dojoConfig= {
"parseOnLoad": false,
"async": true
// ...other settings
};
</script>
I have a website that is rendering a prototype based calender on 90% of the pages. I'm also looking at using the Uploadify module for handling multiple uploads with Paperclip. As you know, Paperclip and JQuery don't play nicely and a lot of the solutions I've tried such as NoConflict hasn't worked for me I still get the "not defined" errors in firebug all over the place. I'm wondering what the best way for me to approach adding this JQuery module that will be very localized in a largely Prototype-based application. I've considered switching my Prototype code with JQuery but I've yet to see a better JQuery solution for this particular calendar plugin that I'm using.
Use a proper structure for noConflict.
<script src="prototype.js"></script>
<script src="someprototypeplugin.js"></script>
<script src="jQuery.js"></script>
<script src="uploadify.jquery.js"></script>
<script>
$.noConflict();
jQuery(document).ready(function($){
$("#someelement").uploadify();
});
</script>
If this doesn't answer your question, please provide more(some) code.
Edit for comments:
Just run the $.noConflict() immediately following your jQuery plugins, and then use jQuery instead of the $ variable throughout your JS files.
<script src="prototype.js"></script>
<script src="someprototypeplugin.js"></script>
<script src="jQuery.js"></script>
<script src="uploadify.jquery.js"></script>
<script>
$.noConflict();
</script>
sample js file:
(function($){
// since we passed a reference to jQuery to this anonymous
// function and accepted it as a parameter named "$", we can
// safely use "$"
$("#target").uploadify();
})(jQuery);
If you need a document ready, you can do it this way:
jQuery(document).ready(function($) {
$("#target").uploadify();
});