Hi Kindly help me Get the output...I am trying to display the selected items from the CheckedMultiSelect inside a div element..Please help me out in finding the error
<html>
<link rel="stylesheet" href="dijit/themes/claro/claro.css">
<style type="text/css">
#import "dojox/form/resources/CheckedMultiSelect.css";
</style>
<script>dojoConfig = {parseOnLoad: true}</script>
<script src="dojo/dojo.js"></script>
<script>
require(["dojox/form/CheckedMultiSelect"]);
require(["dijit/registry"], function(registry){
var a=registry.byId("multiselect");
dom.byId("textNode2").innerHTML="Found my text box. It has value: [" + a.get('value') + "] and its primary DOM node tag name is: [" + dNode.tagName + "]";
});
</script>
<body class="claro">
<select multiple="true" data-dojo-type="dojox.form.CheckedMultiSelect" id="multiselect" name="multiselect" >
<option value="TN">Tennessee</option>
<option value="VA" selected="selected">Virginia</option>
<option value="WA">Washington</option>
<option value="FL">Florida</option>
<option value="CA">California</option>
</select>
<div id="textNode2" style="background-color: lightgray"></div>
</body>
</html>
The problem in the code you supplied is that in the statement that reads:
dom.byId("textNode2").innerHTML="Found my text box. It has value: [" + a.get('value') + "] and its primary DOM node tag name is: [" + dNode.tagName + "]";
});
You are making reference to a variable called dom which is not defined. In addition, you are referring to a variable called dNode which is not declared.
Since the script is running in the head section, it is also possible that the DOM is simply not ready at the time that the script is executed.
I coded up the following and it worked:
<script>
require(["dijit/registry", "dojo/dom", "dojo/parser", "dojox/form/CheckedMultiSelect", "dojo/domReady!"], function(registry, dom, parser){
parser.parse();
var a=registry.byId("multiselect");
dom.byId("textNode2").innerHTML="Found my text box. It has value: [" + a.get('value') + "]";
});
</script>
Related
Maybe someone has faced such a problem. To make the select2 widget work, I use the following code:
<link href="https://www.malketiya.com/listgrid/DropDown.css" rel="stylesheet" />
<script src="https://www.malketiya.com/listgrid/DropDown.js"> </script>
<select class="js-example-basic-single" name="state" id="selectBox0" onchange="changeFunc0();">
<option value="Alabama">Alabama</option>
<option value="Wyoming">Wyoming</option>
</select>
<script>
var selectedValue1;
var selectedValue0;
$(document).ready(function() {
$('.js-example-basic-single').select2({tags: true});
});
</script>
I can write my own tag dynamically because tags: true.
For example, I write "fff". How can I save this in a variable use OnInputEvent without click on "fff" option in the drop menu?
I will be grateful for any help.
You need make id for
<input class="select2-search__field" id="s2sf" type="search".../>
and then
$(document).on('keyup', '.select2-search__field', function (e) {
var x = document.getElementById("s2sf").value; alert(x);
});
Read what some have posted and using w3schools.com as a reference. Here is what I have, I am dynamically creating html code in javascript and calling the html id and inserting the dynamic code via the .innerHTML property. I have the right links and script references (in my HTML).
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
My JavaScript (.js file)
var htmlHeader = '<div class="dropdown">' +
'<th class="header">Notifies Details</th>' +
'<th class="header" style="font-weight:bold; font-size:18px; text-align:right;">' +
'<span class="glyphicon glyphicon-filter dropdown-toggle" data-toggle="dropdown"></span>' +
'×</th>' +
'<ul class="dropdown-menu">' +
'<li>Due Date</li>' +
'<li>RSU</li>' +
'</ul>' +
'</div>';
document.getElementById("notifyDetailstheadId").innerHTML = htmlHeader;
document.getElementById("notifyDetailstbodyId").innerHTML = htmlTable;
Ultimately this is in the header of a table with a title (Notifies Details) on the left and a filter icon and the 'X' on the right side. When the filter icon is clicked I want the menu to show.
I also tried adding this JavaScript to get it to trigger to no avail
console.log("triggerDropDown() ran");
$(document).ready(function() {
$(".dropdown-toggle").dropdown();
});
I have page with products catalogue and need to assign link to every products using it's name (innerHTML). The page looks like:
<!DOCTYPE html>
<html>
<head>
<script>
function searchlinks() {
var catbox=document.getElementById("category-box");
var boxcont=catbox.getElementsByTagName("a");
var h3href=catbox.getElementsByTagName("h3");
var www0="../search/" + h3href[0].innerHTML + "+" + boxcont[0].innerHTML;
var www1="../search/" + h3href[0].innerHTML + "+" + boxcont[1].innerHTML;
var www2="../search/" + h3href[0].innerHTML + "+" + boxcont[2].innerHTML;
var www3="../search/" + h3href[0].innerHTML + "+" + boxcont[3].innerHTML;
boxcont[0].href=www0;
boxcont[1].href=www1;
boxcont[2].href=www2;
boxcont[3].href=www3;
}
</script>
</head>
<body onload="searchlinks()">
<div id="category-box"><div class="category-block"><div class="category-blockimage"><img src="" alt="" ></div><div class="category-blockcontent">
<h3>Clothing</h3>
Men's
Women's
Boys'
Girls'
</div></div></div>
<div id="category-box"><div class="category-block"><div class="category-blockimage"><img src="" alt="" ></div><div class="category-blockcontent">
<h3>Protective Gear</h3>
Chin Straps
Facemasks
Flak Jackets
Girdles
Hand Pads
Arm Pads
Helmets
Hip Pads
</div></div></div>
</body>
</html>
But I have faced with a lot of problems. Here are my questions:
1) How to assign links dynamically? (without using var = www0 , www1 ...)
2) Function searchlinks() affects only on the first "category-block" div. How to use this function for all such divs on the page?
Here is my jsfiddle: http://jsfiddle.net/RGe8U/1/
Here is the fixed script and html. I have given different ids for two different divs, as ids should be unique then search them individually and call addLink function for both of them.
<html>
<head>
<script>
function addLink(catbox) {
var boxcont=catbox.getElementsByTagName("a");
var h3href=catbox.getElementsByTagName("h3");
//alert(h3href[0].innerHTML);
for (var i=0; i<boxcont.length; i++) {
boxcont[i].href="../search/" + h3href[0].innerHTML + "+" + boxcont[i].innerHTML;
}
}
function searchlinks() {
addLink (document.getElementById("category-box"));
addLink (document.getElementById("category-box2"));
}
</script>
</head>
<body onload="searchlinks()">
<div id="category-box"><div class="category-block"><div class="category-blockimage"><img src="" alt="" ></div><div class="category-blockcontent">
<h3>Clothing</h3>
Men's
Women's
Boys'
Girls'
</div></div></div>
<div id="category-box2"><div class="category-block"><div class="category-blockimage"><img src="" alt="" ></div><div class="category-blockcontent">
<h3>ProtectiveGear</h3>
Chin Straps
Facemasks
Flak Jackets
Girdles
Hand Pads
Arm Pads
Helmets
Hip Pads
</div></div></div>
</body>
</html>
Edit: If you do not want to change the div ids then use this script:
<script>
function addLink(catbox) {
var boxcont=catbox.getElementsByTagName("a");
var h3href=catbox.getElementsByTagName("h3");
alert(h3href[0].innerHTML);
for (var i=0; i<boxcont.length; i++) {
boxcont[i].href="../search/" + h3href[0].innerHTML + "+" + boxcont[i].innerHTML;
}
}
function searchlinks() {
var divs = document.getElementsByTagName("div");
for (var i=0; i<divs.length; i++) {
if (divs[i].id === "category-box")
addLink (divs[i]);
}
}
</script>
I have a the following static div:
<body>
<div id="parent">
</div>
</body>
<script>
dom.byId('parent').innerHTML +="<input type='submit' data-dojo-type='dijit/form/Button' onClick='test(this)' id='edit"+1+"' label='Edit' />";
dom.byId('parent').innerHTML +="<input type='submit' data-dojo-type='dijit/form/Button' onClick='test(this)' id='edit"+2+"' label='Edit' />";
</script>
TWo button's are created but they looks like normal HTML not DOJO.
The shortest possible answer is dojo/parser::parse(domNode):
var parent1 = dom.byId("parent1");
parent1.innerHTML += '<input type="submit" data-dojo-type="dijit/form/Button" onClick="test(this)" id="edit1" label="Edit 1">';
parent1.innerHTML += '<input type="submit" data-dojo-type="dijit/form/Button" onClick="test(this)" id="edit2" label="Edit 2">';
parser.parse(parent1);
Even though I cannot recommend that. Do not use innerHTML, it belongs to the world of IE6. Create dijits programmatically instead:
var parent2 = dom.byId("parent2");
var button3 = new Button({ label: "Button 3" });
button3.startup();
button3.placeAt(parent2);
button3.on("click", test);
var button4 = new Button({ label:"Button 4"});
button4.startup();
button4.placeAt(parent2);
button4.on("click", function(event) {
test(this); // `this` points to the button
});
See it in action: http://jsfiddle.net/phusick/9JCAj/
Hi I am using the connect to setup the onChange event but it is not firing - no errors being generated and I am at a loss as to what the problem is.
<select name='value(serviceRefId)' dojoType='dijit.form.FilteringSelect' id='serviceRefId'>
<option value='0'></option>
<option value='10109'>General Surgery</option>
<option value='10108'>Internal Medicine</option>
<option value='10111'>Laboratory</option>
<option value='10113'>Other</option>
<option value='10112'>Paediatrics</option>
<option value='10110'>Radiology</option>
</select>
<script type="text/javascript">
dojo.addOnLoad(function(){
dojo.connect(dojo.byId("serviceRefId"), 'onChange', function(event){
alert('ok ' + event);
});
});
</script>
There is no onChange on the DOM element, which will fire. Instead there is an event in the form dijit (widget) which has that name - but you'd need to use dijit.byId to get that component.
Try this
<script type="text/javascript">
dojo.addOnLoad(function(){
// dojo.byId returns a DOMNode, not a dijit instance, replace dojo with dijit
dojo.connect(dijit.byId("serviceRefId"), 'onChange', function(event){
alert('ok ' + event);
});
});
</script>