I would like to add a new div from javascript to my existing html page. Normally I do this with the instruction document.createElement("div") and I fill this div with the methode div.innerHTML = "" (for example). This works fine in most cases, but now I would like to add a selectionlist to my div and fill this lists with some data. This method doesn't work:
function initEdit(){
addPanel = document.createElement("div");
addPanel.innerHTML = "<form id='addProperty' method='get'> <table>" +
"<tr> <td> <select size='4' style='width:140px; height:200px' id='object_property_selection' onClick='unSelect(\"data_property_selection\")'> </td>" +
"<td> <select size='4' style='width:140px; height:200px' id='object_selection'>" +
"<textarea style='width:140px; height:200px; display:none' id='data_selection' /> </td> </tr>" +
"<tr> <td> <select size='4' style='width:140px; height:100px' id='data_property_selection' onClick='unSelect(\"object_property_selection\")'> </td>" +
"<td> </td> </tr>" +
"<tr> <td colspan=2> <input type='button' name='Submit' style='width:100%' onClick='submitProperty()' /> </td> </tr>" +
"</table> </form>";
$('body').jAlert(contents, 'info', offset);
list1.forEach(function(element, id){
var option = document.createElement("OPTION");
option.text = option.value = property;
form.data_property_selection.options.add(element);
})
}
Does anybody know how to solve this? (BTW: I can't set this html code in the page at the beginning, because this is the contents of a jAlert div)
update: solution
properties1.concat(properties2).forEach(function(property, id){
if (id < object_properties.length) propertyList1 += "<option value='" + property + "'>" + property + "</option>";
else propertyList2 += "<option value='" + property + "'>" + property + "</option>";
})
objects.forEach(function(feature, id) {
objectList += "<option value='" + feature._id + "'>" + feature.name + "</option>";
})
propertyList = "<form id='addProperty' method='get'> <table>" +
"<tr> <td> <select size='4' style='width:140px; height:200px' id='object_property_selection' onClick='unSelect(\"data_property_selection\")'>" +
propertyList1 + "</select> </td>" +
"<td> <select size='4' style='width:140px; height:200px' id='object_selection'>" +
objectList + "</select> </td>" +
"<textarea style='width:140px; height:200px; display:none' id='data_selection' /> </td> </tr>" +
"<tr> <td> <select size='4' style='width:140px; height:100px' id='data_property_selection' onClick='unSelect(\"object_property_selection\")'>" +
propertyList2 + "</select> </td>" +
"<td> </td> </tr>" +
"<tr> <td colspan=2> <input type='button' name='Submit' style='width:100%' onClick='submitProperty()' /> </td> </tr>" +
"</table> </form>";
As far as I know, achieving what you want with this method is impossible. Instead of using innerHTML, you should do the long way, creating all the inner tags with createElement as well, and appending them as children. Using jQuery can make this job a lot easier.
Here is an example of how to do it with jQuery: link, and the official API.
Alternatively, if you can first create the inner list, then just create it and concatenate it as a string as a part of innerHTML (first make the list, only then edit innerHTML).
Related
In my Vue CLI component, I'm populating a row table dynamically
i.e. inside my methods:
add_row() {
var new_name = document.getElementById("new_name").value;
var new_country = document.getElementById("new_country").value;
var new_age = document.getElementById("new_age").value;
var table = document.getElementById("data_table");
var table_len = table.rows.length - 1;
table.insertRow(table_len).outerHTML =
"<tr id='row" +
table_len +
"'><td id='name_row" +
table_len +
"'>" +
new_name +
"</td><td id='country_row" +
table_len +
"'>" +
new_country +
"</td><td id='age_row" +
table_len +
"'>" +
new_age +
"</td><td><input type='button' value='Delete' class='delete' #click=\"delete_row(" +
table_len +
')"></td></tr>';
document.getElementById("new_name").value = "";
document.getElementById("new_country").value = "";
document.getElementById("new_age").value = "";
}
This is the HTML part of the component:
<table
align="center"
cellspacing="2"
cellpadding="5"
id="data_table"
border="1"
>
<tr>
<th>Name</th>
<th>Country</th>
<th>Age</th>
</tr>
<tr id="row1">
<td id="name_row1">Ankit</td>
<td id="country_row1">India</td>
<td id="age_row1">20</td>
<td>
<input
type="button"
value="Delete"
class="delete"
#click="delete_row('1')"
/>
</td>
</tr>
<tr>
<td><input type="text" id="new_name" /></td>
<td><input type="text" id="new_country" /></td>
<td><input type="text" id="new_age" /></td>
<td>
<input
type="button"
class="add"
#click="add_row()"
value="Add Row"
/>
</td>
</tr>
</table>
Notice in my add_row function, when populating the row, I append a delete button tag and in it, pass the method delete_row. Clicking on this delete button should fire the method as shown below:
in my methods:
delete_row(no) {
document.getElementById("row" + no + "").outerHTML = "";
},
But the method is not being triggered from the delete_row function. I've confirmed that the rows are working well since my button for adding that row the add_row function fires. So my thinking is since I call the delete_row function from a dynamically created, there's perhaps something extra that I need to pass to my code to trigger this method?
I do not know how to formulate this question but it is near close to my issue. I am trying to make a Point of sale system so when client clicks in each product it adds in the table. There are no issues in my code but I do not know how to set the product's price using a textbox when using .append.
This is my code:
$(".agregarListaF").click(function (e) {
e.preventDefault();
var padre = $(this);
var hijos = padre.children().children("span");
var i = 0;
var datos = new Array();
hijos.each(function () {
switch (i) {
case 0:
datos[0] = $(this).text();
break;
case 1:
padre;
datos[1] = $(this).text();
break;
case 2:
padre;
datos[2] = $(this).text();
break;
}
i++;
});
console.log(datos[0]);
console.log(datos[1]);
$(".detallefactura").append(
"<tr>" +
"<td>" +
datos[0] +
"</td>" +
"<td>" +
datos[1] +
"</td>" +
"<td>" +
"<input type='text' class='form-control text-center' value='1'>" +
"</td>" +
"<td>" +
"<input type='text' class='form-control text-center' value=''>" +
"</td>" +
"<td class='tota-sub-fila'>" +
parseFloat(Math.floor(datos[2]) * parseFloat(1)).toFixed(2) +
"</td>"
);
});
My issue is in the line:
+ "<td>" + "<input type='text' class='form-control text-center' value=''>" + "</td>"
I want to add javascript value variable inside * input value=''* but I know It wont work but I tried it:
+ "<td>" + "<input type='text' class='form-control text-center' value='datos[2]'>" + "</td>"
This is my point of sale view:
In the column precio is where I want to set the price inside that textbox.
How do I solve this?
Please try this code,To How to set Javascript's variable value inside
<!DOCTYPE html>
<html>
<head>
<title>
JavaScript| Set the value of an input field.
</title>
</head>
<body style="text-align:center;" id="body">
<input type='text' id='id1' />
<br>
<br>
<button onclick="gfg_Run()">
click to set
</button>
<p id="GFG_DOWN" style="color:green; font-size: 20px;font-weight: bold;"></p>
<script>
var el_down = document.getElementById("GFG_DOWN");
var inputF = document.getElementById("id1");
function gfg_Run() {
inputF.setAttribute('value', 'defaultValue');
el_down.innerHTML = "Value = " + "'" + inputF.value + "'";
}
</script>
</body>
</html>
I hope this information will be useful.
Thank you.
Follow this using template literals
const html = `<tr>
<td>${datos[0]}</td>
<td>${datos[1]}</td>
<td><input type="text" class="form-control text-center" value="${datos[3]}"></td>
<td><input type="text" class="form-control text-center" value="${datos[4]}"</td>
<td class="tota-sub-fila">${parseFloat((Math.floor(datos[2])) * parseFloat(1)).toFixed(2)}</td>
</tr>`;
$(.detallefactura").append(html);
You can do:
var variable="x";
"<input type='text' class='form-control text-center' value='"+ variable +"'>";
Or,
`<input type='text' class='form-control text-center' value='${variable}'>`
you can use Template literals like this instead of having this concatenation:
$(.detallefactura").append(`<tr>
<td> ${datos[0]} </td>
<td> ${datos[1]} </td>
<td> <input type='text' class='form-control text-center' value='1'> </td>
<td> <input type='text' class='form-control text-center' value='${datos[2]}'> </td>
<td class='tota-sub-fila'> ${parseFloat((Math.floor(datos[2])) * parseFloat(1)).toFixed(2)} </td>
`);
I have a table with combo box in my jsp :
<form:form modelAttribute="mainCommodity" id="mainCommodityForm">
<table id="customPostTable" >
<td>
<form:select path="postId">
<form:option value="0" id="PleaseSelect2"/>
<form:options items="${posts}" itemValue="id" itemLabel="name"/>
</form:select>
<form:errors path="postId"/>
</td>
<td style="padding: 2px ;vertical-align:middle;border: 1px solid" id="addMoreElem">
<img id="addMoreImage" src="/images/Plus.png" onclick='addMore("${postsString}")' alt="<fmt:message key="button.addRow"></fmt:message>">
</td>
</table>
</form:form>
Now I want to append another rows to this table by clicking button in JavaScript. allPosts is an array which contains my combo box items in java script.
My jsp code for append to table is as follows:
function addMore(attr) {
var data = "";
data = "<tr>" +
"<td style='padding: 2px;vertical-align:middle;border: 1px solid'>" +
"<select name='postId'>" +
"</select>" +
"</td>"+
"<td style='padding: 20px' class='noBorder-fa' >" +
"<img id='addMoreImage' src='/images/Plus.png' onclick='addMore("+attr+")' alt='<fmt:message key="button.addRow"></fmt:message>' > " +
"</td>" ;
$("#customPostTable").append(data);
}
How can I append options to the select element with value of allPosts in JavaScript?
Does this works for you:
function addMore(attr) {
allPosts = ["One", "Two", "Three"];
var data = "";
all_Posts_Options = "";
for(var i=0; i<allPosts.length; i++) {
all_Posts_Options = all_Posts_Options + "<option>" + allPosts[i] + "</options>";
}
data = "<tr>" +
"<td style='padding: 2px;vertical-align:middle;border: 1px solid'>" +
"<select name='postId'>" +
all_Posts_Options +
"</select>" +
"</td>"+
"<td style='padding: 20px' class='noBorder-fa' >" +
"<img id='addMoreImage' src='/images/Plus.png' onclick='addMore()' alt='<fmt:message key=\"button.addRow\"></fmt:message>' > " +
"</td>" ;
$("#customPostTable").append(data);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="customPostTable">
</table>
<button onclick="addMore(null)">Add more</button>
Please note that inserting new elements via HTML is not recommended.
DOM manipulation tools shall be used instead. See MDN
this is my JSP page:
function adding()
{
var text = "<br><br><br>" +
"<form action='addEmployee' method='get'>" +
"<tr>" +
"<input type='text' name='idEmployee' style='width: 20px;'>" +
"<input type='text' name='CIN' style='width: 35px;'>" +
"<input type='text' name='nom' style='width: 35px;'>" +
"<input type='text' name='prenom' style='width: 35px;'>" +
"<input type='text' name='e_mail' style='width: 35px;'>" +
"<input type='text' name='telephone' style='width: 35px;'>" +
"<input type='text' name='fonction' style='width: 35px;'>" +
"<button type='submit'> Confirmer l'ajout </button>" +
"</tr>" +
"</form>";
$(".liste").append(text);
}
I am recovering the fields in my servlet but getting an error: the method setCIN is not applicable for the arguments (Object) and this is the case for the other setters:
e.setCIN(Integer.parseInt(req.getParameter("CIN")));
I don't know what is an error in this code. I have correctly detect parent. But doesn't work.
This is HTML code
<table>
<tbody class="tbody">
<tr id="row_1">
<td>
<input type="text" id="row_1_jumlah_1" name="row_1_jumlah_1" value="1" readonly="readonly" class="form-control" />
</td>
<td></td>
</tr>
<input type="button" class="btn green" value="Tambah Satuan" id="add_row" style="margin-bottom: 10px; margin-left:10px;" />
</tbody>
</table>
This is js code
$("#add_row").click(function () {
var last_index_tr = $(".tbody tr").length;
var new_index_tr = $(".tbody tr").length + 1;
var row = $("<tr id='row_" + new_index_tr + "'>");
var input = $("<td> <input class='form-control' type='text' id='row_" + new_index_tr + "_jumlah_1' name='row_" + new_index_tr + "_jumlah_1' value='1' readonly='readonly' /> </td>");
var action_delete = $("<td> <input class='btn btn-danger' type='button' id='row_" + new_index_tr + "_delete' class='delete' value='delete' /> </td>");
action_delete.click(function () {
var parent_1 = action_delete.parent();
var get_tr_parent_id = $(parent_1).attr('id');
//document.write(get_tr_parent_id);
$("#".get_tr_parent_id).remove();
});
row.append(input);
row.append(action_delete);
row.append("</tr>");
$(".tbody").append(row);
});
I want to remove tr inside table with delete button or action_delete(see js code). I have get parent perfectly. But I can't still delete tr.
Try this, You can use .on to hook the click handler for that delete button which is being created at runtime. Though your hooking is working, Using .on is a good practice while dealing with elements which are created dynamically. And by the way you have to concatenate the # with + Not with . That was the problem with your code, See your code working over here.
var action_delete = $("<td> <input class='btn btn-danger' type='button' id='row_" + new_index_tr +"_delete' class='delete' value='delete' /> </td>");
$(document).on('click',"#row_" + new_index_tr +"_delete",function(){
$(this).closest('tr').remove();
});
DEMO
Edit:
Try the following code, This will register to the click event commonly only once for your entire delete buttons.
$("#add_row").click(function () {
var last_index_tr = $(".tbody tr").length;
var new_index_tr = $(".tbody tr").length + 1;
var row = $("<tr id='row_" + new_index_tr + "'>");
var input = $("<td> <input class='form-control' type='text' id='row_" + new_index_tr + "_jumlah_1' name='row_" + new_index_tr + "_jumlah_1' value='1' readonly='readonly' /> </td>");
var action_delete = $("<td> <input class='btn btn-danger' type='button' id='row_" + new_index_tr + "_delete' class='delete' value='delete' /> </td>");
row.append(input);
row.append(action_delete);
row.append("</tr>");
$(".tbody").append(row);
});
$(document).on('click', "input[type='button'][id$='delete']",function(){
$(this).closest('tr').remove();
});
DEMO - I
Your remove method is incorrect. It should be:
$("#" + get_tr_parent_id).remove();
It was currently returning undefined instead of concatenating the two strings.