Develop Reference

Appenchild is throwing an error when trying to append a modal to a div

I am currently exploring and trying to create a Django application. The problem I am facing currently is, while trying to append a modal to a div element in the HTML file, the JavaScript threw an error saying :
Uncaught (in promise) TypeError: modalContainer.appendChild is not a function
at HTMLButtonElement.replyModal ((index):217:28)
Here is the code throwing the problem:
console.log("REPLY MODAL");
var modal = document.createElement('div');
modal.className = "modal fade";
modal.id = "reply-modal";
modal.tabIndex = "-1";
modal.setAttribute("aria-labelledby", "Reply to feedback");
modal.setAttribute("aria-hidden", "true");
var modalDialog = document.createElement('div');
modalDialog.className = "modal-dialog";
var modalContent = document.createElement('div');
modalContent.className = "modal-content";
var modalHeader = document.createElement('div');
modalHeader.className = "modal-header";
var modalTitle = document.createElement('h5');
modalTitle.className = "modal-title";
modalTitle.innerHTML = "Reply to feedback";
var modalCloseButton = document.createElement('button');
modalCloseButton.className = "btn-close";
var modalBody = document.createElement('div');
modalBody.className = "modal-body";
var modalForm = document.createElement('form');
modalForm.method = "POST";
modalForm.action = "/suggestionbox/reply/" + feedback.pk + "/";
modalForm.id = "reply-form";
var modalCsrfToken = document.createElement('input');
modalCsrfToken.type = "hidden";
modalCsrfToken.name = "csrfmiddlewaretoken";
var modalFormGroup = document.createElement('div');
modalFormGroup.className = "form-group";
var modalLabel = document.createElement('label');
modalLabel.for = "reply";
modalLabel.innerHTML = "Reply";
var modalTextArea = document.createElement('textarea');
modalTextArea.className = "form-control";
modalTextArea.id = "reply";
var modalSubmitButton = document.createElement('button');
modalSubmitButton.type = "submit";
modalSubmitButton.className = "btn btn-primary";
modalSubmitButton.innerHTML = "Submit";
modalFormGroup.appendChild(modalLabel);
modalFormGroup.appendChild(modalTextArea);
modalForm.appendChild(modalCsrfToken);
modalForm.appendChild(modalFormGroup);
modalForm.appendChild(modalSubmitButton);
modalBody.appendChild(modalForm);
modalHeader.appendChild(modalTitle);
modalHeader.appendChild(modalCloseButton);
modalContent.appendChild(modalHeader);
modalContent.appendChild(modalBody);
modalDialog.appendChild(modalContent);
modal.appendChild(modalDialog);
modalContainer.appendChild(modal);
var replyButton = document.getElementById("reply-button");
replyButton.addEventListener("click", function() {
var reply = document.getElementById("reply").value;
var feedbackId = feedback.pk;
$.ajax({
url: "/suggestionbox/reply/" + feedbackId + "/",
type: "POST",
data: {
csrfmiddlewaretoken: "{{ csrf_token }}",
reply: reply
},
success: function (response) {
console.log("REPLY SUCCESSFUL");
console.log(response);
}
});
});
}
I can't seem to find an answer relating to my problem. I hope you guys at the forum can help. Cheers.

Javascript add row to HTML table with text and onClick

i am adding a new table row in javascript:
var i=1;
function addRow(seq, nominalcode, description, quantity, unitprice) {
seq = seq || '';
nominalcode = nominalcode || '';
description = description || '';
quantity = quantity || '';
unitprice = unitprice || '';
var tbl = document.getElementById('table1');
var lastRow = tbl.rows.length - 4;
//var iteration = lastRow - 1;
var row = tbl.insertRow(lastRow);
row.id = 'item_row_' + i;
var Cell0 = row.insertCell(0);
var elItemSequence = document.createElement('input');
elItemSequence.type = 'hidden';
elItemSequence.name = 'item_sequence' + i;
elItemSequence.id = 'item_sequence' + i;
elItemSequence.value = seq;
Cell0.appendChild(elItemSequence);
var elNominalcode = document.createElement('input');
elNominalcode.type = 'textarea';
elNominalcode.className = 'form-control';
elNominalcode.name = 'nominal_code' + i;
elNominalcode.id = 'nominal_code' + i;
elNominalcode.placeholder = 'Nominal Code';
elNominalcode.value = nominalcode;
Cell0.appendChild(elNominalcode);
var Cell1 = row.insertCell(1);
var elDescription = document.createElement('textarea');
elDescription.type = 'textarea';
elDescription.className = 'form-control';
elDescription.name = 'description' + i;
elDescription.id = 'description' + i;
elDescription.placeholder = 'Description';
elDescription.value = description;
elDescription.cols = 40;
elDescription.rows = 2;
Cell1.appendChild(elDescription);
var Cell2 = row.insertCell(2);
var elQuantity = document.createElement('input');
elQuantity.type = 'text';
elQuantity.className = 'form-control';
elQuantity.name = 'quantity' + i;
elQuantity.id = 'quantity' + i;
elQuantity.placeholder = 'Quantity';
elQuantity.value = quantity;
elQuantity.value = quantity;
Cell2 .appendChild(elQuantity);
var Cell3 = row.insertCell(3);
var elUnitPrice = document.createElement('input');
elUnitPrice.type = 'text';
elUnitPrice.className = 'form-control';
elUnitPrice.name = 'unitprice' + i;
elUnitPrice.id = 'unitprice' + i;
elUnitPrice.placeholder = 'Price';
elUnitPrice.value = unitprice;
Cell3.appendChild(elUnitPrice);
var Cell4 = row.insertCell(4);
var elDelete = document.createElement('a');
elDelete.href = '#';
elDelete.onclick = function(){ DeleteInvoiceLine(seq, i) };
elDelete.text = 'Delete' + i;
Cell4.appendChild(elDelete);
i++;
document.getElementById('numrows').value = (i-1);
//alert(i);
}
in the above code there is an onClick action which calls a function
but everytime the row is added its running the function, how can i make it only call the function on click of the a anchor
my function is:
function DeleteInvoiceLine(seq, row_num) {
alert(seq + '/' + row_num);
}

You can try anonymous function
elDelete.onclick = function(){ DeleteInvoiceLine(seq) };

Try this:
...
elDelete.setAttribute("onclick", "DeleteInvoiceLine("+ seq +","+ i +")");
....

There are several issues in your code.
1. elDelete.onclick=... not onClick
2. As you note DeleteInvoiceLine(seq) run at the moment the element created.
This is because you assign result of the function, not function to onclick event.
3. (not asked yet) What is sec variable? I suspect something like for(var sec=0;sec<N;sec++) and your code is inside the loop. This will not work (see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures).
4. elDelete.onclick = function(){ DeleteInvoiceLine(seq) }; doesn't work because sec is out of scope at the moment of click.
Some fixes.
var i = 0;
//...
for(var sec=0;sec<N;sec++){
//your code
elDelete.onclick = DeleteInvoiceLine(seq, i);//I keep it with purpose
//your code
}
//...
i++;
//The key moment
function DeleteInvoiceLine(seq, row_num){
//sec comes here from the loop
return function(){//note (); (sec) would kill all construction
//and in this context would be **event {type:'click'}
$.ajax(
//your code which uses **sec** and/or **row_num**
//this time sec and row_num are available from parent scope
);//$.ajax
}//return function
}//function DeleteInvoiceLine

functions for checkboxes in Javascript

So I have a code with check boxes and I need a suggestion for a function to get data from database if the check box is checked. The table name for the database is Shifliigid and the column name which data I use in the check box is shiffer. So any suggestions would be nice (English isn't my first or even second language, so don't be mad for the short and shady explanation)
var nodeTr = document.createElement("tr");
var td_tekst = document.createElement("td");
td_tekst.innerHTML="Motoorika";
var td = document.createElement("td");
td.style.width = "370px";
var input = document.createElement("textarea");
//input.type = "text";
input.name = "//funktsioonide hindamine/funktsioon[" + count + "]/motoorika";
input.value = rowData.motoorika.replace(/<br\/>/g, "\r\n");
input.className = "txt_left";
input.style.width = "368px";
input.style.fontSize = "9pt";
var nodeMotoorika = input;
addChangeListener(input);
td.appendChild(input);
nodeTr.appendChild(td_tekst);
nodeTr.appendChild(td);
evaluationContainer.appendChild(nodeTr);
//This is the part that makes the checkboxes
var nodeTr = document.createElement("tr");
var td_tekst = document.createElement("td");
var td = document.createElement("td");
var echeckbox = document.createElement("input");
echeckbox.type="checkbox";
echeckbox.name = "//funktsioonide hindamine/funktsioon[" + count + "]/nagemine/vahend_0301";
td.appendChild(echeckbox);
td.innerHTML+="käeprotees/-ortoos";
nodeTr.appendChild(td_tekst);
nodeTr.appendChild(td);
evaluationContainer.appendChild(nodeTr);
var nodeTr = document.createElement("tr");
var td_tekst = document.createElement("td");
td_tekst.innerHTML="Liikumine";
var td = document.createElement("td");
td.style.width = "370px";
var input = document.createElement("textarea");
//input.type = "text";
input.name = "//funktsioonide hindamine/funktsioon[" + count + "]/liikumine";
input.value = rowData.liikumine.replace(/<br\/>/g, "\r\n");
input.className = "txt_left";
input.style.width = "368px";
input.style.fontSize = "9pt";
var nodeLiikumine = input;
addChangeListener(input);
td.appendChild(input);
nodeTr.appendChild(td_tekst);
nodeTr.appendChild(td);
evaluationContainer.appendChild(nodeTr);
//This is the part that makes the checkboxes
var nodeTr = document.createElement("tr");
var td_tekst = document.createElement("td");
var td = document.createElement("td");
var echeckbox = document.createElement("input");
echeckbox.type="checkbox";
echeckbox.name = "//funktsioonide hindamine/funktsioon[" + count + "]/nagemine/vahend_0302";
td.appendChild(echeckbox);
td.innerHTML+="jalaprotees/-ortoos";
nodeTr.appendChild(td_tekst);
nodeTr.appendChild(td);
evaluationContainer.appendChild(nodeTr);

There is no JS "function to get data from database".
You will have to choose a backend technology to access the database. For example PHP.

Use ajax calls to get the data from database using PHP or asp.
You can check if a particular checkbox is checked using the checked property of DOM.

adding focus on a runtime generated input box using javascript

hi i have a form which dynamically generates a table row on a button click using javascript
everything is working fine but now i want to add focus on a newly generated input box in my table row so can anyone help in this?
here is my script
<script language="javascript" type="text/javascript">
var jj=1;
function addRow()
{
//alert(jj)
var tbl = document.getElementById('zimtable');
var lastRow = tbl.rows.length;
var iteration = lastRow - 1;
var row = tbl.insertRow(lastRow);
var firstCell = row.insertCell(0);
var el = document.createElement('input');
el.type = 'text';
el.name = 'zimname_' + jj;
el.id = 'zimname_' + jj;
el.size = 40;
el.maxlength = 40;
firstCell.appendChild(el);
var secondCell = row.insertCell(1);
var el2 = document.createElement('input');
el2.type = 'text';
el2.name = 'zimmob_' + jj;
el2.id = 'zimmob_' + jj;
el2.size = 10;
el2.maxlength = 10;
secondCell.appendChild(el2);
var thirdCell = row.insertCell(2);
var element4 = document.createElement("select");
element4.name ='zim_'+jj;
var option1 = document.createElement("option");
option1.value='TRUSTY';
option1.innerHTML='TRUSTY';
element4.appendChild(option1);
var option2 = document.createElement("option");
option2.value='MUQAMI HAZRAT';
option2.innerHTML='MUQAMI HAZRAT';
element4.appendChild(option2);
var option3 = document.createElement("option");
option3.value='MASJIDWAR JAMAAT KA SAATHI';
option3.innerHTML='MASJIDWAR JAMAAT KA SAATHI';
element4.appendChild(option3);
thirdCell.appendChild(element4);
var fourthCell = row.insertCell(3);
var el3 = document.createElement('input');
el3.type = 'text';
el3.name = 'zemail_' + jj;
el3.id = 'zemail_' + jj;
el3.size = 40;
el3.maxlength = 40;
fourthCell.appendChild(el3);
firstCell.focus();
// alert(i);
jj++;
makhtab.hh.value=jj;
// alert(jj);
}
</script>
i want to add focus on my first input box in my generated table row

Change the line:
firstCell.focus();
To:
el.focus();

try this
$('#zimname_1').focus();

Why my dynamic form is not getting submitted?

I am creating a dynamic form to submit with few input elements, but it does not send a request. I use fiddler to check
Here is my code
var form_ref = document.createElement("form");
form_ref.id = "viewform";
form_ref.name = "viewform";
form_ref.action = "/csm/showResult.action";
form_ref.method = "post";
form_ref.target = "_self";
var cfgidField = document.createElement("input");
cfgidField.name = "cfgid";
cfgidField.type = "text";
cfgidField.value = configid;
form_ref.appendChild(cfgidField);
var cfgnameField = document.createElement("input");
cfgnameField.name = "cfgname";
cfgnameField.type = "text";
cfgnameField.value = configname;
form_ref.appendChild(cfgnameField);
var cfgdescField = document.createElement("input");
cfgdescField.name = "cfgdesc";
cfgdescField.type = "text";
cfgdescField.value = configdesc;
form_ref.appendChild(cfgdescField);
var cfgenvField = document.createElement("input");
cfgenvField.name = "cfgenv";
cfgenvField.type = "text";
cfgenvField.value = configenv;
form_ref.appendChild(cfgenvField);
var cfgfileField = document.createElement("input");
cfgenvField.name = "cfgfile";
cfgenvField.type = "text";
cfgenvField.value = absolutepath;
form_ref.appendChild(cfgfileField);
var cfgdateField = document.createElement("input");
cfgenvField.name = "updatedDate";
cfgenvField.type = "text";
cfgenvField.value = absolutepath;
form_ref.appendChild(cfgdateField);
form_ref.submit();

Maybe you have the same problem seen here:
Why can't I submit a dynamically created form in Firefox
it basically says to append it to your document.body before submitting.