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>
Related
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);
}
})
I'm trying to manage select2 library in order to augment the capabilities of natives select html controls.
According to the official documentation (very compressed) it says that for using select2 you only need to download they CSS and JavaScript files and that is (and also, implicitly assumed, that you need jQuery).
So, there is a way of initializing select using HTML5 data attributes, but I am not getting it; I'm trying to follow their example. Perhaps I am missing some important note here.
Here is the HTML I am trying to do
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
</head>
<body>
<h1>Hello Select2</h1>
<div>
<select multiple id="a_select" data-tags="true" data-placeholder="Select an option" data-allow-clear="true" style="width:100%">
<option value="AL">Alabama</option>
<option value="WY">Wyoming</option>
</select>
</div>
</body>
</html>
Also a link to plunker, to have a live example ready to go. https://plnkr.co/edit/Xk101K3sowAYQwbRCFez?p=preview
PS: I can achieve the desired result thought JavaScript, but is quite annoying to don't know what is not working when i just followed the example on the official site.
You're not initializing Select2 anywhere... data-* attributes let you override default configuration, but you still need to kick off the plugin:
<script>$('select').select2();</script>
https://plnkr.co/edit/RPObSPVl8jlZgtedsK38?p=preview
I am using one JQuery plugin which is giving me Calendar with Time selection on click of that textbox this plugin very flexible to use.
below is the code which I am referring to use this plugin.
<link href="DateTimePicker/jquery.datetimepicker.css" rel="stylesheet" type="text/css" />
<script src="DateTimePicker/jquery.js" type="text/javascript"></script>
<script src="DateTimePicker/jquery.datetimepicker.full.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#datetimepicker_mask').datetimepicker({
mask: '9999/19/39 29:59'
});
});
</script>
<h3>Mask DateTimePicker</h3>
<input type="text" value="" id="datetimepicker_mask"/><br><br>
Above code works fine for me for single Textbox.
but I have to use this plugin for more then one textbox so this I can use only if this plugin is taking by Class instaed of Id.
so I am not getting what change I have to do in the Jquery to achieve the task.
there are so many Jquery & Css which is dependent on this.
Can anyone help me for this.
JQuery's selectors are very similar to CSS selectors. So you can use .class to select by class.
In your example you would change your selector to
$('.datetimepicker_mask')
And use a class on your input instead of id
<input type="text" value="" class="datetimepicker_mask"/>
i am planing to make my text box editable...
so i removed the id from the disabled code...
even i tested in fiddle its not working...
providing my cod below....
i am providing part of my code in fiddle i am not able to see the text box...
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>If you click on me, I will disappear.</p>
<p>Click me away!</p>
<p>Click me too!</p>
</body>
</html>
You have to use input instead of form:input, browser can render standard html tags and you have to provide standard html.
Live Demo
Change
<input id="behvrName" type="text" cssClass="icwText" path="" />
To
<input id="behvrName" type="text" cssClass="icwText" path="" />
cssClass and are also not standard attributes and you need to change them if you want them to be interpreted and act accordingly by browser. cssClass would be class.
spring:message and form:input are not plain HTML tags; rather, they are pseudo-tags processed by your server-side framework. If you want to use JSFiddle, you must use plain HTML.
Furthermore, your input's id is behvrName, but you're not selecting that. If you want to disable that input, use an appropriate selector $('#behvrName') in the JavaScript portion.
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.