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();
});
Related
I am trying to input a number on an IE element (input) from Excel VBA.
I am not a HTML developer, but there are some frame codes that might influence my problem.
This is what I have in VBA:
IE.Navigate "http://thisandthat/herewego.asp"
IE.Document.getElementsbyId("txt_cod_re_rh").Value = "aaaa"
Nothing happens.
I also tried to get the element ID or test if VBA could see it, but it looks like VBA cannot find it on the page (tried ID and class):
Set element = Document.getElementByclass("select_st")
ThisWorkbook.Sheets(1).Range("b1").Value = element
This is my HTML:
<SCRIPT LANGUAGE="VBS">
smthing
</SCRIPT>
<HTML>
<HEAD>
<link href="../css/standard.css" rel="stylesheet" type="text/css">
<script language="JavaScript" src="include/scripts.js"></script>
<script language="JavaScript">
function exibeRelatorierer(server) {
d = window.document.frmFilter;
var cod_VP = d.cbo_VP;
var cod_periodo = d.cbo_Periodoerer;
var cod_re_rh = d.txt_cod_re_rh;
if (cod_re_rh.value == '') {
cod_re_rh.value = "0";
}
if (cod_periodo.value == -1) {
alert("Select smthing.");
}else{
if (d.TC[0].checked) {
parent.frames['frmMain'].location = servidor234234 + "RPT_CPR01884_TS" + "&rc:Area=Toolbar&rc:LinkTarget=frmMain&rc:JavaScript=True&rs:ClearSession=true&rc:Parameters=false" + "&COD_VP=" + cod_VP.value + "&COD_PERIODO=" + cod_periodo.value + "&COD_RE_RH=" + cod_re_rh.value
} else {
parent.frames['frmMain'].location = servidor234234 + "RPT_CPR01884_CP" + "&rc:Area=Toolbar&rc:LinkTarget=frmMain&rc:JavaScript=True&rs:ClearSession=true&rc:Parameters=false" + "&COD_VP=" + cod_VP.value + "&COD_PERIODO=" + cod_periodo.value + "&COD_RE_RH=" + cod_re_rh.value
}
I believe this code above is messing me up trying to insert value to the txt_cod_re_rh.
I read something about a frame? Is this element on another frame? (No idea, really.)
This is the code where the input box is:
<form id="Form1" name="frmFiltro">
<table border="0" width="100%" cellpadding="0" cellspacing="0">
<tr class="table_bhoras1" height="50" align="center">
<td>Extração</td>
</tr>
</table>
<table id="Table3" cellSpacing="0" cellPadding="0" width="100%" border="0" class="titsemlink2">
<TR class="titsemlink2">
<td>
Inform number:
</td>
<td>
<input class="select_st" type="text" name="txt_cod_re_rh" id="txt_cod_re_rh" value="" />
</td>
</TR>
You have typos in your code. The methods .getElementsbyId or getElementByclass do not exist within the InternetExplorer document object in VBA.
You can try this via element id:
Set element = IE.Document.getElementById("txt_cod_re_rh")
element.value = "aaaa"
Or via classname:
Set element = IE.Document.getElementsByClassName("select_st")(0)
element.value = "aaaa"
Withou the full html is difficult to tell if it is inside an iframe or not.
I am using datatable and has to add render different html based on few checks and that's why vue code has lots of jQuery events. I was wondering is there any way to assign event on dynamic html elements.
Inside Data table columns object
render:function(data, type, full, meta) {
let html = '<div class="catagory-checkbox">'
+ '<label>'
+ '<input id="' + data.LeadTrackingId + '" class="statusDetail" type="checkbox" />'
+ '<span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span>'
+ '</label>'
+ '</div>';
if(vm.isSuperAdmin)
return html;
return "";
}
Please don't do this. You're constructing html with string methods. This is not the way, and there's no need. Use template:, not render: :-)
Your code above should look like...
template : `
<div v-if"isSuperAdmin" class="catagory-checkbox">'
<label>
<input :id="LeadTrackingId" class="statusDetail" type="checkbox" />'
<span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span>
</label>
</div>
`
You can bind id like that, but do you need to? Good Vue code doesn't need ids on html elements.
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>
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>
Idea:
After dynamic content is loaded, on mouseover I'm trying to render google share button like it says on the official google developer's site.
Code I'm using is:
gapi.plus.render(div);
Facts:
If I change plus to plusone, it renders google plus button instead share. ( Means: Scripts load up )
If I remove {"parsetags": "explicit"}, Buttons load up ( But doesn't load up on hover )
Problem:
Share button doesn't load up.
Debuging links with plus.render and plusone.render:
http://romanlosev.igloro.info/googleshare.php?load=plusone ( plusone - works, but plus+ buttons load up )
http://romanlosev.igloro.info/googleshare.php?load=plus ( plus - doesn't works )
There's a similar question on StackOverflow here.
What you need to do is call the explicit render method for the share buttons. Replacing your function that selects the div with the following code will delay render for the share objects on screen.
$("#clickme").click(function()
{
gapi.plus.go();
});
To render individual buttons, you must pass an object with the action parameter set to share, for example:
gapi.plus.render("plusOne", {action: "share"});
The following is a more complete example, that does asynchronous script loading and renders various share targets, visible here:
<html>
<body>
<p>
<div data-action="share" class="g-plus" id="plusOne"></div>
<button onClick="gapi.plus.render('plusOne', getParamBag('https://www.google.com'))"></button>
</p>
<p>
<div data-action="share" class="g-plus" id="plusTwo"></div>
<button onClick="gapi.plus.render('plusTwo', getParamBag('https://plus.google.com'))"> </button>
</p>
<p>
<div data-action="share" class="g-plus" id="plusThree"></div>
<button onClick="gapi.plus.render('plusThree', getParamBag('https://developers.google.com'))"></button>
</p>
</body>
<script type="text/javascript">
window.___gcfg = {
lang: 'en-US',
parsetags: 'explicit'
};
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
function getParamBag(url){
return {
action: "share",
href: url
};
}
</script>
</html>