I donwloaded this release, and I'm trying to run an example from the docs.
After expanding the Dojo download, my dojo dir is:
js/dojo-release-1.5.0/dijit
js/dojo-release-1.5.0/dojo
js/dojo-release-1.5.0/dojox
The buttons show up, but hide button does not hide the div.
Do I need to add other Dojo libraries along with the reference to dojo.js?
<script type="text/javascript" language="JavaScript" src="/js/dojo-release-1.5.0/dojo/dojo.js"></script>
<script type="text/javascript">
dojo.require("dijit.form.Button");
dojo.addOnLoad(function() {
var node = dojo.byId("findMe");
dojo.connect(dijit.byId("buttonOne"), "onClick", function() {
dojo.fadeOut({
node: node,
duration: 300
}).play();
});
dojo.connect(dijit.byId("buttonTwo"), "onClick", function() {
dojo.fadeIn({
node: node,
duration: 300
}).play();
})
});
HTML:
<button dojoType="dijit.form.Button" id="buttonOne">
Hide Me!
</button>
<button dojoType="dijit.form.Button" id="buttonTwo">
Show Me!
</button>
<div id="findMe">
Hiya!
</div>
There are a couple of things you may be missing. As Daniel says, adding parseOnLoad=true as a djConfig param will help. Alternatively you can add djConfig params as a global JS variable before your dojo.js script tag, i.e.
<script>
var djConfig = {
parseOnLoad: true
}
</script>
A final alternative is to manually call the parser yourself. To do this, modify your JS to:
dojo.require("dijit.form.Button");
// You need to manually require the parser if you're going to call it yourself
dojo.require("dojo.parser");
dojo.addOnLoad(function() {
var node = dojo.byId("findMe");
dojo.connect(dijit.byId("buttonOne"), "onClick", function() {
dojo.fadeOut({
node: node,
duration: 300
}).play();
});
dojo.connect(dijit.byId("buttonTwo"), "onClick", function() {
dojo.fadeIn({
node: node,
duration: 300
}).play();
})
// New line, parse the doc
dojo.parser.parse();
});
Additionally to parsing, you may need to add a theme (you've not mentioned if you've done this or not). The easiest way to do this is to add the class name to your body tag and import the css.
...
<link rel="stylesheet" type="text/css" href="/js/dojo-release-1.5.0/dijit/themes/claro/claro.css">
</head>
<body class="claro">
...
</body>
http://telliott.net/dojoExamples/dojo-buttonHelloWorld.html contains an example of this all working for you, feel free to go crib.
Reading http://dojotoolkit.org/reference-guide/djConfig.html#djconfig and http://dojotoolkit.org/reference-guide/dijit/info.html#dijit-info would probably be a good idea also.
HTH.
Tom
try adding djConfig="parseOnLoad:true" when add the dojo.js to the page.
ex:
<script type="text/javascript" language="JavaScript" src="/js/dojo-release-1.5.0/dojo/dojo.js" djConfig="parseOnLoad:true"></script>
//Daniel
Related
I want to change count variable every click. If i put "count++" in the on:clik event, it work. But, when i want to use a function doesn't do anythig.
I also tried to put the component and the "new view" in the same file js, but doesn't work and show a blank page,why? thanks
Prova.js
Vue.component('prova', {
data: function () {
return {
count: 0
}
},
template: '<div><button v-on:click="Add">You clicked me {{ count }} times.</button></div>',
methods:{
Add: function(){
prova.count++;
}
}
});
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>prova component</title>
<script src="https://cdn.jsdelivr.net/npm/vue#2.6.14/dist/vue.js"></script>
<script type="text/javascript" src="Prova.js"></script>
</head>
<body>
<section id="prova">
<prova ></prova>
<script>
new Vue({
el: "#prova",
})
</script>
</section>
</body>
</html>
Actually I don't know what your second component is used to be, but you can solve your problem like this:
In the template
<template>
<div>
<button #click="addCount()"></button>
<div>You have clicked the button {{count}} times.</div>
</div>
</template>
• #click is the same like v-on:click
• you should write it like following: addCount()
In the script:
export default {
data() {
return {
count: 0,
}
},
methods: {
addCount() {
this.count += 1;
}
}
}
• define count in your data
• use methods and on every click on your button add 1 to the current value
This should solve your problem. Please give me a short feedback if this worked out for you!
For little testing: You can also subtract from count. Just create a second button and make another click event an there you use this.count -= 1. This will subtract 1 each time you click it.
I have install Vue Devtootls but each time I have errors it doesn't show in the console I see o laracast they have like [vue: warn] and the error. I put this code but nothing.
catch(function(error){ console.log(error.message); });
}
I think you have a misunderstanding on vue-devtools, vue-devtools is a browser extension used as a debugging tool. You can check your components, events and more information via it. Please have a look at its introduction on GitHub.
On the other hand, messages like [vue: warn] ... are produced by Vue itself. The reason that you didn't get the messages is simply because you used vue.min.js instead of vue.js, I think. Save following code as a html file and then open it in chrome. You should be able to see the warning message in Chrome's console.
<!DOCTYPE html>
<html>
<head>
<title>Vue test</title>
</head>
<body>
<script type="text/javascript" src="https://unpkg.com/vue#2.4.2/dist/vue.js"></script>
<div id="app">
<span>{{ message }}</span>
<component1></component1>
</div>
<script>
// Vue.component('component1', {
// template: '<button>{{ message }}</button>',
// data: function() {
// return {
// message: 'I am a test button'
// };
// }
// });
var vm = new Vue({
el: '#app',
data: {
message: 'hello'
},
});
</script>
</body>
</html>
Im trying to setup vuejs with onsen ui and I get this error:
Error: Uncaught TypeError: Vue.util.hyphenate is not a function
Here is the whole code:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.1.0/css/onsenui.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.1.0/css/onsen-css-components.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.1/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.1.0/js/onsenui.js"> </script>
<script src="https://unpkg.com/vue-onsenui#2.0.0-alpha.0"></script>
</head>
<body>
<div id="app"></div>
</body>
<script>
var vm = new Vue({
el: '#app',
template:
'<v-ons-page>\
<v-ons-toolbar>\
<div class="center"> Title </div>\
</v-ons-toolbar>\
<p style="text-align: center">\
<v-ons-button #click="$notification.alert(\'Hello World!\')">Click</v-ons-button>\
</p>\
</v-ons-page>'
});
</script>
</html>
I can't find this as an known issue. I also tried with older version od vue like 2.0.0.
Can anyone help?
Sir,I meet the same error with you, and I try to find the error and solve it.
First of all, download the "https://unpkg.com/vue-onsenui#2.0.0-alpha.0", and change you script dom's src to your local's.
Then you can open the "vue-onsenui#2.0.0-alpha.0" and find these code:
var register = function register(Vue, type, items) {
(0, _keys2.default)(items).forEach(function (key) {
var value = items[key];
key = Vue.util.hyphenate(key);
Vue[type](key, value);
});
};
So you can see the "Vue.util.hyphenate" ,but now vue don't have this function. Please use the same function from this file.
ex:
var register = function register(Vue, type, items) {
(0, _keys2.default)(items).forEach(function (key) {
var value = items[key];
var hyphenate = function hyphenate(string) {
return string.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
};
key = hyphenate(key);
Vue[type](key, value);
});
};
My English is so bad, and sorry to use your time.
In the last version Vue.js many exposed methods and properties on Vue.util have been removed.
So, you need download javascript file (https://unpkg.com/vue-onsenui#2.0.0-alpha.0) and replace code in 67 line:
key = Vue.util.hyphenate(key);
to this code:
key = key.replace(/([a-zA-Z])([A-Z])/g, '$1-$2').toLowerCase();
For some reason when using the Google Earth Plugin with EXTJS it just gives me a white map.
Wish I could post an image although my reputation needs some work.
I include the following files when loading my app.
https://www.google.com/jsapi
/location_of_file/googleearth/Ext.ux.GEarthPanel-1.3.js
/location_of_file/googleearth/Ext.ux.GEarthPanel-1.3.css
/location_of_file/GoogleEarthStartup.js
The startup file contains.
google.load("earth", "1");
google.load("maps", "2.xx");
Do I need a key with the jsapi?
Please advice.
All browsers are giving me same issue.
We have GE plugin loading in an ExtJs container. HTML looks like:
<script type="text/javascript" src="scripts/globe/Globe.js"></script>
<script type="text/javascript" src="scripts/ext/ext-all-debug.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("earth", "1");
</script>
<script type="text/javascript">
Ext.onReady(function() {
Globe.initGlobe();
});
</script>
...
<body><!--Globe Panel is inserted here from Globe.js by Ext--></body>
The javascript class sets up a container with a div that we can target:
this.globeContainingPanel = Ext.create('Ext.container.Container', {
...
renderTo: Ext.getBody(),
items: [{
{
xtype: 'panel',
region: 'center',
html: '<div id="map3d"></div>'
}
}]
});
Then have the GE render to the div panel:
window.google.loader.ApiKey = 'ABCDEFGHIJKLMNOPgoogle.earth.ex.key';
window.google.loader.KeyVerified = true;
window.google.earth.allowUsageLogging = false;
google.earth.createInstance('map3d', this.initCallback, this.failureCallback);
Also, make sure you have the Google Earth plugin installed in your browser.
Ello!
I have an app bar icon and on the click event - I added a function which has the following code:
function homePage() {
WinJS.Navigation.navigate("/home/homePage.html");
}
Now I have two files - homePage.html which is inside /home/ and the js file for the same.
There's a simple button on html of id NextPage.
While in the homePage.js file, I have:
function () {
"use strict";
WinJS.UI.Pages.define("/home/homePage.html", {
ready: function (element, options) {
var button = document.getElementById("NextPage");
button.addEventListener("click", GoToNextPage);
}
});
function GoToNextPage() {
WinJS.Navigation.navigate("/default.html");
}
})();
But when I click the app bar icon - nothing happens :(
So what I plan to accomplish is that when someone clicks an appbar icon on default.html - the user switches to homePage.html (and then when I click the homePage button - it goes back) - but not even the initial page transfer is taking place.
This is embarrassing to ask but I can't just fold my hands and wait for something magical to happen. I have been working on this for an hour - read videos and samples but it's not working at all.
Would appreciate help - I can't figure out what's going wrong. Thanks!
The WinJS.Navigation namespace provides state and history management, but it doesn't actually do the navigation itself. To move from one page to another, you need to define a handler function for one of the events in the WinJS.Navigation namespace - this lets you respond to call to the WinJS.Navigation.navigate method in a way which makes sense for your app.
As a demonstration, here is a homePage.html file which has a NavBar containing a command that will be the trigger for the navigation.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>NavProject</title>
<link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
<script src="//Microsoft.WinJS.1.0/js/base.js"></script>
<script src="//Microsoft.WinJS.1.0/js/ui.js"></script>
<link href="/css/default.css" rel="stylesheet" />
<script src="/js/homePage.js"></script>
</head>
<body>
<div id="contentTarget">
<h1>Select a page from the NavBar</h1>
</div>
<div id="navbar" data-win-control="WinJS.UI.AppBar"
data-win-options="{placement:'top'}">
<button data-win-control="WinJS.UI.AppBarCommand"
data-win-options="{id:'NextPage', label:'Next Page',
icon:'\u0031', section:'selection'}">
</button>
</div>
</body>
</html>
Along with the NavBar, I have defined the div element whose id is contentTarget. This is the place in my content where the new file will be loaded when the user clicks the NavBar command.
CLARIFICATION: All of the content that you want replaced needs to go into the contentTarget element. Otherwise you'll get a mix of old and new content displayed.
And here is the JavaScript file which wires it up (this is the homePage.js file which I added a script element for in the HTML file above):
(function () {
"use strict";
WinJS.Navigation.addEventListener("navigating", function (e) {
var elem = document.getElementById("contentTarget");
WinJS.UI.Animation.exitPage(elem.children).then(function () {
WinJS.Utilities.empty(elem);
WinJS.UI.Pages.render(e.detail.location, elem)
.then(function () {
return WinJS.UI.Animation.enterPage(elem.children)
});
});
});
var app = WinJS.Application;
var activation = Windows.ApplicationModel.Activation;
app.onactivated = function (args) {
args.setPromise(WinJS.UI.processAll());
navbar.addEventListener("click", function (e) {
if (e.target.id == "NextPage") {
WinJS.Navigation.navigate("/nextPage.html");
}
}, true);
};
app.start();
})();
Notice how I have added a handler function for the WinJS.Navigation.navigating event. This event is triggered by a call to WinJS.Navigation.navigate and details of the navigation target are contained in the detail.location property of the event object.
In this example, I clear out any content in my target element and replace it with the contents of the target file and animate the transition from one to the other.
You only have to define one handler for the event. This means that if I have elements in nextPage.html that will lead to navigation, I just need to call WinJS.Navigation.navigate without needing to create a new event handler, like this:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script>
WinJS.UI.Pages.define("/nextPage.html", {
ready: function () {
back.addEventListener("click", function () {
WinJS.Navigation.navigate("/homePage.html");
});
}
});
</script>
</head>
<body>
This is next page.
<button id="back">Back</button>
</body>
</html>