I need to change the dojo namespace to something else. I found this stackoverflow post, but it refers to a dojo documentation page that no longer exists. Below is something I tried based on this page, but didn't work:
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.4/dojo/dojo.xd.js" djConfig="scopeMap: [[ 'dojo', 'newns' ]]"></script>
<script>
newns.addOnLoad(function(){
console.debug("hello world");
});
</script>
</head>
<body>
</body>
</html>
Help!
I just pulled the document out of the old Dojo book and put it in the new doc system:
http://docs.dojocampus.org/multiversion/index
For your specific example, the djConfig object needs to be declared in a script tag before the Dojo file loads, and it is recommended that you map dijit and dojox too:
<html>
<head>
<script>
var djConfig = {
scopeMap: [
['dojo', 'newns'],
['dijit', 'newnsw'],
['dojox', 'newnsx']
]
}
</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.4/dojo/dojo.xd.js"></script>
<script>
newns.addOnLoad(function(){
console.debug("hello world");
});
</script>
</head>
<body>
</body>
</html>
Related
https://alligator.io/vuejs/stripe-elements-vue-integration/
On this website, it says we need to import the file with the script tag in the index.html file, which I did, but I noticed I get a js error.
It's only when I imported directly the script inside the component that the error "'Stripe' is not defined" disappeared.
<template>
<div>
</div>
</template>
<script src="https://js.stripe.com/v3/"></script>
<script>
export default {
name: 'component',
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
I don't want to import it directly inside my component, because it's not clean, what can I do?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<script src="https://js.stripe.com/v3/"></script>
<title>vue-app</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
Late to the party, but here is a solution that works for me
Your index.html file looks fine:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<script src="https://js.stripe.com/v3/"></script>
<title>vue-app</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
Then in the component where you want to use it, you can access stripe with the window object, and set the publishable key. This can be done locally in a method, or globally for the component, like this:
<script>
const stripe = window.Stripe(process.env.VUE_APP_STRIPE_PK)
export default {
data() {
return {
// ...
}
},
methods: {
async confirmPayment() {
const paymentResult = await stripe.confirmCardPayment(this.clientSecret, {
receipt_email: 'email#example.com',
})
console.log('paymentResult:', paymentResult)
},
},
}
</script>
I think you should move the script tag of Stripe before the rest of your JavaScript code. The code is probably trying to access the Stripe object before it's been loaded.
The first hello dojo tutorial which is provided at the main site https://dojotoolkit.org/documentation/tutorials/1.10/hello_dojo/index.html did not work for me.
I copy pasted the code, but the 'Hello' remains as is. The em tag does not get added. Any help!
I downloaded the dojo.js and put the file in the same place where the hellodojo.html is. And then I changed the code of hellodojo.html as below:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tutorial: Hello Dojo!</title>
</head>
<body>
<h1 id="greeting">Hello</h1>
<!-- load Dojo -->
<script src="./dojo.js" data-dojo-config="async: true"></script>
<script>
require([
'dojo/dom',
'dojo/dom-construct'
], function(dom, domConstruct) {
var greetingNode = dom.byId('greeting');
domConstruct.place('<em> Dojo!!~!!</em>', greetingNode);
});
</script>
</body>
</html>
Here you will see I changed the statement
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"
data-dojo-config="async: true"></script>
to
<script src="./dojo.js" data-dojo-config="async: true"></script>
And then it worked as expected, since the dojo.js is now available.
I could see 'dojo.js' in chrome extension in source too.
I am having trouble getting a reference to the dijit form widget when the form contains a DateTextBox. The code snippet below demonstrates the problem. When executed, the alert box says "undefined". However, if I get rid of <input ... id="dateTextBox"... />, I am able to get a reference to the form widget.
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="//ajax.googleapis.com/ajax/libs/dojo/1.9.1/dijit/themes/claro/claro.css" media="screen">
<!-- load dojo and provide config via data attribute -->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/dojo/1.9.1/dojo/dojo.js"
data-dojo-config="async: true, parseOnLoad: true">
</script>
<script type="text/javascript">
require(["dijit/form/TextBox", "dijit/form/DateTextBox"]);
</script>
<script type="text/javascript">
require(["dojo/parser", "dijit/registry", "dijit/form/Form", "dojo/domReady!"],
function(parser, registry) {
parser.parse();
alert(registry.byId("frm_test"));
});
</script>
</head>
<body class="claro">
<div data-dojo-type="dijit/form/Form" id="frm_test" encType="multipart/form-data" action="" method="">
<input type="text" id="textBox" name="textBox" data-dojo-type="dijit/form/TextBox" />
<input type="text" id="dateTextBox" name="dateTextBox" data-dojo-type="dijit/form/DateTextBox" />
</div>
</body>
</html>
I'd recommend wrapping the registry.byId into a ready call.
Keep parse onLoad: true, remove
require(["dijit/form/TextBox", "dijit/form/DateTextBox"]);
as the parser will auto require (when dojo>= 1.8) and use the following:
<script type="text/javascript">
require(["dojo/ready", "dijit/registry", "dojo/domReady!"],
function(ready, registry) {
// by default the prioirty of this ready call will be after the
// ready call used to parse when parseOnLoad is true
ready(function() {
alert(registry.byId("frm_test"));
});
});
</script>
Note that waiting for dojo/domReady! to fire is often not sufficient
when working with widgets. Many widgets shouldn’t be initialized or
accessed until the following modules load and execute:
dojo/uacss
dijit/hccss
dojo/parser
Thus when working with widgets you should generally put your code
inside of a dojo/ready() callback
http://dojotoolkit.org/reference-guide/1.9/dojo/domReady.html
http://dojotoolkit.org/reference-guide/1.9/dojo/ready.html#dojo-ready
Complete script:
<!doctype html>
<html>
<head>
<script src="dojo1.7/dojo/dojo.js" data-dojo-config="async: true, parseOnLoad: true"></script>
<script type="text/javascript">
console.log(dojo);
</script>
</head>
<body>
</body>
</html>
The location dojo1.7/dojo/dojo.js is correct(checked on firebug). The error now I am getting is
ReferenceError: dojo is not defined
console.log(dojo)
So what do I missed here?
Use a doctype.
Scripts are loaded and executed in the order they are defined in HTML, so scripts that define objects need to be placed before the script that uses the object.
A global dojo object is never defined when you are running in async mode. You need to use the global require function to explicitly load dependencies:
require([ 'dojo/dom', 'dojo/on' ], function (dom, on) {
// code here
});
Try to put the console.log(dojo); script block below the actual script. Now you're actually looking for dojo at the moment it isn't there yet.
<html>
<head>
<script src="dojo1.7/dojo/dojo.js" data-dojo-config="async: true, parseOnLoad: true"></script>
<script type="text/javascript">
console.log(dojo);
</script>
</head>
<body>
</body>
</html>
I have downloaded dojo build, now I have an doubt, in the below example code, I am using "dojo.js.uncompressed.js" as a start of source file, is it right? Just I want to display a button in the web page. Which one is the start file? in dojo library.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html dir="ltr">
<head>
<style type="text/css">
body, html { font-family:helvetica,arial,sans-serif; font-size:90%; }
</style>
<script src="../dojo/lib/dojo/dojo.js.uncompressed.js"
djConfig="parseOnLoad: true">
</script>
<script type="text/javascript">
dojo.require("dijit.form.Button");
dojo.addOnLoad(function() {
// Create a button programmatically:
var button = new dijit.form.Button({
label: "Click me!",
onClick: function() {
// Do something:
dojo.byId("result1").innerHTML += "Thank you! ";
}
},
"progButtonNode");
});
</script>
<link rel="stylesheet" type="text/css" href="../dojo/lib/dijit/themes/claro/claro.css" />
</head>
<body class=" claro ">
<button id="progButtonNode" type="button">
</button>
<div id="result1">
</div>
<!-- NOTE: the following script tag is not intended for usage in real
world!! it is part of the CodeGlass and you should just remove it when
you use the code -->
<script type="text/javascript">
dojo.addOnLoad(function() {
if (document.pub) {
document.pub();
}
});
</script>
</body>
</html>
dojo (and any js file) should be put next to your html files so that it is served by the server. Then you don't have to relate to long relative paths