I'm trying to generated multiple div dynamically but adding a ng-click attribute doesn't work.
Here's my code
var div = document.createElement('DIV');
div.className = 'container-car';
var child_div = document.createElement('DIV');
child_div.className = 'carre-car';
child_div.setAttribute("ng-click", "$scope.testCharacter(" + JSON.stringify(unicode) + ")");
var child_paragraphe = document.createElement('P');
var child_text = document.createTextNode($scope.unicode_from_int(unicode['unicode']));
child_paragraphe.appendChild(child_text);
child_div.appendChild(child_paragraphe);
div.appendChild(child_div);
var paragraphe = document.createElement('P');
var text = document.createTextNode(unicode['pinyin']);
paragraphe.appendChild(text);
div.appendChild(paragraphe);
document.getElementById('container-biblio').appendChild(div);
I tried another way like shown in this post but it doesn't seems to work.
Try this:
var div = document.createElement('DIV');
div.className = 'container-car';
var child_div = document.createElement('DIV');
child_div.className = 'carre-car';
child_div.setAttribute("ng-click", "testCharacter(" + JSON.stringify(unicode) + ")");
var child_paragraphe = document.createElement('P');
var child_text = document.createTextNode($scope.unicode_from_int(unicode['unicode']));
child_paragraphe.appendChild(child_text);
child_div.appendChild(child_paragraphe);
$compile(child_div)($scope);
div.appendChild(child_div);
var paragraphe = document.createElement('P');
var text = document.createTextNode(unicode['pinyin']);
paragraphe.appendChild(text);
div.appendChild(paragraphe);
document.getElementById('container-biblio').appendChild(div);
You don't need to use $scope in your case and you forgot to $compile(child_div)($scope); to let angular interpret your angularjs specific attributes.
Related
I'm trying to code a dynamically created select box within a dynamically created div that are both created on load of the page. My attempts to add an onchange Event Listener to the select box only trigger when the page is loaded, how do I go about fixing this? I'm new to both html and JavaScript so my code is intentionally basic. Here is my code:
function createDiv()
{
var div = document.createElement('div');
div.className = 'main-div';
div.id = 'mainDiv';
div.setAttribute('title', 'Main Div');
var divText = document.createTextNode("Select a Number ");
div.appendChild(divText);
var select = document.createElement('select')
select.options[0] = new Option("1");
select.options[1] = new Option("2");
select.options[2] = new Option("3");
select.options[3] = new Option("4");
select.options[4] = new Option("5");
select.options[5] = new Option("6");
select.options[6] = new Option("7");
select.options[7] = new Option("8");
select.options[8] = new Option("9");
select.options[9] = new Option("10");
//select.addEventListener("change", alert("changed!"));
div.appendChild(select);
document.body.appendChild(div);
console.log(div);
}
<body onload = createDiv()>
<h1 id = "heading1">Test</h1>
<br>
<script src="js/main.js"></script>
</body>
The method addEventListener need a function in second parameter, and you didn't pass a function but the result of the alert() function (that is void).
Change: alert("changed!") to
function() {alert("changed!")}
(that can be shortened by () => alert("changed!") since ES6):
function createDiv() {
var div = document.createElement('div');
div.className = 'main-div';
div.id = 'mainDiv';
div.setAttribute('title', 'Main Div');
var divText = document.createTextNode("Select a Number ");
div.appendChild(divText);
var select = document.createElement('select')
for (var i = 1; i <= 10; i++) {
select.options[i] = new Option(i);
}
select.addEventListener("change", function() {alert("changed to "+select.value)});
div.appendChild(select);
document.body.appendChild(div);
}
<body onload = createDiv()>
<h1 id = "heading1">Test</h1>
</body>
I got a working function, but i think it should become a lot smaller and better but i aint seeing it. can someone help me improve this function make it better:
I am making a new li-item in a unordered list. in there there is omse info in 3 divisions who get a class making them float left to eachother.
this is the code i used, its all listed out, it can probly be make a lot better, and i hope to learn to refactor my code more, so help is apriciated.
// making new li item inn <ul>
function addproduction(){
// getting info from form
var startdatum_form = document.getElementById('startdatum').value;
var uren_form = document.getElementById('uren').value;
var ordernummer_form = document.getElementById('ordernummer').value;
// new li element
var newli = document.createElement('li');
newli.setAttribute('class', 'ui-state-default');
var div1 = document.createElement('div');
div1.setAttribute('class', 'div1');
var sortableicon = document.createElement('span');
sortableicon.setAttribute('class', 'ui-icon ui-icon-arrowthick-2-n-s');
// count current li elements in UL:
var number = 0;
var ullist = document.getElementById('sortable');
for(i=0;i< ullist.childNodes.length;i++){
if(ullist.childNodes[i].nodeName=='LI'){
number++;
}
}
newli.setAttribute('id', 'p'+(number+1));
// text node (item x)
var nrText = document.createTextNode('Item ' + (number+1));
div1.appendChild(sortableicon)
div1.appendChild(nrText);
var div2 = document.createElement('div');
div2.setAttribute('class', 'div1');
var indiv1 = document.createElement('div');
indiv1.appendChild(document.createTextNode('Title'));
var indiv2 = document.createElement('div');
indiv2.appendChild(document.createTextNode('Start'));
var indiv3 = document.createElement('div');
indiv3.appendChild(document.createTextNode('End'));
var indiv4 = document.createElement('div');
indiv4.appendChild(document.createTextNode('Uren'));
div2.appendChild(indiv1);
div2.appendChild(indiv2);
div2.appendChild(indiv3);
div2.appendChild(indiv4);
var div3 = document.createElement('div');
div3.setAttribute('class', 'div3');
var indiv5 = document.createElement('div');
indiv5.appendChild(document.createTextNode(ordernummer_form));
var indiv6 = document.createElement('div');
indiv6.appendChild(document.createTextNode(startdatum_form));
var indiv7 = document.createElement('div');
indiv7.appendChild(document.createTextNode('end'));
var indiv8 = document.createElement('div');
indiv8.appendChild(document.createTextNode(uren_form));
div3.appendChild(indiv5);
div3.appendChild(indiv6);
div3.appendChild(indiv7);
div3.appendChild(indiv8);
newli.appendChild(div1);
newli.appendChild(div2);
newli.appendChild(div3);
// add new production to list
document.getElementById('sortable').appendChild(newli);
saveNewEntry( (number+1), ordernummer_form, startdatum_form, uren_form );
}
A small example which could be applied to other parts of your code as well
var startdatum_form = document.getElementById('startdatum').value;
var uren_form = document.getElementById('uren').value;
var ordernummer_form = document.getElementById('ordernummer').value;
could be
var startdatum_form = get_value('startdatum');
var uren_form = get_value('uren');
var ordernummer_form = get_value('ordernummer');
function get_value( field ) {
return document.getElementById(field).value;
}
here is my code it return 0 when i call result variable i want to add elements in html without DOM, means i want to re-create this whole html in JS using this code.
var div = document.createElement("div");
div.setAttribute("id", "old");
var newDiv = document.createElement("div");
newDiv.setAttribute("id", "new");
var p = document.createElement("p");
p.setAttribute("id", "paragraph")
var domDiv = document.getElementById("old");
var domNewDiv = document.getElementById("new");
var domP = document.getElementById("paragraph");
var result = domDiv + domNewDiv + domP;
result;
Code in console
document.getElementById returns a Javascript Object. You cannot simply concatenate objects. But you can concatenate the html content of those objects for example:
var result = domDiv.innerHTML + domNewDiv.innerHTML + domP.innerHTML;
I have created an application where elements from the toolbox can be dragged and dropped onto a canvas and their properties can be set as soon as they are dropped. But, I have an instance where when the "stream ui-draggable" element is dropped on the canvas I disable the canvas and the toolbox and display a properties panel where the user can select a predefined stream for the newly dropped element and also give it another name under the "as : " text field. This name should then replace the currently displayed- disabled name "Element" with the name provided bu the user. Is there a way that I can replace this text in the dropped element.
js function:
drop: function (e, ui) {
var dropElem = ui.draggable.attr('class');
droppedElement = ui.helper.clone();
ui.helper.remove();
$(droppedElement).removeAttr("class");
jsPlumb.repaint(ui.helper);
if(dropElem=="stream ui-draggable")
{
var newAgent = $('<div>').attr('id', i).addClass('streamdrop');
//alert("newAgent ID: "+newAgent.attr('id'));
clickedId = newAgent.attr("id");
alert("clicked ID: "+i);
createStreamForm();
$("#container").addClass("disabledbutton");
$("#toolbox").addClass("disabledbutton");
$(droppedElement).draggable({containment: "container"});
var prop = $('<a class="streamproperty" onclick="doclick(this)"><b><img src="../Images/settings.png"></b></a> ').attr('id', (i));
var finalElement= newAgent.text("Element").append('<a class="boxclose" id="boxclose"><b><img src="../Images/Cancel.png"></b></a> ').append(prop);
//Increment the Element sequence number
i++; r++; q++;
var l = ($(finalElement).attr('id'));
alert("Final elm id: "+finalElement.attr('id'));
var connection = $('<div>').attr('id', l + '-' + q).addClass('connection');
finalElement.css({
'top': e.pageY,
'left': e.pageX
});
finalElement.append(connection);
$('#container').append(finalElement);
jsPlumb.draggable(finalElement, {
containment: 'parent'
});
jsPlumb.makeTarget(connection, {
anchor: 'Continuous'
});
jsPlumb.makeSource(connection, {
anchor: 'Continuous'
});
}
The createStreamForm() function:
var importDiv, iStreamtype, br, istreamlbl, istreamtypelbl, iPredefStreamdiv, istreamDefLineDiv, istreamDefDivx, istreamName, importbtn;
var exportDiv,eStreamtype, estreamlbl, estreamtypelbl, ePredefStreamdiv, estreamDefLineDiv, estreamDefDivx, estreamName, exportbtn;
var streamDiv, streambtn;
var definestreamdiv,inputval;
function createStreamForm()
{
$(".toolbox-titlex").show();
$(".panel").show();
//For the Import Form
importDiv = document.createElement("div");
iStreamtype = document.createElement("div");
br = document.createElement("br");
istreamlbl = document.createElement("label");
istreamtypelbl = document.createElement("label");
iPredefStreamdiv = document.createElement("div");
istreamDefLineDiv = document.createElement("div");
istreamDefDivx = document.createElement("div");
istreamName = document.createElement("input");
importbtn = document.createElement("button");
importDiv.className = "importdiv";
importDiv.id = "importdiv";
istreamlbl.className = "lblfloat-left";
br.className = "br-div";
istreamlbl.innerHTML = "Stream:";
iPredefStreamdiv.id = "PredefinedStream1";
istreamDefDivx.className = "streamDefDiv";
istreamDefDivx.id = "streamDefLineDiv";
istreamName.className = "panel-input-streamName";
istreamName.id = "istreamName";
istreamName.placeholder = "as : ";
importbtn.type = 'button';
importbtn.innerHTML = "Import";
importbtn.className = "btn-import";
importbtn.setAttribute("onclick","storeImportStreamInfo()");
importDiv.appendChild(iStreamtype);
importDiv.appendChild(istreamlbl);
importDiv.appendChild(istreamtypelbl);
importDiv.appendChild(iPredefStreamdiv);
importDiv.appendChild(br);
importDiv.appendChild(istreamDefLineDiv);
importDiv.appendChild(istreamDefDivx);
importDiv.appendChild(br);
importDiv.appendChild(istreamName);
importDiv.appendChild(br);
importDiv.appendChild(importbtn);
importDiv.appendChild(br);
//For the Export Form
exportDiv = document.createElement("div");
eStreamtype = document.createElement("div");
br = document.createElement("br");
estreamlbl = document.createElement("label");
estreamtypelbl = document.createElement("label");
ePredefStreamdiv = document.createElement("div");
estreamDefLineDiv = document.createElement("div");
estreamDefDivx = document.createElement("div");
estreamName = document.createElement("input");
exportbtn = document.createElement("button");
exportDiv.className = "exportdiv";
exportDiv.id = "exportdiv";
estreamlbl.className = "lblfloat-left";
estreamlbl.innerHTML = "Stream:";
ePredefStreamdiv.id = "PredefinedStream2";
estreamDefDivx.className = "streamDefDiv";
estreamDefDivx.id = "streamDefLineDiv";
estreamName.className = "panel-input-streamName";
estreamName.id = "panel-input-streamName";
estreamName.placeholder = "as : ";
exportbtn.type = 'button';
exportbtn.innerHTML = "Export";
exportbtn.className = "btn-export";
exportDiv.appendChild(estreamlbl);
exportDiv.appendChild(estreamtypelbl);
exportDiv.appendChild(ePredefStreamdiv);
exportDiv.appendChild(br);
exportDiv.appendChild(estreamDefLineDiv);
exportDiv.appendChild(estreamDefDivx);
exportDiv.appendChild(br);
exportDiv.appendChild(estreamName);
exportDiv.appendChild(br);
exportDiv.appendChild(exportbtn);
exportDiv.appendChild(br);
//For the Stream Form
streamDiv = document.createElement("div");
streambtn = document.createElement("button");
definestreamdiv = document.createElement("div");
inputval = document.createElement("div");
streambtn.type = 'button';
streamDiv.className = "streamdiv";
streamDiv.id = "streamdiv";
streambtn.innerHTML = "Define Stream";
streambtn.className = "btn-define-stream";
streambtn.setAttribute("onclick","createattribute()");
//inputval.innerHTML = "Provide a Stream name and click to add attribute-type pairs to yours stream.";
streamDiv.appendChild(streambtn);
definestreamdiv.appendChild(inputval);
lot.appendChild(importDiv);
createattr();
lot.appendChild(exportDiv);
lot.appendChild(streamDiv);
lot.appendChild(definestreamdiv);
}
storeImportStreamInfo() Function:
var clickcount=1;
function storeImportStreamInfo()
{
var choice=document.getElementById("streamSelect");
var selectedStream = choice.options[choice.selectedIndex].text;
var asName= document.getElementById("istreamName").value;
var StreamElementID = clickcount;
clickcount++;
createdImportStreamArray[clickedId][0]=StreamElementID;
createdImportStreamArray[clickedId][1]=selectedStream;
createdImportStreamArray[clickedId][2]=asName;
y++;
}
Solved it by passing the newly dropped jsPlumb object to the storeImportStreamInfo() as parameters and set the text within the method. Also this parameter needs to be carried through all the functions through which it progresses before achieving the storeImportStreamInfo() method.
Eg:
function createStreamForm(newAgent,i)
within this function->
importbtn.onclick = function() {
storeImportStreamInfo(newAgent,i);
}
and so on. In the storeImportStreamInfo() function, I've added the lines that append the icons and the text to the dropped Element.
var prop = $('<a class="streamproperty" onclick="doclick(this)"><b><img src="../Images/settings.png"></b></a> ').attr('id', (i));
newAgent.text(asName).append('<a class="boxclose" id="boxclose"><b><img src="../Images/Cancel.png"></b></a> ').append(prop);
No matter how hard I am trying to get the right loop using JavaScript for this I fail. As you can see in the code below I have several things repeating an I want to put it in a for loop. But is there actually a way to get all these things into one for loop and how?
As you can see I have: sub1(), push1, "mydiv"+1 and other things repeated... Thank you in advance and sorry cause I am rookie :)
function sub1() {
push1++;
var myfield = document.createElement("textarea");
myfield.name = "rex" + 1 + push1;
var div = document.createElement("div");
div.innerHTML = myfield.outerHTML;
document.getElementById("mydiv"+1).appendChild(div);
}
function sub2() {
push2++;
var myfield = document.createElement("textarea");
myfield.name = "rex" + 2 + push2;
var div = document.createElement("div");
div.innerHTML = myfield.outerHTML;
document.getElementById("mydiv"+2).appendChild(div);
}
Is this what you are looking for?
var push = [];
function sub(num) {
push[num] = (push[num] || 0) + 1;
var myfield = document.createElement("textarea");
myfield.name = "rex" + num + push[num];
var div = document.createElement("div");
div.innerHTML = myfield.outerHTML;
document.getElementById("mydiv"+num).appendChild(div);
}
sub(1);
sub(2);