Ok so I want to do something simple in JavaScript, but I am getting an eror.
I want to dynamically create a div and then add another div plus a select control to it. But see the line I've marked with the error. When I include that line, I get the indicated error. What am I doing wrong? (I've simplified the code in the
myDiv = BuildContainerDiv();
myLabel = BuildLabel();
myDropdown = BuildDropdown();
myDiv.appendChild(myLabel); //Works fine.
myDiv.appendChild(myDropdown); // ERROR: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'
BuildContainerDiv: function () {
div = document.createElement('div');
div.id = "MyDiv";
div.name = "MyDiv";
div.style.padding = "10px";
div.style.float = "left";
return div;
},
BuildLabel: function () {
var lab = document.createElement('div');
lab.id = "mylabel";
lab.name = "mylabel";
lab.innerHTML = "Some text:";
return lab;
},
BuildDropdown: function () {
var select = document.createElement('select');
select.id = "myselect";
select.name = "myselect";
var option1 = document.createElement("option");
option1.value = "0";
option1.innerHTML = "(none)";
select.appendChild(option1);
//.....
var option5 = document.createElement("option");
option5.value = "0";
option5.innerHTML = "all";
select.appendChild(option5);
return select;
},
Silly error on my part. In my original post, I noted a function I was using called BuildDropdown. The problem was that I had another function with the same name in another part of the file, and it did not return a Node but plain html:
BuildDropdown: function () {
var ctl= '<select name="MyDropDown" id="MyDropDown">';
//...
return ctl+ '</select >';
},
This function was an earlier attempt and I forgot to delete it, and this older method was somehow being called. Since it was in fact not returning a node, the error was accurate. Apologies for your time wasted.
Related
I'm trying to use javascript to retrieve the data from row.insertCell(0) unfortunately I don't believe I am setting up my this statement correctly so I am getting nothing back. I would appreciate some advice on this.
var cardTable = document.getElementById("cardBody");
card.forEach(item => {
let row = cardTable.insertRow();
let refNum = row.insertCell(0);
refNum.innerHTML = item.G1_Card_Ref;
let select = row.insertCell(1);
var sBtn = document.createElement('input');
sBtn.type = "button";
sBtn.className = "btn";
sBtn.style.color = "blue";
sBtn.setAttribute('onclick', 'editCard('this')');
sBtn.value = "Select";
select.appendChild(sBtn);
This is a temporary function I created to look at the data coming back from the table.
function editCard(CardRefNo) {
document.getElementById("ecForm").style.display = "block";
}
Try setting the onclick listener like this
sBtn.onclick = function() {
// do stuff with sBtn here, this is the new editCard function
console.log(sBtn)
document.getElementById("ecForm").style.display = "block";
}
Need to send dynamic (not hardcode) data to a select element.
This code works great in one of my sheets but doesn't work in the other sheet.
The "select" element doesn't get updated with the options I send..
I don't get an error message either.
I've spent a lot of time twitching it and trying to find why but still don't see what's wrong.
p.s. I used a dummy object to send the data for testing purpose.
The html (used MaterializeCss framework)
<select class="icons browser-default" id="selName" onChange ="getNameText();">
<option value="" disabled selected>Choose week</option>
<div id = "err"></div>
//select element initialization in framework
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('select');
var options = handlers()
var instances = M.FormSelect.init(elems);
});
function handlers() {
var success = google.script.run.withSuccessHandler(addOptions).getNamesForDropdown()
var failure = google.script.run.withFailureHandler(showError).getNamesForDropdown()
return;
}
function addOptions(names) {
var selectTag = document.getElementById("selName") //select tag
for (var k in names) {
var thisID = k;
var thisText = names[k];
var option = document.createElement("option"); //creating option
option.text = thisText
option.value = thisID;
selectTag.add(option);
}
}
function showError() {
var err = document.getElementById("err").innerHTML = "There was an error."
}
//get the text of selected option
function getNameText() {
var sel = document.getElementById("selName")
var nameText = sel.options[sel.selectedIndex].text;
return nameText;
}
Dummy object I send:
function getNamesForDropdown() {
var namesObj = {
one: "blah",
two: "blahblah"
}
return namesObj;
}
Here's the result what I get (on the screen you there's only hardcoded option):
I handled it. I added a class "browser-default" to the select and the options got updated. This class comes from MaterializeCss Framework.
http://jsfiddle.net/738wtmhs/1/
using above example in fiddle in my own project: for the purpose of this exercise I am using DOM methods to create and append the elements.
function GetFeatureProperties(feature) {
//add header to 1st FirstTabContent
var featureHeader = "<center><b> <FONT COLOR='FF6600'> Feature Properties </FONT> </b> </center> </br>";
var FirstTabContent = document.createElement('div');
FirstTabContent.id = "tabs-1";
FirstTabContent.innerHTML = featureHeader;
//Second Tab
var SecondTabContent = document.createElement('div');
SecondTabContent.id = "tabs-2";
var newImage = document.createElement("img");
newImage.src = "http://mintywhite.com/wp-content/uploads/2012/10/fond-ecran-wallpaper-image-arriere-plan-hd-29-HD.jpg";
newImage.width = "100";
newImage.height = "100";
SecondTabContent.appendChild(newImage);
//add li and ul
var DivHolding2Tabs = document.createElement('div');
DivHolding2Tabs.class = "shoptab";
var header2 = document.createElement('h2');
header2.innerHTML = "Feature";
DivHolding2Tabs.appendChild(header2);
var _ul = document.createElement('ul');
var _anchor1 = document.createElement("a");
_anchor1.href = "#tabs-1";
_anchor1.innerHTML = "Info";
var _li1 = document.createElement('li');
_li1.appendChild(_anchor1);
var _anchor2 = document.createElement("a");
_anchor2.href = "#tabs-2";
_anchor2.innerHTML = "Images";
var _li2 = document.createElement('li');
_li2.appendChild(_anchor2);
_ul.appendChild(_li1);
_ul.appendChild(_li2);
DivHolding2Tabs.appendChild(_ul);
DivHolding2Tabs.appendChild(FirstTabContent);
DivHolding2Tabs.appendChild(SecondTabContent);
var jelm = $(DivHolding2Tabs); //convert to jQuery Element
var htmlElm = jelm[0]; //convert to HTML Element
var OuterDiv = document.createElement('div');
OuterDiv.id = "loc-list";
OuterDiv.appendChild(htmlElm);
return OuterDiv.innerHTML;
}
and this looks like the image seen below....if I click on the link 'image' the page jumps a bit but nothing happens and nothing happens when I press 'info' also I have included the CSS in my project so why arnt the tabs showing and yes I am using jquery ui 1.10.3.custom.js
---------------------------------------------------------------------------------------------
UPDATE
<ul id="list"><li><div><h2>Feature</h2><ul><li>Info</li><li>Images</li></ul><div id="tabs-1"><center><b> <font color="FF6600"> Feature Properties </font> </b> </center> <br></div><div id="tabs-2"><img src="http://mintywhite.com/wp-content/uploads/2012/10/fond-ecran-wallpaper-image-arriere-plan-hd-29-HD.jpg" width="100" height="100"></div></div></li></ul>
Also changed from jquery 1.10.3 custom to jquery 1.11.2.custom with all the downloaded tabs selected
If you look at this fiddle, I managed to make it work.
Here's the possible problems
1) I changed return OuterDiv.innerHTML because I needed the <div id="loc-list"> to be part of the code to initialize it. You gave it an id so my guess is you wanted it to be included but by doing innerHTML, you didn't get it.
2) Once your function returns, you need to initialize the tabs with $('#loc-list').tabs();
I am trying to add a checklist control to my checklistbox using Jquery/Javascript.
I am using this code:
function AddToClients(textValue, valueValue) {
var tableRef = document.getElementById('<%= chkEmailClients.ClientID %>');
var tableRow = tableRef.insertRow();
var tableCell = tableRow.insertCell();
var checkBoxRef = document.createElement('input');
var labelRef = document.createElement('label');
checkBoxRef.type = 'checkbox';
labelRef.innerHTML = textValue;
checkBoxRef.value = valueValue;
tableCell.appendChild(checkBoxRef);
tableCell.appendChild(labelRef);
}
If there is already an item in the checklistbox ontrol it works OK.
If there are no existing items I get this error:
Uncaught TypeError: Cannot call method 'insertRow' of null
Any ideas why?
I'm writing a simple web page that displays a table. It the right column of the table I want to add a button in every row that says 'View'. I wrote a function that does this in ie by creating a button object and setting value = 'view' but in firefox and chrome the button displays with no text. Does anyone know why? Here is my code:
function addRow(id, sender, message){
var theTable = document.getElementById('messageTable');
var lastRow = theTable.rows.length;
var newRow = theTable.insertRow(lastRow);
newRow.id = id;
var cellLeft = newRow.insertCell(0);
var textNode = document.createTextNode(id);
cellLeft.appendChild(textNode);
var secondCell = newRow.insertCell(1);
var textNode2 = document.createTextNode(sender);
secondCell.appendChild(textNode2);
var messageCell = newRow.insertCell(2);
var messageNode = document.createTextNode(message);
messageCell.appendChild(messageNode);
var viewCell = newRow.insertCell(3);
var viewNode = document.createElement('button');
viewNode.value = 'View';
viewNode.onclick = function(){
alert('clicked: ' + id);
};
viewCell.appendChild(viewNode);
}
You have to do viewNode.innerHTML = 'View' since in FF button displays whatever is wrapped by the tag but not the value attribute
<button>s aren't self-closing like <input>s, and don't have a value attribute. You already have the solution in other parts of your code:
viewNode.appendChild(document.createTextNode('View'));
You also don't need to create variables for nodes that you're only using once. You can consolidate your code in a few places by using the above style.