Dojo element/widget targeting, what am i doing wrong? - javascript

I'm totally new to dojo ... and am drawing from my experience with jQuery somewhat ...
I have several elements like so:
<input name="info1" value="" style="width:52px" contstraints="{pattern:'#'}" dojoType="dijit.form.NumberTextBox"/>
<input name="info2" value="" style="width:52px" contstraints="{pattern:'#'}" dojoType="dijit.form.NumberTextBox"/>
<input name="info3" value="" style="width:52px" contstraints="{pattern:'#'}" dojoType="dijit.form.NumberTextBox"/>
But I'm having the hardest time tring to assign a simple onKeyUp event ... everything ive tried looks like it would work but doesn't ... console always reports that the thing im trying to do is not a function ...
dojo.addOnLoad(function()
{
dojo.query('input[name^=info]').connect('onkeyup',function(e)
{
console.log('oh yeah');
});
});
What am i doing wrong, what should I be looking out for ???

Unfortunately, dojo.query() will only return native DOM nodes. I think you want to get back the rendered Dijit Widget.
To do that, you'll need to assign your inputs IDs and use dijit.byId().
Also, unlike native HTML event names, Dojo event names are case-sensitive. So, onkeyup refers to the native HTML and is different from the Dojo event name onKeyUp.
I think you may also have an extra 't' in contstraints.
An example usage:
<html>
<head>
<title>Test</title>
<link type="text/css" rel="stylesheet" href="dijit/themes/tundra/tundra.css"/>
</head>
<body class="tundra">
<input id="input1" name="input" type="text"dojoType="dijit.form.NumberTextBox"/>
<script type="text/javascript" src="dojo/dojo.js"
djConfig="isDebug: true, parseOnLoad: true"></script>
<script type="text/javascript">
dojo.require("dijit.form.NumberTextBox");
dojo.addOnLoad(
function() {
dojo.connect(dijit.byId("input1"), 'onKeyUp',
function(e) { console.log('oh yeah'); });
}
);
</script>
</body>
</html>

Dojo makes it easy to declare events without the pain of going through queries. Just put the event right in your markup. See http://docs.dojocampus.org/quickstart/events#events-with-dijit
<input name="info1" value="" style="width:52px" constraints="{places:0}" dojoType="dijit.form.NumberTextBox" onkeyup="console.log('key up')" />
It's more concise, and you don't need to name and look up references just to bind the event.
Either way, abboq is right, you'll usually want to deal with the widget directly rather than the DOM node, since instantiating a Dijit often ends up restructuring the DOM so that it looks very different from the original page. The widget acts as an abstraction.

Related

How I build code such http://fiddle.jshell.net/bwKZt/152/ - HTML & Javascript

I need build code such : http://fiddle.jshell.net/bwKZt/152/
but my code dosen't work ! I am a beginner. Please help me.
index.php:
<!DOCTYPE html><html>
<head>
<script>
$("#label").bind("keyup", changed).bind("change", changed);
function changed() {
$("#url").val(this.value);
}
</script>
</head>
<body>
<input type="text" id="label" />
<input type="text" id="url" readonly />
</body>
</html>
Some of the JavaScript here isn't native JavaScript , but is using a plugin called jQuery that makes searching and manipulating HTML elements easier.
When you see $(), that's the jQuery way of finding elements. But it won't work because you don't have jQuery referenced at all.
If you don't want to use jQuery, you can find elements with something like document.getElementById('label').
But lots of people use jQuery to make referencing page elements short and sweet, as with $('#label').
Try to reference jQuery first, like:
<!DOCTYPE html><html>
<head>
<!-- The below line references an externally hosted copy of jQuery 2.2.4 -->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script>
// The below chunk is telling it to bind to the keyup event only AFTER the document has fully loaded.
// Sometimes when your binding code is executed, the elements you wish to bind to aren't loaded yet.
$(document).ready(function(){
$("#label").bind("keyup", changed).bind("change", changed);
});
function changed() {
$("#url").val(this.value);
}
</script>
</head>
<body>
<input type="text" id="label" />
<input type="text" id="url" readonly />
</body>
</html>
The first problem is because you haven't include jquery with a script tag to solve that add this code in the head of you html file if you have the Internet connection to load Jquery from CDN
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
or you can download Jquery file from Jquery site and you will have it locally
after that you must execute this code after the executing the jquery ready function
$(document).ready(function(){
$("#label").bind("keyup", changed).bind("change", changed);
function changed() {
$("#url").val(this.value);
}
})

get node element by model property angularjs

There is a way to get the input that binding a model's property.
I want to do this to blur the search input after I send the form,
and I want to do this dynamically for later changes in html source.
Example:
var app = angular.module("MyApp", []);
app.controller('ctrl', function($scope) {
$scope.term = 'test';
$scope.submit = function(){
document.querySelector('#search').blur();
// I want replace document.querySelector('#search') with something like 'getElementByProp($scope.term)'
};
});
<!DOCTYPE html>
<html data-ng-app="MyApp">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div data-ng-controller="ctrl">
<form data-ng-submit="submit()">
<input id="search" type="search" data-ng-model="term" />
</form>
</div>
</body>
</html>
There's a fundamental error in your intention here.
Please keep the following always in mind:
The controller should know absolutely nothing about the DOM
This is a precious rule of thumb that will help you a lot.
Now, of course you need to interact with the DOM from your javascript (AngularJS code), and for that you should use Directives.
In your case though I would use another approach:
if (document.activeElement) {
document.activeElement.blur();
}
This will work for any focused elements and you won't need to specifically query any DOM element.
So in theory you're not giving the controller any knowledge about the DOM, so for me this doesn't break the rule I mentioned above.
Just as a side note, $document for some reaon doesn't expose this activeElement.
I don't have time to dig into the code to see why but as far as I've tested you need to stick with the native document object.
An easy way to do this is using the jQuery little version that comes with AngularJS.
Try this:
var element = angular.element('[ng-model="YOUR_MODEL_NAME_HERE"]');
element.blur(); // element is a jQuery object
This should work
The reason this is not possible is that this is not something you'll usually want to do in Angular - you're most likely still "thinking like you're using jQuery". Please elaborate on why you want to manipulate the DOM yourself in the first place. Most likely it's a different problem that you can solve with e.g. a directive.
(This may sound like a lame answer, but "don't do this" very likely is the only correct way to handle this situation.)

Jquery toggle() and click() functions not working in internet explorer 11?

Here is my Jquery code.Please have a look through it and do help me?
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$("#rec").click(function() {
$("#tab1").toggle();
});
</script>
<input type="button" class="button" id="rec" value="Sample"/>
<div id="tab1">
Hello this is a sample jquery toggling function.
</div>
Just wrap your Jquery code inside $(document).ready(function(){}) as shown below :-
<script type="text/javascript">
$(document).ready(function(){
$("#rec").click(function(event) {
event.preventDefault();
$("#tab1").toggle();
});
});
</script>
Read More on $(document).ready() here.
Working Demo
It seems that there is an error while loading JQuery try this
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Use $(document).ready(function(){}, to execute the js code when then document will be loaded or put your scripts just before the </body> tag.
I ll take a guess here. (I'm feeling lucky!) (update:seems i wasn't lucky but read this anyway it's usefull)
Your code does not work because you say "do something when the html element with id="rec" is clicked" and "do something to the html element with id="tab1""
My guess is, you have more than one html element with id="rec" and/or more than one html element with id="tab1" in your code.
id value of html elements must be unique across a webpage! If there are more than one html elements with the same id then the jquery selector doesn't know when to fire, and also browsers behavior can be unexpected. This may be the cause of internet explorer nagging.
You need to add compatibility meta just after <head> tag:
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge;chrome=1" />

Transferring Custom DOM Node Attributes to Dijit Widgets

I'm working on some code that uses custom attributes on DOM nodes. These are necessary for particular logic that is used. The custom attributes are set on input elements such as dropdowns and text input fields and are of the format...
<input type="text" myCustomId="blah"...
This all works fine with standard HTML inputs. However, we are looking to use some Dijit widgets in place of the standard inputs to achieve a specific look & feel.
The DOM is parsed onLoad and the widgets are loaded (we set data-dojo-type to specify the widget).
The problem is Dojo/Dijit doesn't preserve the custom attributes. They get lost in the parsing.
Is it possible to specify custom attributes that a Dijit widget should use?
Edit:
Heres some sample HTML that highlights the problem. The "custom" attribute is being lost...
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://dojotoolkit.org/reference-guide/1.9/_static/js/dijit/themes/claro/claro.css">
<script>dojoConfig = {parseOnLoad: true}</script>
<script src="http://dojotoolkit.org/reference-guide/1.9/_static/js/dojo/dojo.js"> </script>
<script>require(["dojo/parser", "dijit/form/TextBox"]);</script>
</head>
<body class="claro">
<label for="firstname">Test: </label>
<input type="text" name="firstname" custom="test" value="testing testing"
data-dojo-type="dijit/form/TextBox"
data-dojo-props="trim:true, propercase:true" id="firstname" />
</body>
</html>
I found a solution based on this article...
http://dojotoolkit.org/features/1.6/html5data-attributes
Essentially if I add "data-" in front of our custom attributes, the dojo parser preserves the custom attribute in the widget. It doesn't place the attribute on the top most node of the widget but it does enough for us to look it up
Try use data-dojo-props='urCustomID=XXX', then you could obtain it by get("urCustomID").
the custom attributes added are retained by the widgets indeed. But, they are case-insensitive. According to the example you provided in your question, try accessing it by,
registry.byId('field_id').get('mycustomid')
or
dijit.byId('field_id').get('mycustomid')
Let me give a simple example:-
<script type='text/javascript'>
dojo.require("dijit.form.TextBox");
function func() {
alert(dijit.byId('namefld').get('customid'));
}
</script>
</head>
<body class="claro">
<input type="text" customId='mango' dojoType="dijit.form.TextBox" id="namefld" name="namefld"/>
<button onclick='func()'>click</button>
</body>

javascript: getElementById problem in IE

I am trying to attach a click event to a check box using JavaScript. Shown below is the HTML and JS.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<input type="hidden" name="caution_c" value="0">
<input type="checkbox" id="caution_c" name="caution_c" value="1" tabindex="120">
<script type="text/javascript">
var cb = document.getElementById('caution_c');
cb.onclick = function() {
alert(1);
}
</script>
</body>
</html>
The problem is that in IE, the click event does not fire. I have narrowed down the problem location. The issue is that there is a hidden input just before the check box and both these elements have the same name. I'm not sure why this is causing a problem(after all, I'm using getElementById and the hidden element does not even have an id).
Is there a valid reason for this type of behavior (IE only. Works fine in Firefox...as always :( )? Also, is there a good workaround (I could just do document.getElementsByName('caution_c')[1] but I don't want to...)
Internet Explorer gets confused over name and id - it is highly recommended to treat these two attributes as if they were the same.
You can fix it either by 1) ensure that there are no id/name conflicts in your document, or 2) override IE's native getElementById-method.
Read more about it here.
Try using a different event such as onchange or onfocus to see if that solves it. Also I don't think onclick will be fired if a user tabs onto the checkbox, which may or not be how you intend it to work.
I agree, IE is poor in understanding things at html level.
I would rather add the link to button rather than using anchor elements, as IE is having trouble at anchor level with document.getElementById(). Try same at button and will work for other users.

Categories