I'm studying Dojo 1.10.4, my problem is that the onClick event does not work on dijit/MenuItem. I tried it on other item widgets like dijit/CheckedMenuItem and dijit/RadioMenuItem, none of their click events work, and the API docs didn't give any tips about it.
At last, I found it only works if it's contained in dijit/MenuBar. Should Item widgets be contained in dijit/MenuBar or dijit/Menu? How are the events processed on dojo widgets?
For example:
<html>
<head>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dijit/themes/claro/claro.css">
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"
data-dojo-config="async:true,parseOnLoad: true"></script>
<script>
require(["dojo/parser"],function(parser){
parser.parse();
});
</script>
</head>
<body class="claro">
<div data-dojo-type="dijit/MenuBar" >
<div data-dojo-type="dijit/MenuItem" onclick="alert();">it works</div>
</div>
<div data-dojo-type="dijit/MenuItem" onclick="alert();">it doesn't work</div>
</body>
</html>
In this case MenuItem needs a ContainerWidget like Menu or MenuBar. You add the Item as a child like :
require([
"dojo/dom",
"dijit/MenuItem",
"dijit/DropDownMenu",
"dijit/form/DropDownButton"
],
function(dom,MenuItem,DropDownMenu,DropDownButton){
var myMenu = new DropDownMenu();
var menuItem1 = new MenuItem({
id:"M1",
label:"Show M1",
onClick:function(){
//do what you want to do here
}
});
myMenu.addChild(menuItem1);
});
Studying this might help you too to understand how it works.
http://dojotoolkit.org/reference-guide/1.10/dijit/DropDownMenu.html#dijit-dropdownmenu
Regards
Related
The Sheety API is great but I cannot make it work with Vue.
The only included example uses jQuery with handlebars.js which, like vue.js, uses double mustache syntax that collides.
<html>
<head>
<title>UK Theme Parks</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.12/handlebars.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$.getJSON('https://api.sheety.co/uk-theme-parks', function(data) {
var template = Handlebars.compile($('#item-template').html())
$('#items').html(template(data))
})
})
</script>
<script id="item-template" type="text/x-handlebars-template">
<ul>
{{#each this}}
<li>{{name}}</li>
{{/each}}
</ul>
</script>
</head>
<body>
<div id="items">Loading theme parks...</div>
</body>
</html>
Is there a way to make this example work inside the Vue component? Most preferably, to make it work without having to import the handlebars.js or jQuery?
Please mind that I am an exploratory designer, not a well-versed js coder, so I would greatly appreciate a working example :)
i use jwplayer 6 , i have problem when i want to Customize my player (put skin or autostart option .... ) the player disappear
this code work good :
<body>
<div id="player">Loading the player...</div>
<script type="text/javascript">
jwplayer("player").setup({
file: 'https://www.youtube.com/watch?v=EgmXTmj62ic'
});
</script>
</body>
but when i put something like this the player disappear and show just (Loading the player...) :
<body>
<div id="player">Loading the player...</div>
<script type="text/javascript">
jwplayer("player").setup({
file: 'https://www.youtube.com/watch?v=EgmXTmj62ic'
autostart: true,
mute: true
});
</script>
</body>
or if there is any other way to customize player please tell me , thanks
Your code has error in the 'file' line, try this:
<body>
<div id="player">Loading the player...</div>
<script type="text/javascript">
jwplayer("player").setup({
file: 'https://www.youtube.com/watch?v=EgmXTmj62ic',
autostart: true,
mute: true
});
</script>
</body>
I am trying to use dijit/layout/TabContainer with dojox/mvc/Repeat. It seems that as the indivdual tab panes (contentPanes) are not immediate children of the tab container it does not render them as tabs. I end up with three content panes but no tabs.
I have created a paste bin which shows the issue. I have included a text box which binds to the stateful model to show that the scope is correct on the repeater.
http://jsbin.com/tufuzini/1/edit?html,output
Has anyone experienced this or have an alternative?
dojox/mvc/Repeat is a deprecated module as it has been take over by dojox/mvc/WidgetList. It'll allow you to place multiple occurrence of a template widget as immediate child of another widget, for example, dijit/layout/TabContainer. Here's an example:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/dojo/1.9.2/dojo/dojo.js" data-dojo-config="parseOnLoad: 0, async: 1"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/dojo/1.9.2/dojo/resources/dojo.css">
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/dojo/1.9.2/dijit/themes/claro/claro.css">
<script>
require([
"dojo/_base/declare",
"dojo/aspect",
"dojo/parser",
"dojox/mvc/getStateful",
"dojox/mvc/Templated",
"dojox/mvc/WidgetList",
"dijit/layout/TabContainer",
"dojox/mvc/Element",
"dojo/domReady!"
], function(declare, aspect, parser, getStateful, Templated, WidgetList){
tabRecords = getStateful({
items: [
{first: "Anne", last: "Ackerman"},
{first: "Ben", last: "Beckham"},
{first: "Chad", last: "Chapman"}
]
});
declare("my.Templated", Templated, {
templateString: document.getElementById("innerTemplate").innerHTML
});
parser.parse();
});
</script>
<script id="innerTemplate" type="dojox/mvc/InlineTemplate">
<div>
<div>First: <input type="text" data-dojo-type="dojox/mvc/Element" data-dojo-props="value: at('rel:', 'first')"></div>
<div>Last: <input type="text" data-dojo-type="dojox/mvc/Element" data-dojo-props="value: at('rel:', 'last')"></div>
</div>
</script>
</head>
<body class="claro">
<script type="dojo/require">at: "dojox/mvc/at"</script>
<div data-dojo-type="dijit/layout/TabContainer"
data-dojo-mixins="dojox/mvc/WidgetList"
data-dojo-props="partialRebuild: 1, children: at(tabRecords, 'items')"
data-mvc-child-type="my.Templated"
data-mvc-child-props="title: at(this.target, 'first')">
</div>
</body>
</html>
Best,
Akira
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
I have the following code, straight from the tutorial:
<!DOCTYPE HTML>
<head>
<link rel="stylesheet" href="js/dijit/themes/claro/claro.css" />
<script src="js/dojo/dojo.js" data-dojo-config="async: 1, parseOnLoad: 1"></script>
<script>
require(["dojo/_base/fx", "dojo/on", "dojo/dom", "dojo/parser", "dojo/domReady!"], function(fx, on, dom, parser)
{
var fadeOutButton = dom.byId("fadeOutButton"),
fadeInButton = dom.byId("fadeInButton"),
fadeTarget = dom.byId("fadeTarget");
on(fadeOutButton, "click", function(evt)
{
fx.fadeOut({ node: fadeTarget }).play();
});
on(fadeInButton, "click", function(evt)
{
fx.fadeIn({ node: fadeTarget }).play();
});
});
</script>
</head>
<body class="claro">
<button data-dojo-type="dijit/form/Button" type="button" id="fadeOutButton">Fade block out</button>
<button data-dojo-type="dijit/form/Button" type="button" id="fadeInButton">Fade block in</button>
<div id="fadeTarget" style="background: red; height: 256px">
A red block
</div>
</body>
</html>
My goal is to have Dojo style the buttons. As far as I can see, this is done by the parser. The problem with this is that the parser will change the id of the button elements and therefore the events will not be triggered. If I remove dojo/parser from require or change parseOnLoad to 0, the buttons work, but they are not style. With the code above, buttons are styled but do not work. Is it possible to have both?
I think I figured it out -- I have to use registry.byId instead of dom.byId