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
Related
I am very much new to AngularJS. I want to update the .less files variable dynamically. But didn't get how to access this .less file using AngularJS.
My code:
style.less
#bg-color: #484848;
.header{
background: #bg-color;
}
I want to update #bg-color: #484848; present in the style.less file to some value input by user. How can I get this using AngularJS.
You should run Less in browser to do this. If you load less.js in your HTML, the global less object come available, so you can use less.modifyVars() and less.refreshStyles() inside your angularJS code:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-example78-production</title>
<link rel="stylesheet/less" type="text/css" href="color.less" />
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0-beta.1/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.3.1/less.min.js"></script>
</head>
<body ng-app="submitExample">
<script>
angular.module('submitExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.list = [];
$scope.text = 'orange';
$scope.submit = function() {
if ($scope.text) {
less.modifyVars({ color : $scope.text });
}
};
}]);
</script>
<h1>Colored text</h1>
<form ng-submit="submit()" ng-controller="ExampleController">
Enter text and hit enter:
<input type="text" ng-model="text" name="text" />
<input type="submit" id="submit" value="Submit" />
</form>
</body>
</html>
See: http://plnkr.co/5b1HTkneFXLMGVvXEG8j http://plnkr.co/edit/Z9tRY3Lol31PMnPUfxQi
I am trying to open a simple modal dialog and I have been struggling to do this. Can
any one please help? This is the HTML code(please remove pre). This simply doesnot work.
Can any one please tell **strong text**me why? I have not been getting the kind of output that I really
need.
Any one help me.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="css/magnific-popup.css" rel="stylesheet" />
<script src="js/jquery.magnific-popup.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" ></script>
</head>
<body>
<a class="popup-modal" href="#test-modal">Open modal</a>
<div id="test-modal" class="white-popup-block mfp-hide">
<h1>Modal dialog</h1>
<p>You won't be able to dismiss this by usual means (escape or
click button), but you can close it programatically based on
user choices or actions.</p>
<p><a class="popup-modal-dismiss" href="#">Dismiss</a></p>
</div>
<script>
$(function () {
$('.popup-modal').magnificPopup({
type: 'inline',
preloader: false,
focus: '#username',
modal: true
});
$(document).on('click', '.popup-modal-dismiss', function (e) {
e.preventDefault();
$.magnificPopup.close();
});
});
</script>
</body>
</html>
Load jquery before the magnific-popup plugin, it relies on jquery (I've never used it but I'm assuming so seeeing as it is pre-appended withfixed 'jquery')
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="css/magnific-popup.css" rel="stylesheet" />
<!-- Jquery loaded first here... -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" ></script>
<!-- Plugins after... -->
<script src="js/jquery.magnific-popup.js"></script>
</head>
<body>
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>
When I start my application, the dojo start loading but are not yet fully parsed and thus screen looks ugly!!!
Is there a way to hide this ugly screen until it is fully loaded a parsed?
Thanks
Dominique
EDIT ADD SNIPPET
I heard that WL Studio would hide automatically the body and thus no need to create an overlay.
Here my html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<meta name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="shortcut icon" href="images/favicon.png">
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
<link rel="stylesheet" href="css/Test.css">
<script>
window.$ = window.jQuery = WLJQ;
</script>
<script type="text/javascript"
data-dojo-config="isDebug: false, async: true, parseOnLoad: true, mblHideAddressBar: false"
src="dojo/dojo.js"></script>
</head>
<body id="content" style="display: none;">
<div id="main" data-dojo-type="dojox.mobile.View"
data-dojo-props='selected:true'>
<div data-dojo-type="dojox.mobile.Heading"
data-dojo-props='fixed:"top"'>Main Screen</div>
<button id="refreshBte" data-dojo-type="dojox.mobile.Button"
style="width: 100%">Refresh</button>
<button id="settingsBte" data-dojo-type="dojox.mobile.Button"
style="width: 100%">Setting</button>
</div>
<!--application UI goes here-->
<script src="js/initOptions.js"></script>
<script src="js/Test.js"></script>
<script src="js/messages.js"></script>
</body>
</html>
and my js
function wlCommonInit(){
require([ "dojo/core-web-layer", "dojo/mobile-ui-layer",
"dojo/mobile-compat-layer" ], dojoInit);
}
function dojoInit() {
require([ "dojo", "dojo/parser", "dojox/mobile", "dojox/mobile/compat",
"dojox/mobile/deviceTheme", "dojox/mobile/Heading", "dojox/mobile/Button" ],
function(dojo) {
dojo.ready(function() {
});
});
}
I tried also to add hidden="hidden" in the but it doesn't change anything.
Any idea?
Yes there is,
you need to build a loading overlay. Check out this tutorial:
http://dojotoolkit.org/documentation/tutorials/1.6/recipes/loading_overlay/
What I normally did with this is:
<div id="main" style="visibility: hidden;"></div>
After the parsing is complete:
set the main visibility to visible again.
Might not fully solve the problem (depends on how fast the browser able to resolve the layout), but you won't be getting plain html displayed until it is:converted into widget.
Further reference:
dojo/Ready = to detect when the page is parsed.
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