I am creating an app and would like to use the SpinWheel widget from Dojo.
Currently, all I am trying to do is get the working example of the SpinWheel Widget from the site, http://dojotoolkit.org/reference-guide/1.9/dojox/mobile/SpinWheel.html#id4, functioning
Unfortunately, I cannot seem to do this.
I have tried:
Using the declarative code from the example online. I pulled both the dojo and dojox repos from github, and know that they are in the correct locations because the Hello Dojo tutorial worked perfectly with my paths. Code (mostly copied from site in bold above) is below.
What happens: None of the Dojo code works. The title shows up, as does the ".", but nothing else.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Dojo SpinWheel</title>
<!-- load Dojo -->
<script src="dojo/dojo.js"
data-dojo-config="async: true"></script>
</script>
<script>
require([
"dojox/mobile/parser",
"dojox/mobile/SpinWheel"
]);
</script>
</head>
<body>
<div id="view1" data-dojo-type="dojox/mobile/View">
<h1 data-dojo-type="dojox/mobile/Heading">Custom SpinWheel</h1>
<div id="spin1" data-dojo-type="dojox/mobile/SpinWheel">
<div data-dojo-type="dojox/mobile/SpinWheelSlot"
labels="['A','B','C','D','E','F','G','H','I','J','K']"
style="text-align:center;width:40px;"></div>
<div data-dojo-type="dojox/mobile/SpinWheelSlot"
labelFrom="3000" labelTo="3100"
style="width:70px;"></div>
<div id="pt" class="mblSpinWheelSlot"></div>
<div id="txt" class="mblSpinWheelSlot">.</div>
<div data-dojo-type="dojox/mobile/SpinWheelSlot"
labelFrom="0" labelTo="9"
style="width:30px;"></div>
<div data-dojo-type="dojox/mobile/SpinWheelSlot"
labels="['pt','px','cm']"
style="width:50px;"></div>
</div>
</div>
</body>
</html>
Your example can't work, because:
You don't call parser.parse()
You don't require all modules used by declarative syntax
You don't load mobile theme
Assuming that DOJO is unpacked in the root of your htdocs of your Apache, the working head of your HTML file should look like that:
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<title>Dojo SpinWheel</title>
<!-- load Dojo -->
<script src="/dojox/mobile/deviceTheme.js"></script>
<script src="/dojo/dojo.js" data-dojo-config="async: true"></script>
<script type="text/javascript">
require([
"dojox/mobile/parser",
"dojox/mobile/SpinWheel", "dojox/mobile/View", "dojox/mobile/Heading", "dojox/mobile/SpinWheelSlot"
], function(parser) {
parser.parse();
});
</script>
</head>
See also the examples under dojox/mobile/tests. They usually do work, contrary to many examples from Dojo online docs :(
Related
I started on a new project where it is used the javascript Dojo Toolkit library.
I am following the tutorial of the Dojo Toolkit's own website to learn how to use the tool. But I'm in trouble in the second example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tutorial: Hello Dojo!</title>
</head>
<body>
<h1 id="greeting">Hello</h1>
<!-- load Dojo -->
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/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>
The code is very simple. On the line where appears the word "Hello" should be added -at Dojo- with the word "Dojo", forming the phrase "Hello Dojo". But only appears the word "Helo". Ie the Dojo libraries are not being carregdas!
Any suggestion?
I changed the link:
FROM:
src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"
TO:
src="http://ajax.googleapis.com/ajax/libs/dojo/1.8.2/dojo/dojo.js"
It worked!
I have a page that uses jquery and is working perfectly. The JQuery is located inside two files: control.js and lightgallery.js. The minute I add in AngularJS all of my jquery stops working. I need to find a way to have my jquery work without learning how to rewrite all of the functions in angular. Any suggestions?
None of the html I've added with the ngInclude is using angular. It's just simple html.
<!DOCTYPE html>
<html ng-app="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>H</title>
<!-- STYLESHEETS -->
<link rel="stylesheet" href="/assets/common/css/split.css">
<link rel="stylesheet" href="/assets/common/css/control.css">
<!-- JQUERY -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="/assets/common/js/bootstrap.min.js" type="text/javascript"> </script>
<script src="/assets/common/js/control.js" type="text/javascript"></script>
<!-- ANGULAR -->
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body id="home">
<div ng-include="'../assets/includes/left-panel.html'"></div>
<!-- / START TEMPLATE -->
<div ng-include="'../assets/includes/template.html'"></div>
</body>
</html>
Here is what is happening:
Your jQuery code probably runs on document ready:
$(function(){
//your initialization code here
});
The problem is that the elements in your templates that your jQuery plugins are targeting are not yet added to the DOM when this function runs. This is because Angular has not yet inserted these templates into the DOM.
You can verify this by removing the ng-includes and replacing them with the markup contained in the templates themselves (bypassing ng-include).
This is a classic "mistake" when using Angular along with jQuery plugins.
The only "correct" way to integrate jQuery plugins with Angular is to wrap the plugins in a directive.
I am new to OPEN UI5, I have done the setup of importing Open UI5 in eclipse keepler version.
I can execute sample application inside my Javascript views but if I try using sap.ui.core library then I am unable to see the options/Classes inside it but I am able to see commons package and its content.
index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
<!-- Bootstrap Script to load Open UI5 at Runtime (Including library and Themes)-->
<script src="resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.ui.commons,sap.ui.table,sap.ui.ux3"
data-sap-ui-theme="sap_bluecrystal">
</script>
<!-- Application Script (specific to the application ) -->
<script type="text/javascript">
sap.ui.localResources("TelephoneDirectory");
var view = sap.ui.view({id : "loginPage",
viewName : "TelephoneDirectory.LoginPage",
type : sap.ui.core.mvc.ViewType.JS});
view.placeAt("content");
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>
Am I missing some bootstrap files ?
I want that the sap.ui.core functions will be visible in eclipse when I press ctrl+space.
I am trying to build my personal website using express and want to put a datepicker on one of the page.
I tried to change the ejs file of this page, however, nothing works.
I am wondering if it is because that the layout.ejs file exists, and wondering how can I just load jquery-ui in only of the ejs.file? Because I cannot find any related npm to install . Many thanks for answering！XD
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/smoothness/jquery-ui.css" media="all">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
</head>
<body>
<script>
$(function() {
$( "#datepick" ).datepicker();
});
</script>
<aside class="widget">
<p>Date: <input type="text" id="datepick"></p>
</aside>
</body>
</html>
There is another similar question, but I think the answer does not works for me.
node.js - DatePicker jquery UI not workinng
When I just use Express and change the index.ejs like the following, it works , but when there are many pages, it seems that it cannot be loaded...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/smoothness/jquery-ui.css" media="all">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<script>
$(function() {
$('#datepick').datepicker();
});
</script>
</head>
<body>
<aside class="widget">
<p>Date: <input type="text" id="datepick"></p>
</aside>
</body>
</html>
node.js - DatePicker jquery UI not workinng
For whom run into the same problem, this is the reference.
I finally found the answer by checking the code.I was unable to load JQuery for in the layout.ejs, I retyped the following in order to load the bootstrap, but actually by using https://npmjs.org/package/twitter-bootstrap-node twitter-bootstrap-node, there is no-need to load the javascripts again. This may be a common problems for beginners in Node.JS like me.Hope this answer can be helpful to people who run into the same problem and the code is in the answer of the related problem.
<script src="/javascripts/jquery.js"></script>
<script src="/javascripts/bootstrap.js"></script>
<script src="/vendor/twitter/less/bootstrap.less"></script>
Hi look at this jsfiddle link http://jsfiddle.net/w7PHj/
you need to use like this....
$('#datepick').datepicker();
This is just a piece of test dojo code I am writing. I am a beginner to Dojo and I can't understand what is wrong with this. The alert button is not displayed on load. Furthermore,
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tutorial: Hello Dojo!</title>
<!-- load Dojo -->
</head>
<body>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.7.2/dojo/dojo.js" data-dojo- config="async:true, parseOnLoad:true">
require(["dijit/layout/BorderContainer", "dijit/layout/TabContainer",
"dijit/layout/ContentPane", "dojo/parser"]);
require(["dojo/ready"],function(ready){
alert("BLAH");
});
</script>
<div id="targetID">
Hello world
</div>
</body>
</html>
Don't put javascript in the same tag where you have src= and close your script tags
It seems to be ok here: http://jsfiddle.net/XwAhY/ . Are u sure that data-dojo- config in your page is without spaces?