How do I insert value into labels using dojo - dojo

I am trying to dynamically insert the values in the labels which I will hide from sighted users but will be read by screen readers for visually impaired users that are displayed in the columns. How can I accomplish this using dojo?
<html>
<head>
<title>Dojo Labels</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/dojo/1.3.2/dojo/dojo.xd.js"></script>
<style type="text/css">
.style1
{
width: 154px;
}
</style>
</head>
<body>
<table style="width: 51%; height: 204px;">
<tr>
<td class="style1">
<input id="Checkbox1" type="checkbox" />
<label for="Checkbox1"></label>
</td>
<td>
John
</td>
<td>
Doe
</td>
</tr>
<tr>
<td class="style1">
<input id="Checkbox2" type="checkbox" />
<label for="Checkbox2"></label>
</td>
<td>
Jane
</td>
<td>
Doe
</td>
</tr>
<tr>
<td class="style1">
<input id="Checkbox3" type="checkbox" />
<label for="Checkbox3"></label>
</td>
<td>
John
</td>
<td>
Smith
</td>
</tr>
</table>
</body>
</html>


If you just need to dynamically change label then you can try this:
dojo.query("label[for=Checkbox1]")[0].innerHTML = "text";
But if you need logic to detect if it is a screen reader or a browser then I cannot help. But you probably could always render label with text just add style display:none;
<label for="Checkbox2" style="display:none;">text</label>


not exactly sure if I understand exactly what you are doing, but dojo provides a method that allows you to modify a DOM node's attribute values. It's called dojo.attr()


Maybe this one will help.
To get label content : dijit.byId("btnButtonName").get("label")=="SomeName");
To set label content : dijit.byId("btnButtonName").set("label", "SomeName");

Related

How can I add info icon with details next to input fields?

My input fields look like this:
<table class="something">
<tbody>
<tr>
<td style="vertical-align:top;width:60%;padding-right:25px">
<label><i class="far fa-calendar-alt"></i> Something:</label> (<em>something</em>) </td>
<td style="vertical-align:top;width:20%">
<label class="something" for="something">something:</label>
<input id="something" name="something" step="any" type="number" value=""> </td>
</tr>
</tbody>
</table>
How can I add an info icon with some text next to my inputs? I've found some solutions, but those are not fully responsive, they didn't work in all devices. A good example of what I want: https://bankmonitor.hu/lakashitel-kalkulator/?link_type=tile-menu-item
Thank you!

TD not aligned correctly

Im having a little trouble trying to align this table, also the padding is not working. Im trying to make the textbox start in the same position as the checkbox but below it, also im trying to add padding to the first tr by doing it to the td but its not working.
<table>
<tr>
<td>
<input type="checkbox" Style="margin-left: 165px; padding-bottom: 50px;">
</td>
<td>
<label Style="padding-bottom: 50px;">Label for Checkbox</label>
</td>
</tr>
<tr>
<td>
<label Width="163px">#Another Label:</label>
</td>
<td>
<input type="textbox" MaxLength="20" Width="163px">
</td>
</tr>
</table>
Here is the fiddle --> https://jsfiddle.net/u5vu5mn6/

Getting elements from a webbrowser

Hoping someone can help me out here.
I'm trying to pull a few bits of info from a web page programatically.
The HTML in question is like this...
<body>
<!-- body content -->
<div id="content">
<!-- Page Header -->
<h1>
PRODUCTNAME™
</h1>
<!-- End Page Header -->
<div id="productImg">
<img id="product.image.large.015" alt="PRODUCTNAME™" src="PRODUCTIMAGEURL" border="0" />
</div>
<div id="productAlt">
<table width="98%" border="0" cellspacing="1" cellpadding="2">
<tr class="altRowLtGray">
<td>
Item #
<span style="text-decoration: inherit;">015</span>
</td>
</tr>
<tr class="altRowLtGray">
<td>
<span style="float: left;">PRODUCTPRICE GBP</span>
<span style="float: right; padding-left: 1em;"></span>
</td>
</tr>
<tr class="altRowLtGray">
<td>
PRODUCTADDITIONALINFO
</td>
</tr>
</table>
</body>
I need to retrieve the 4 items in caps (PRODUCTNAME, PRODUCTIMAGEURL, PRODUCTPRICE and PRODUCTADDITIONALINFO) but am struggling as any examples I find dont seem to be able to be transposed to suit the above HTML... but it could just be me!
I know I need to use either GetElementByID or GetElementByTagName, but i've not used either of these functions before so please forgive my ignorance.
Any help appriciated!!!

How can i achieve truncated text in a responsive width table column?

I have a table with 4 columns. The second column displays an email address and i'd like that column to take up the maximum amount of width within the table that it can. Then when the viewport size becomes smaller, the column width should be responsive and the email displayed should truncate if it becomes too large for the column.
All the solutions i've found so far either use table: {table-layout:fixed;} or set a max-width value on the td. Which are no good for me as they force the columns to specific widths.
This is what i'm trying to achieve regarding the column width layout, but the truncation fails. I read on an SO comment (showing the max-width solution) that setting width: 100% and min-width: 1px would have the desired affect, but it doesn't appear to work.
http://plnkr.co/edit/gIC5u6wq6oCYhF5pCJJp?p=preview
This is a max-width example where at least the text truncates, but the column widths are wrong.
http://plnkr.co/edit/e8sj2iqRUpBytMomddCS?p=preview
I've also tried wrapping the email text in a div, setting the width of the td to 100% and then setting the truncation on the inner div (also with width: inherit) but that didn't work either.

Add a class to other columns i.e Checkbox, Staff and Client columns and fix their width by giving appropriate widths.
Below is the HTML and CSS code:
HTML
<!DOCTYPE html>
<html>
<head>
<script data-require="jquery#*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script data-require="bootstrap#3.1.1" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link data-require="bootstrap-css#3.1.1" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<link href="style.css" rel="stylesheet" />
<script src="script.js"></script>
</head>
<body>
<div class="container">
<div class="table-responsive">
<table class="table table-bordered table-hover">
<thead>
<tr>
<th></th>
<th>Email</th>
<th class="text-center">Staff</th>
<th class="text-center">Client</th>
</tr>
</thead>
<tbody>
<tr>
<td class="text-center other-col">
<input type="checkbox">
</td>
<td class="email-col">
example#example.com
</td>
<td class="text-center other-col">
yes
</td>
<td class="text-center other-col">
no
</td>
</tr>
<tr>
<td class="text-center other-col">
<input type="checkbox">
</td>
<td class="email-col">
example#example.com
</td>
<td class="text-center other-col">
yes
</td>
<td class="text-center other-col">
no
</td>
</tr>
<tr>
<td class="text-center other-col">
<input type="checkbox">
</td>
<td class="email-col">
example#example.com
</td>
<td class="text-center other-col">
yes
</td>
<td class="text-center other-col">
no
</td>
</tr>
<tr>
<td class="text-center other-col">
<input type="checkbox">
</td>
<td class="email-col">
example#example.com
</td>
<td class="text-center other-col">
yes
</td>
<td class="text-center other-col">
no
</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
You can find that an additional class other-col is added in the above code.
CSS
/* Styles go here */
.email-col {
/*width: 100%;
min-width: 1px;*/
max-width: 100px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.other-col {
width:10%;
}

Add style for that cell
word-break: break-all;

Any Dijit component is rendered as TextField

Please find my code which intents to develop a Form. Help me in understanding why the CheckBox and NumberSpinner are rendered as TextFields.
I have imported all the required classes and dojo config attribute is configured properly
<%# taglib prefix="c" uri="http://java.sun.com/jstl/core" %>
<%# taglib prefix="fmt" uri=`enter code here`"http://java.sun.com/jstl/fmt" %>
<%#include file="/webclient/admin/jspf/NotificationOperations.jspf" %>
<!-- load dojo and provide config via data attribute -->
<script type="text/javascript" src="/webclient/map/js/dojo/dojo.js" data-dojo-config="parseOnLoad: true"></script>
<script>
require([
"dojo/parser",
"dijit/form/CheckBox",
"dijit/form/NumberSpinner",
"dojo/domReady!"
], function(parser){
parser.parse();
});
</script>
<%#include file="/webclient/common/jspf/jsUtility.jspf" %>
<html>
<head>
<body class="claro">
<style>
#import "/webclient/common/js/dojo/dgrid/css/skins/claro.css";
h2 {
margin: 12px;
}
.heading {
font-weight: bold;
padding-bottom: 0.25em;
}
.ui-widget{
margin: 10px;
}
</style>
<table width="100%" height="100%">
<tr><td>
<div id="DomainMapContainer" >
<tr class="spacer"><td> </td></tr>
<tr><td>
<form id="addProfile" data-dojo-type="dijit/form/Form" data-dojo-props='encType:"multipart/form-data", action:"/prov/createRFC2544TestProfile.do?action=createRFC2544TestProfile", method:"POST", target:"formSubmitIframe"'>
<table>
<tr>
<td><label for="profileName">Profile Name</label></td>
<td>
<input data-dojo-type="dijit/form/TextBox" data-dojo-props='id:"profileName", name:"profileName", required:"true"'/>
</td>
</tr>
<tr>
<td><label for="comments">Comments</label></td>
<td>
<input data-dojo-type="dijit/form/TextArea" data-dojo-props='id:"comments", name:"comments", rows:"5", cols:"40"'/>
</td>
</tr>
<tr>
<td><label for="frameSize">Frame Size</label></td>
<td>
<table>
<tr>
<td><label for="cb_1"><input data-dojo-type="dijit/form/CheckBox" id="cb_1" name="cb_1" value="64" checked/> 64</label></td>
<td><label for="cb_2"><input data-dojo-type="dijit/form/CheckBox" id="cb_2" name="cb_2" value="128"/> 128</label></td>
</table>
</td>
</tr>
</table>
<fieldset>
<legend><label> Throughput Test</label></legend>
<table>
<tr>
<td><label for="tTestDuration">Test Duration</label></td>
<td><input data-dojo-type="dijit/form/NumberSpinner" id="tTestDuration" value="60" data-dojo-props="smallDelta:1, constraints:{min:1,max:600,places:0}" name="tTestDuration"/>(Seconds)</td>
</tr>
<tr>
<td><label for="tTestMinFrameRate">Minimum Frame Rate</label></td>
<td><input data-dojo-type="dijit/form/NumberSpinner" id="tTestMinFrameRate" value="0" data-dojo-props="smallDelta:1, constraints:{min:1,max:10000,places:0}" name="tTestMinFrameRate"/>(Mbps)</td>
</tr>
<tr>
<td><label for="tTestMaxFrameRate">Maximum Frame Rate</label></td>
<td><input data-dojo-type="dijit/form/NumberSpinner" id="tTestMaxFrameRate" value="100" data-dojo-props="smallDelta:1, constraints:{min:1,max:10000,places:0}" name="tTestMaxFrameRate"/>(Mbps)</td>
</tr>
<tr>
<td><label for="tTestStepSize">Step Size</label></td>
<td><input data-dojo-type="dijit/form/NumberSpinner" id="tTestStepSize" value="5" data-dojo-props="smallDelta:1, constraints:{min:1,max:100,places:0}" name="tTestStepSize"/>(Mbps)</td>
</tr>
<tr>
<td><label for="tTestAcceptableLoss">Step Size</label></td>
<td><input data-dojo-type="dijit/form/NumberSpinner" id="tTestAcceptableLoss" value="0" data-dojo-props="smallDelta:0.1, constraints:{min:0,max:10,places:0}" name="tTestAcceptableLoss"/>(%)</td>
</tr>
</table>
</fieldset>
</form>
</td></tr>
</div>
</td></tr>
</table>
</body>
</head>
</html>

I'm seeing a few things here, first of all you're missing a closing </tr> tag when you close the "frame size" table. I suppose that it won't cause errors, but you can never be too sure.
You're also closing your </head> tag at the bottom of the page. You should close it before the <body> starts.
Then the real problem is that your widgets are not working because there are errors while parsing your HTML. The cause of the error is the "comments" text area. The correct module name you should use is dijit/form/Textarea, so the "a" of area should be in lowercase.
Besides that, you should also add the dijit/form/Textarea module to your list of modules (in your require() block).
If you did all that it should work, as you can see in this fiddle: http://jsfiddle.net/9U5AB/