I have the following JS code for which I am calculating the insurance cost based on input provided by the user:
function AddQuote() {
if (ValidateInputs()) {
var json = {};
$(":input").each(function () {
json[$(this).attr("id")] = $(this).val();
});
var nextId = Number(localStorage.getItem('nextId'));
if (!nextId) {
nextId = 1;
}
localStorage.setItem("quote-" + nextId, JSON.stringify(json));
localStorage.setItem("nextId", String(nextId + 1));
$(location).prop('href', 'viewQuote.html?' + nextId);
}
}
function LoadQuoteData(id) {
var json = JSON.parse(localStorage.getItem("quote-" + id));
$(":input").each(function () {
$(this).val(json[$(this).attr("id")]);
});
var driverAge = Number(json['age']);
var driverExperience = Number(json['experience']);
var driverAccidents = Number(json['accidents']);
var subQuote;
var insuranceQuote = Number(json['finalQuote']);
if (driverExperience === 0) {
subQuote = 4000;
}
else if (driverExperience >= 1 && driverExperience <= 9) {
subQuote = 2500;
}
else {
subQuote = 1800;
}
if (driverAge >= 30 && driverExperience >= 2) {
insuranceQuote = subQuote * 0.75;
}
else {
insuranceQuote = subQuote;
}
//console.log(insuranceQuote);
console.log(json);
$("#finalQuote").val("$" + insuranceQuote);
}
I am using this in my HTML code as follows:
<script>
$(document).ready(function () {
var localStorageItems = Object.entries(localStorage);
var htmlCode = "";
$(localStorageItems).each(function () {
if ($(this)[0].startsWith("quote")) {
console.log($(this)[0]);
console.log($(this)[1]);
var quoteData = JSON.parse($(this)[1]);
var quoteAmount = "$" + quoteData['finalQuote'];
htmlCode +=
"<div class='container'>" +
"<div class='row pb-4 pt-4' style='border-bottom: 1px solid rgba(0,0,0,.125);'>" +
"<div class='col-md-6 '>" +
"<div class='card-header' style='margin-left: -1rem; margin-right: -1rem;'>Customer Information</div>" +
"<span class='d-block'><strong>First Name:</strong> " + quoteData['firstName'] + "</span>" +
"<span class='d-block'><strong>Last Name:</strong> " + quoteData['lastName'] + "</span>" +
"<span class='d-block'><strong>Address:</strong> " + quoteData['address'] + "</span>" +
"<span class='d-block'><strong>City:</strong> " + quoteData['city'] + "</span>" +
"<span class='d-block'><strong>Province:</strong> " + quoteData['province'] + "</span>" +
"<span class='d-block'><strong>Postal Code:</strong> " + quoteData['postalCode'] + "</span>" +
"<span class='d-block'><strong>Phone Number:</strong> " + quoteData['phone'] + "</span>" +
"<span class='d-block'><strong>Email:</strong> " + quoteData['email'] + "</span>" +
"</div>" +
"<div class='col-md-6'>" +
"<div class='card-header' style='margin-left: -1rem; margin-right: -1rem;'>Driving Information</div>" +
"<span class='d-block'><strong>Accidents:</strong> " + quoteData['accidents'] + "</span>" +
"<span class='d-block'><strong>Age:</strong> " + quoteData['age'] + "</span>" +
"<span class='d-block'><strong>Driving Experience:</strong> " + quoteData['experience'] + "</span>" +
"<span class='d-block'><strong>Insurance Quote:</strong> " + quoteAmount + "</span>" +
"<span class='d-block'><strong>" +
"</span>" +
"</div>" +
"</div>" +
"</div>" +
"</div>";
};
});
$("#quotesList").html(htmlCode);
});
</script>
But the problem is that the calculated finalQuote is not showing up on this HTML page (but all other fields are). Any ideas on what I'm missing / not doing correctly?
I have experience with PHP and HTML, but I am unfamiliar with JS. I have all the code needed, but I can't put it together. I have a table and need to add a delete button that will remove the file on that row. As shown in the picture below, but without the edit button:
When click on the Search button, the table is displayed (here is where I need the delete button):
index.php
<div style="clear:both; margin-bottom: 10px"></div>
<input type='button' class='button right-button' value='Search' onclick='Search(); return false;'/>
<div style="clear:both; margin-bottom: 10px"></div>
<fieldset id="data-set-fs" style="width:93%; padding-top: 10px; display:none">
<legend>Data Set</legend>
<div id="imported-set-wrapper"></div>
</fieldset>
main.js
function Search(){
var crop = $("#crop").val();
var type = $("#type").val();
var year = $("#year").val();
var season = $("#season").val();
var location = $("#location").val();
var subLocation = $("#sublocation").val();
$("#imported-set-wrapper").html("");
$("#imported-list-wrapper").html("");
$("#processing").show();
$.ajax({
url: "Resources/PHP/Search.php",
dataType: 'text',
data: {
crop: crop,
type: type,
year: year,
location: location,
season: season,
sublocation: subLocation
},
success: function(response) {
var data = JSON.parse(response);
var items = "";
var firstSet = 0;
if (data.length > 0)
{
var table = "<table id='imported-set-table'>" +
"<thead>" +
"<tr>" +
//added
"<th>Delete</th>" +
//added
"<th>Year</th>" +
"<th>Season</th>" +
"<th>Crop</th>" +
"<th>Type</th>" +
"<th>Location</th>" +
"<th>Sub-location</th>" +
"</tr>" +
"</thead>" +
"<tbody id='imported-set'>" +
"</tbody>" +
"</table>";
$("#imported-set-wrapper").html(table);
$.each(data,function(index,item)
{
if (index == 0){
firstSet = item.ID;
}
items+= "<tr id='data-set-" + item.ID + "' onclick='SelectDataSet(\"" + item.ID + "\"); return false;' style='cursor:pointer'>" +
//added
"<td style='overflow:hidden'>" +
"<span>" + item.Year + "</span>" +
"</td>" +
//added
"<td style='overflow:hidden'>" +
"<span>" + item.Year + "</span>" +
"</td>" +
"<td style='overflow:hidden'>" +
"<span>" + item.Season + "</span>" +
"</td>" +
"<td style='overflow:hidden'>" +
"<span>" + item.Crop + "</span>" +
"</td>" +
"<td style='overflow:hidden'>" +
"<span>" + item.Type + "</span>" +
"</td>" +
"<td style='overflow:hidden'>" +
"<span>" + item.Location + "</span>" +
"</td>" +
"<td style='overflow:hidden'>" +
"<span>" + item.SubLocation + "</span>" +
"</td>" +
"</tr>";
});
$("#imported-set").html(items);
var rowHeight = 61;
var padding = 10;
var actualHeight = (data.length + 1) * rowHeight + padding;
var maxHeight = 300;
var height = actualHeight < maxHeight ? actualHeight : maxHeight;
$('#imported-set-table').fxdHdrCol({
fixedCols: 0,
width: 1100,
height: height,
colModal: [
//added
{ width: 150, align: 'center' },
//added
{ width: 150, align: 'center' },
{ width: 150, align: 'center' },
{ width: 150, align: 'center' },
{ width: 250, align: 'center' },
{ width: 175, align: 'center' },
{ width: 150, align: 'center' },
],
sort: false
});
if (firstSet > 0){
$("#next").prop("disabled", false);
SelectDataSet(firstSet);
$("#data-set-fs").show();
} else {
alert("No dataset found");
}
}
$("#processing").hide();
},
error: function(xhr){
alert('Request Status: ' + xhr.status + ' Status Text: ' + xhr.statusText + ' ' + xhr.responseText);
$("#processing").hide();
}
});
}
Useful code from picture 1
"<input id='delete-" + type + "-" + item.ID +"' type='image' class='image-button delete-button' src='Resources/Images/delete.png' alt='Delete' onclick='Delete(" + item.ID +", \"" + type + "\"); return false;' title='Delete'>" +
"<input id='confirmDelete-" + type + "-" + item.ID +"' type='image' class='image-button confirm-delete-button' src='Resources/Images/confirm.png' alt='Confirm' style='display:none' onclick='ConfirmDelete(" + item.ID +", \"" + type + "\"); return false;' title='Confirm'>" +
"<input id='cancelDelete-" + type + "-" + item.ID +"' type='image' class='image-button cancel-delete-button' src='Resources/Images/cancel.png' alt='Cancel' style='display:none' onclick='CancelDelete(" + item.ID +", \"" + type + "\"); return false;' title='Cancel'>" +
function Delete(id, type){
$('#confirmDelete-' + type + '-' + id).show();
$('#cancelDelete-' + type + '-' + id).show();
$('#delete-' + type + '-' + id).hide();
CancelEdit(id);
}
function CancelDelete(id, type){
$('#confirmDelete-' + type + '-' + id).hide();
$('#cancelDelete-' + type + '-' + id).hide();
$('#delete-' + type + '-' + id).show();
}
function ConfirmDelete(id, type){
$.ajax({
url: 'Resources/PHP/' + type + '.php',
dataType: 'text',
data: { id: id, action: 'delete'},
success: function(response) {
if (response == "1") {
$('#confirmDelete-' + type + '-' + id).hide();
$('#cancelDelete-' + type + '-' + id).hide();
$('#delete-' + type + '-' + id).show();
alert("The " + type + " has been deleted.");
GetList(type);
} else {
alert("Could not delete the " + type + ". Error: " + response + ".");
}
}
});
}
Additional info: "//added" are additional lines trying to achieve mentioned goal.
You can add your button like this "<button data-id = " + item.ID + " class='delete'>Delete</button>" where data-id has your item.ID value this will get passed to your backend to perform delete operation.
Then , when delete button get clicked this $(document).on("click", ".delete",.. will get called you can show confirm-box so if user click ok then call your ajax to delete that trs data using selector.closest('tr').remove() where selector refer to the button which has been clicked .
Demo Code :
//dummy datas
var data = [{
"Year": "2016",
"Season": "somehting",
"Crop": "12",
"Type": "A",
"Location": "India",
"SubLocation": "Sub",
"ID": "1"
}, {
"Year": "2017",
"Season": "somehting",
"Crop": "12",
"Type": "A",
"Location": "India",
"SubLocation": "Sub",
"ID": "2"
}]
function Search() {
//some codes..
$("#imported-set-wrapper").html("");
$("#imported-list-wrapper").html("");
$("#processing").show();
//other codes...
var table = "<table id='imported-set-table'>" +
"<thead>" +
"<tr>" +
//added
"<th>Delete</th>" +
//added
"<th>Year</th>" +
"<th>Season</th>" +
"<th>Crop</th>" +
"<th>Type</th>" +
"<th>Location</th>" +
"<th>Sub-location</th>" +
"</tr>" +
"</thead>" +
"<tbody id='imported-set'>" +
"</tbody>" +
"</table>";
var items = "";
$("#imported-set-wrapper").html(table);
$.each(data, function(index, item) {
if (index == 0) {
firstSet = item.ID;
}
items += "<tr id='data-set-" + item.ID + "' onclick='' style='cursor:pointer'>" +
"<td style='overflow:hidden'>" +
//added button with data-* attribute
"<button data-id = " + item.ID + " class='delete'>Delete</button>" +
"</td>" +
"<td style='overflow:hidden'>" +
"<span>" + item.Year + "</span>" +
"</td>" +
"<td style='overflow:hidden'>" +
"<span>" + item.Season + "</span>" +
"</td>" +
"<td style='overflow:hidden'>" +
"<span>" + item.Crop + "</span>" +
"</td>" +
"<td style='overflow:hidden'>" +
"<span>" + item.Type + "</span>" +
"</td>" +
"<td style='overflow:hidden'>" +
"<span>" + item.Location + "</span>" +
"</td>" +
"<td style='overflow:hidden'>" +
"<span>" + item.SubLocation + "</span>" +
"</td>" +
"</tr>";
});
$("#imported-set").html(items);
//soem ot//other codes..
}
//onclick of delete button
$(document).on("click", ".delete", function() {
var id = $(this).data('id'); //get id
var selector = $(this);
console.log(id)
//show confirm box if yes
if (confirm("Are you sure?")) {
//ajax call
/*$.ajax({
url: 'url',
dataType: 'text',
data: { id: id, action: 'delete'},
success: function(response) {
if (response == "1") {*/
selector.closest('tr').remove() //remove tr
/* } else {
alert("Could not delete the " + type + ". Error: " + response + ".");
}
}
});*/
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="clear:both; margin-bottom: 10px"></div>
<input type='button' class='button right-button' value='Search' onclick='Search(); return false;' />
<div style="clear:both; margin-bottom: 10px"></div>
<fieldset id="data-set-fs" style="width:93%; padding-top: 10px;">
<legend>Data Set</legend>
<div id="imported-set-wrapper"></div>
</fieldset>
Where you have:
//added
"<td style='overflow:hidden'>" +
"<span>" + item.Year + "</span>" +
"</td>" +
//added
Doesn't this need to be the button? E.g.
<td><button onclick='deleteFunction(item.id)'>Delete</button></td>
I already read the string and build an html table from it:
var ShoesXML = "<All><Shoe><Name>All Stars</Name><BrandName>Converse</BrandName><ReleaseDate>10/2/08</ReleaseDate><Picture>pic.jpg</Picture></Shoe><Shoe><Name>All Star1s</Name><BrandName>Converse1</BrandName><ReleaseDate>11/2/08</ReleaseDate><Picture>pic.jpg</Picture></Shoe></All>";
$(document).ready(function() {
xmlDoc=$.parseXML( ShoesXML );
$(xmlDoc).find("Shoe").each(function(i, n) {
var html = "<tr>\n" +
"<td><span>" + $(n).find("Name").text() + "</span></td>\n" +
"<td>" + $(n).find("BrandName").text() + "</td>\n" +
"<td>" + $(n).find("ReleaseDate").text() + "</td>\n" +
"<td><img src='" + $(n).find("Picture").text() + "'></td>\n" +
"</tr>";
$("table.shoetable tbody").append(html);
});
});
I tried to set a value this way but no success:
$(n).find("Name").text("NEW VALUE")
Set the .textContext before building HTML string
$(n).find("Name").text("NEW VALUE")
var html = "<tr>\n" +
"<td><span>" + $(n).find("Name").text() + "</span></td>\n" +
"<td>" + $(n).find("BrandName").text() + "</td>\n" +
"<td>" + $(n).find("ReleaseDate").text() + "</td>\n" +
"<td><img src='" + $(n).find("Picture").text() + "'></td>\n" +
"</tr>";
I am trying pagination on the following code. Adding data to the table using JavaScript. Can anyone help me out with how I should go about it?
Any addition or rewrite of the code will be helpful.
function onDeviceReady() {
var queryquery =
var bestbuy = "";
jQuery.getJSON(queryquery, function(resultsbestbuy) {
var productstopdeal = JSON.parse(resultsbestbuy);
bestbuy += "<div class=\"table-container\">" + "<table class=\"table table-filter\">";
for (i = 0; i < productstopdeal.Products.length; i++) {
bestbuy += "<tbody>" + "<tr>" + "<td>" + "<div class=\"ckbox\">" + "<input type=\"checkbox\" id=\"checkbox1\">" + "<label for=\"checkbox1\"></label>" + "</div>" + "</td>" + "<td>" + "" + "<i class=\"glyphicon glyphicon-star\"></i>" + "" + "</td>" + "<td>" + "<div class=\"media\">" + "<a href=";
var pId = urlEncode(productstopdeal.Products[i].Id);
bestbuy += pId;
bestbuy += " class=\"pull-left\">" + "<img src=" + productstopdeal.Products[i].DefaultPictureModel.ImageUrl + " class=\"media-photo\" style=\"height:120px; width:120px;\">" + "</a>" + "<div>" + "<p>" + "<strong><small><strike>MRP: Rs. " + +"/-" + "</strike><br />Offer price: Rs. " + +"/-<br />You save: Rs. " + +"/-</small></strong>" + "</p>" + "</div>" + "<div class=\"media-body\">" + "<p>" + +"</p>" + "</div>" + "<button class=\"btn btn-success\" type=\"button\" id=\"addToCartButton\"><span class=\"glyphicon glyphicon-shopping-cart\"></span> BUY NOW</button>" + "</div>" + "</td>" + "</tr>" + "</tbody>" + "</table>";
}
bestbuy += "</div>";
$('#bestBuy').html(bestbuy);
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="bestBuy"></div>
Corrected code from what i've understood.
jQuery.getJSON(queryquery, function (resultsbestbuy) {
var bestbuy = "";
var productstopdeal = JSON.parse(resultsbestbuy);
bestbuy += "<div class=\"table-container\">"
+ "<table class=\"table table-filter\"><tbody>";
for (i = 0; i < productstopdeal.Products.length; i++) {
bestbuy += "<tr>"
+ "<td>"
+ "<div class=\"ckbox\">"
+ "<input type=\"checkbox\" id=\"checkbox1\">"
+ "<label for=\"checkbox1\"></label>"
+ "</div>"
+ "</td>"
+ "<td>"
+ "<a href=\"javascript:;\" class=\"star\">"
+ "<i class=\"glyphicon glyphicon-star\"></i>"
+ "</a>"
+ "</td>"
+ "<td>"
+ "<div class=\"media\">"
+ "<a href='";
var pId = urlEncode(productstopdeal.Products[i].Id);
bestbuy += pId;
bestbuy += "' class=\"pull-left\">"
+ "<img src='" + productstopdeal.Products[i].DefaultPictureModel.ImageUrl + "' class=\"media-photo\" style=\"height:120px; width:120px;\">"
+ "</a>"
+ "<div>"
+ "<p>"
+ "<strong><small><strike>MRP: Rs. " + +"/-"
+ "</strike><br />Offer price: Rs. " + + "/-<br />You save: Rs. " + +"/-</small></strong>"
+ "</p>"
+ "</div>"
+ "<div class=\"media-body\">"
+ "<p>" + + "</p>"
+ "</div>"
+ "<button class=\"btn btn-success\" type=\"button\" id=\"addToCartButton\"><span class=\"glyphicon glyphicon-shopping-cart\"></span> BUY NOW</button>"
+ "</div>"
+ "</td>"
+ "</tr>"
}
bestbuy += "</tbody></table></div>";
$('#bestBuy').html(bestbuy);
});
I have an html and javascript page rendered through python django, where I have a form data of 30 entries maximum in each page, that can be edited. I included a hidden field with the same form data to extract the old, and modified values in the form. I am looking for extracting just the delta (old and new values for the field that was changed). My code is
{%extends 'base.html'%}
{%block content%}
<h4> Search results</h4>
<p id="data"></p>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
}
</style>
<script>
function onEdit(btn)
{
var id=btn.id;
var before = '';
var after = '';
var input = document.getElementsByName("new"+id);
if(btn.value=="Edit") {
//var input = document.getElementsByName("name"+id);
for(i = 0;i < input.length; i++) {
document.getElementById(input[i].id).removeAttribute("Readonly");
} //End of for loop
document.getElementById(id).value="Save";
return false;
}
if(btn.value=="Save") {
for(i = 0;i < input.length; i++) {
document.getElementById(input[i].id).setAttribute("Readonly", "readonly");
}
document.getElementById(id).value="Edit";
return false;
}
} // End of Function onEdit()
{% autoescape off %}
var data = {{ search|safe }}; //search is the key defined in django view and will be substituted with the json value
{% endautoescape %}
text = ''
var out = '<form name="display" id="update" method="post" action="update/">';
out += "<table style=\"width:50%\">";
out += "<tr>";
out += "<th>Domain</th>";
out += "<th>Points to</th>";
out += "<th>Type</th>";
out += "<th>TTL</th>";
out += "<th>MX priority</th>";
out += "<th>Recorded generated on</th>";
out += "<th></th>";
out += "</tr>";
var i
var id = 0;
for ( var i = 0; i < data.records.length; i++) {
id = id + 1;
out += "<tr><td>" +
"<input readonly='readonly' name='new" + id + "' id='" + data.records[i].domain + "' value='" + data.records[i].domain + "'type='text'/>" +
"<input type='hidden' name='old" + id + "' id='" + data.records[i].domain + "' value='" + data.records[i].domain + "'type='text'/>" +
"</td><td>" +
"<input readonly='readonly' name='new" + id + "' id='" + data.records[i].record_points_to + "' value='" + data.records[i].record_points_to +"'type='text'/>" +
"<input type='hidden' name='old" + id + "' id='" + data.records[i].record_points_to + "' value='" + data.records[i].record_points_to + "'type='text'/>" +
"</td><td>" +
data.records[i].record +
"</td><td>" +
"<input readonly='readonly' name='new" + id + "' id='" + data.records[i].ttl + "' value='" + data.records[i].ttl + "'type='text'/>" +
"<input type='hidden' name='old" + id + "' id='" + data.records[i].ttl + "' value='" + data.records[i].ttl + "'type='text'/>" +
"</td><td>" +
data.records[i].priority_mx +
"</td><td>" +
data.records[i].generated_on +
"</td><td>" +
"<input id='" + id + "' value='Edit' onclick='return onEdit(this)' type='button'/>" +
"</td></tr>";
}
out += "</table>"
total = data.meta.total_records
page = data.meta.page
records_returned = data.records.length
records_shown = ((data.meta.page - 1) * 30) + data.records.length
out += records_shown + " returned of " + total
page = data.meta.page + 1
link = window.location.href
out += "<input type='hidden' name='currenturl' value='" + link + "'>"
if (records_shown == total){
out += " End "
}
else{
url ="<a href='" + updateQueryStringParameter(link, "page", page) + "'> Next"
out += url
}
function updateQueryStringParameter(uri, key, value) {
var re = new RegExp("([?&])" + key + "=.*?(&|$)", "i");
var separator = uri.indexOf('?') !== -1 ? "&" : "?";
if (uri.match(re)) {
return uri.replace(re, '$1' + key + "=" + value + '$2');
}
else {
return uri + separator + key + "=" + value;
}
}
//out += '<input style="position: relative; left: 550px;" type="submit" value="Submit">';
out += '<br>'
out += '<button type="submit" class="btn btn-default">Submit</button>'
out += '</form>';
document.getElementById("data").innerHTML = out
</script>
{%endblock%}
What is the best way to do this?