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.

Dynamic Add, Edit & Delete row in Table in Js

While i click the Add Row button it showing error. I want to append a new 'tr' of every time i click add row button. the each td must contain, checkbox, firstname, lastname, email, mobile edit & save.
i want to save the values if i click save button..
and edit button to edit the fields.
Checkbox is to select the multiple rows and delete the entire row.
Can someone please help me to do this.. thanks in advance.
var form = document.createElement('form');
document.body.appendChild(form);
var table = document.createElement('table');
table.setAttribute("id","myTable");
form.appendChild(table);
var btnClick = document.createElement('button');
btnClick.setAttribute('onclick','addTable()');
btnClick.innerHTML = "Add Row";
form.appendChild(btnClick);
var btnSave = document.createElement('button');
btnSave.innerHTML = "Save";
var btnDelete = document.createElement('button');
btnDelete.innerHTML = "Delete";
var btnEdit = document.createElement('button');
btnEdit.innerHTML = "Edit";
var checkbox = document.createElement('input');
checkbox.type = "checkbox";
var input = document.createElement('input');
input.type = "text";
input.placeholder = "Firstname";
var input1 = document.createElement('input');
input1.type = "text";
input1.placeholder = "Lastname";
var input2 = document.createElement('input');
input2.type = "email";
input2.placeholder = "Email";
var input3 = document.createElement('input');
input3.type = "number";
input3.placeholder = "Number";
function addTable() {
var row = document.createElement('tr');
table.appendChild(row);
var cell = document.createElement('td');
row.appendChild(cell);
cell.appendChild(checkbox);
cell.appendChild(input);
cell.appendChild(input1);
cell.appendChild(input2);
cell.appendChild(input3);
cell.appendChild(btnSave);
cell.appendChild(btnEdit);
}
JsFiddle

First and most important thing to change is the tag you're using for your add row button. By using a button you're going to cause the form to submit each time you press it, thereby undoing your row add and any other page changes. Use an < input > tag with type button if you want the same look. You'll probably want to do the same with your save edit and delete buttons if you want the page to respond without reloading.
For everything else you're pretty much there. If I were you I would stop using setAttribute for everything. You can set the id and onclick of an element by a direct property set (ie table.id = "myTable";). I typically only use setAttribute for inline style when I want to set more than one property at once (ie table.setAttribute("style","border:2px solid;color:red;");
Here's my version of your code that works.
window.onload = function(){
var addTable = function() {
var checkbox = document.createElement('input');
checkbox.type = "checkbox";
var input = document.createElement('input');
input.type = "text";
input.placeholder = "Firstname";
var input1 = document.createElement('input');
input1.type = "text";
input1.placeholder = "Lastname";
var input2 = document.createElement('input');
input2.type = "email";
input2.placeholder = "Email";
var input3 = document.createElement('input');
input3.type = "number";
input3.placeholder = "Number";
var btnSave = document.createElement('button');
btnSave.innerHTML = "Save";
var btnDelete = document.createElement('button');
btnDelete.innerHTML = "Delete";
var btnEdit = document.createElement('button');
btnEdit.innerHTML = "Edit";
var row = document.createElement('tr');
table.appendChild(row);
addCell(row,checkbox);
addCell(row,input);
addCell(row,input1);
addCell(row,input2);
addCell(row,input3);
addCell(row,btnSave);
addCell(row,btnEdit);
addCell(row,btnDelete);
};
var form = document.createElement('form');
form.method = "post";
document.body.appendChild(form);
var table = document.createElement('table');
table.id = "myTable";
form.appendChild(table);
var btnClick = document.createElement('input');
btnClick.type = "button";
btnClick.value = "Add Row";
btnClick.onclick = addTable;
form.appendChild(btnClick);
};
function addCell(row,elm){
var cell = document.createElement('td');
row.appendChild(cell);
cell.appendChild(elm);
}

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.

Firefox won't submit a form created by JavaScript

I need to create a form with a few inputs when an event happens. My code is below.
Chrome submits fine - the alert box shows and the page changes.
Firefox does not work - the alert box shows but the page stays the same. How can I get Firefox to submit the form?
var idsInput = document.createElement('input');
idsInput.name = 'itemIds';
idsInput.value = ids;
var quantityInput = document.createElement('input');;
quantityInput.name = 'quantity';
quantityInput.value = 1;
var authTokenInput = document.createElement('input');
authTokenInput.name = 'authenticityToken';
authTokenInput.value = '${session.getAuthenticityToken()}';
var submitInput = document.createElement('input');
submitInput.type = 'submit';
submitInput.value = 'anything';
var form = document.createElement('form');;
form.action = '#{Checkout.setItemsQuantityHandler}';
form.method = 'POST';
form.elements[0] = idsInput;
form.elements[1] = quantityInput;
form.elements[2] = authTokenInput;
form.elements[3] = submitInput;
form.submit();
alert('after submit()'); // for debugging only

FF requires it to be in the DOM already. Set form to display:none and add it to an existing element in DOM and then submit it.

Try This...
var idsInput = document.createElement('input');
idsInput.name = 'itemIds';
idsInput.value = ids;
var quantityInput = document.createElement('input');
quantityInput.name = 'quantity';
quantityInput.value = 1;
var authTokenInput = document.createElement('input');
authTokenInput.name = 'authenticityToken';
authTokenInput.value = '${session.getAuthenticityToken()}';
var submitInput = document.createElement('input');
submitInput.type = 'submit';
submitInput.value = 'anything';
var form = document.createElement('form');
form.action = '#{Checkout.setItemsQuantityHandler}';
form.method = 'POST';
form.elements[0] = idsInput;
form.elements[1] = quantityInput;
form.elements[2] = authTokenInput;
form.elements[3] = submitInput;
document.body.appendChild(form);
form.submit();

Why the js code works in a web page but fails in GreaseMonkey?

I created a hidden frame as follows:
var oHiddenFrame = null;
if(oHiddenFrame == null){
oHiddenFrame = document.createElement("iframe");
oHiddenFrame.name = "hiddenFrame";
oHiddenFrame.id = "hiddenFrame";
oHiddenFrame.style.height = "0px";
oHiddenFrame.style.width = "0px";
oHiddenFrame.style.position = "absolute";
oHiddenFrame.style.visbility = "hidden";
document.body.appendChild(oHiddenFrame);
}
then listener:
var fnLocation = function(){
frames["hiddenFrame"].location.href = "http://meckmeck.cn";
}
var oButton = document.getElementById("mb_submit");
oButton.addEventListener("click", fnLocation, false);
It works fine in a web page,but will report frames.hiddenFrame is undefined when written in GreaseMonkey

Have you tried,
document.getElementById('hiddenFrame').location.href = "http://meckmeck.cn";