We Keep Coding

HTML content is not being cleared by innerHTML, just added to the bottom of previous loaded content

For a university project, I'm displaying jobs in Leeds using mainly JavaScript and JSON. The idea is that the JSON part-time file is shown on page load, then a user can select a different job category and then it loads the new JSON file and replaces the HTML.
I believe my code is almost there, I've attempted to figure out how to call a function again as my previous code had lots of repetition. However, instead of replacing the innerHTML when an option is selected, it just adds the new content to the bottom of the previous option's HTML. I can't figure out why this is?
I've attempted to clear the ID before the function starts again but this doesn't work. Perhaps I'm not calling my functions correctly?
Any help would be greatly appreciated!
window.onload = function() {
var jobURL = "";
//Run function
loadJobs();
//If dropdown is changed
function change(){
var jobType = document.getElementById("jobtype");
var selectedValue = jobType.options[jobType.selectedIndex].value;
if (selectedValue == "part") {
var jobURL = "https://example.com/reed_parttime.php";
}
if (selectedValue == "temp") {
var jobURL = "https://example.com/reed_temp.php";
}
if (selectedValue == "graduate") {
var jobURL = "https://example.com/reed_graduate.php";
}
return jobURL;
}
document.getElementById("jobtype").onchange = change;
//Show jobs function
function loadJobs() {
document.getElementById("results").innerHTML = "";
var URL = change();
$.getJSON(URL, function(data) {
data.results.forEach(function(jobinfo) {
HTMLTemplate += `
<div class="row">
<a href="${jobinfo.jobUrl}" target="_blank">
<p>${jobinfo.jobTitle}</p>
<p>${jobinfo.employerName}</p>
<p>${jobinfo.jobDescription}</p>
</a>
</div>
`;
});
document.getElementById("results").innerHTML = HTMLTemplate;
});
}
//Repeat function again when button is clicked
document.getElementById("submitBtn").addEventListener("click", loadJobs);
}

Display a waiting gif during a javascript function

I write a script to get a text file, to modify this texter file and then I import the file in our software.
The problem is that the import of the file is very slow (just this part of the script could take more than 1 minute sometime).
I would like to display a waiting gif during this process, so the user can see that the process is running, and he need to wait.
Some precision:
- It's only a javascript file with no html page
- The script is launched with a button in our software and I have access to ActiveXObject if necessary
Here is a sample code :
function importFec()
{
var iOpenDlg = 1;
var sPath = "Deskop";
var sTypes = "Fichier Texte (*.txt)|*.txt";
var sExt = "txt";
//Allow me to select a file in Windows
cheminFEC = fileDialog(iOpenDlg, sPath, sTypes, sExt);
var fso = new ActiveXObject("Scripting.FileSystemObject");
var ForReading = 1;
var f1 = fso.OpenTextFile(cheminFEC, ForReading);
var texte = f1.ReadAll();
var tableauFEC = [];
var tableauTest = [];
tableauFEC = texte.split(/\r\n/);
tableauTest = tableauFEC[0].split("\t");
var delimiter = "\t";
if (tableauTest.length == 1)
{
tableauTest = tableauFEC[0].split("|");
var delimiter = "|";
}
var nbColonne = tableauTest.length;
for (var i=0;i<tableauFEC.length;i++)
{
var tab = tableauFEC[i].split(delimiter);
tableauFEC[i] = new Array(25);
for (var j=0;j<nbColonne;j++)
{
tableauFEC[i][j] = tab[j];
}
}
//Make some change in the table to adapt my texte file
//Then create a new texte file C:\\FichierFEC\\FECModifie.txt
createNewFEC(tableauFEC);
var cwfConfiguration = Application.ApplicationInfo("ProgramPath")+"\\Library\\ImportFEC\\ImportFEC23032017.vgl"
var oImport = Import(ipASCII)
oImport.ImportComponents = CWImportComponents.icGeneralLedger
oImport.ASCIILayoutFile = cwfConfiguration
oImport.ASCIIDataFile = "C:\\FichierFEC\\FECModifie.txt"
//This is the function which take a long moment to execute
oImport.RunImport()
}
Thanks for your answer and explanation

I finnaly found another solution.
At the beggining of my script, I launch a .hta file with a GIF and a small texte.
At the end of my script, I close the .hta file
Thanks

Call to database from Javascript in aspx page

I have a gridview using devexpress tools that is populated on page load. When I select a row I have button that will allow me to edit the information in that row by popping up an edit box that allows me to change the information. The issue I am having is when they click that button the data that was behind the gridivew could have changed so I want to be able to query the database again (using some parameters from the selected row) when that edit button is clicked.
Here is the query that is ran when the 'edit' button is clicked.
function ShowPopupEditInventory() {
$.when(getFocusedInventory()).then(function (x) {
popupControlEditInventory.Show();
});
function getFocusedInventory(s, e) {
grid.GetRowValues(grid.GetFocusedRowIndex(), 'StorageLocation;LP;Sku_Alpha;LotCode;ExpirationDate;FIFOReferenceDate;ManufactureDate;InventoryStatus;SellableUnitQuantity;ReceiveDate;InventoryDetailID;Area', getFocusedInventoryValues);
}
function getFocusedInventoryValues(values) {
var fStorageLocation = values[0];
var fLP = values[1];
var fSku_Alpha = values[2];
var fLotCode = values[3];
var fExpirationDate = values[4];
var fFIFOReferenceDate = values[5];
var fManufactureDate = values[6];
var fInventoryStatus = values[7];
var fSellableUnitQuantity = values[8];
var fReceiveDate = values[9];
var fInventoryDetailID = values[10];
var fArea = values[11];
editInventoryStorageLocation.SetText(fStorageLocation);
editInventoryLP.SetText(fLP);
editInventoryItem.SetText(fSku_Alpha);
editInventoryQty_OldValue.SetText(fSellableUnitQuantity);
editInventorySts_OldValue.SetText(fInventoryStatus);
editInventoryLot_OldValue.SetText(fLotCode);
txtEditInventoryLot.SetText(fLotCode);
$(".editInventoryLot").val(fLotCode);
editInventoryStatus.SetValue(fInventoryStatus)
editInventoryUnitQuantity.SetText(fSellableUnitQuantity);
editInventoryDTL_No.SetText(fInventoryDetailID);
editInventoryNotes.SetText('');
$(".editInventoryAdjustmentCode").prop("selectedIndex", 0);
editInventoryArea.SetText(fArea);
editInventoryLot.Focus();
btnOKEditInventory.SetEnabled(true);
}
}

JQuery multiple input fields of each row keyup function not working

Hello I am trying to make my jquery code in working order but its not working at all, I don't know whats a problem behind it but it contains multiple text boxes in multiple rows, each row calculates its own sum
Here is Fiddle link
Here is my Code
$(document).ready(function(){
$('.employee input[type="text"]').keyup(function() {
var basic_salary = parseInt($('input[name^=txtMonthlyRate]').val());
var advance_salary = parseInt($('input[name^=txtAdvance]').val());
var recover_comm = parseInt($('input[name^=txtRecovery]').val());
var sales_comm = parseInt($('input[name^=txtSales]').val());
var deduction_salary = parseInt($('input[name^=txtDeduction]').val());
var adjustment_salary = parseInt($('input[name^=txtAdjustment]').val());
var total_sum = ((basic_salary+recover_comm+sales_comm) - (deduction_salary + advance_salary)) + adjustment_salary;
$('input[name^=txtTotal]').val(total_sum);
console.log(total_sum)
);
});

The txtSales1, txtDeduction1, txtAdjustment1 variables are camel cased in your javascript, but not on the html input name. So these return NaN.
UPDATE Also, you need to set the context of what you're referring to using the second parameter of a selector function:
$('.employee input[type="text"]').keyup(function(e) {
var $scope = $(this).closest('.employee');
var basic_salary = parseInt($('input[name^=txtMonthlyRate]', $scope).val());
var advance_salary = parseInt($('input[name^=txtAdvance]', $scope).val());
var recover_comm = parseInt($('input[name^=txtRecovery]', $scope).val());
var sales_comm = parseInt($('input[name^=txtSales]', $scope).val());
var deduction_salary = parseInt($('input[name^=txtDeduction]', $scope).val());
var adjustment_salary = parseInt($('input[name^=txtAdjustment]', $scope).val());
var total_sum = ((basic_salary+recover_comm+sales_comm) - (deduction_salary + advance_salary)) + adjustment_salary;
$('input[name^=txtTotal]', $scope).val(total_sum);
});

The txttotal1 needs to be changed to txtTotal1
The fiddle needs a closing }

how to get username via checked checkbox with javascript or jquery?

i
HTML
<div id="notApprovedUsers">
</div><button onclick="approveUsers()">Approve</button>
</div>
i like to get checked users in parameter userList to work with.
here is javascript there me generating list with users and checkboxes.
i like to approve just the checked one's of course!
JavaScript
function getNotAssignedUsers() {
server.getUsersByGroup("1eb33e30-c355-467f-af3c-e7d0b4a1fgt5").then(function (userDetails) {
debugger;
for (var i = 0; i < userDetails.length; i++)
{
var vorname = userDetails[i].firstName;
var nachname = userDetails[i].lastName;
var newCheckBox = document.createElement('input');
newCheckBox.type = 'checkbox';
newCheckBox.id = "0"+i;
document.getElementById("notApprovedUsers").appendChild(newCheckBox);
var newElement = document.createElement('div');
newElement.id = i;
newElement.className = "notApprovedUsers";
newElement.innerHTML = vorname + " " + nachname;
document.getElementById("notApprovedUsers").appendChild(newElement);
}
});
}
HERE in userList I need to read just a checked users..
function approveUsers(userList)
{
var user1 = document.getElementById("00").checked;
var user2 = document.getElementById("01").checked;
var user3 = document.getElementById("02").checked;
alert(user1 || user2 || user3);
}

You want something like this then. There may be errors as I havent tested
var names = [];
$('input[type=checkbox]:checked').each(function(index, value){
var name = $(value).next("div").html();
names.push(name);
});
Then do something with the names array
Edit - See jsfiddle http://jsfiddle.net/vpg3r/3/

I think the best solution for you here is to use jQuery. You can use something like:
$('#notApprovedUsers input[type=checkbox]:checked')
to get all the elements that are checked, and work with them.
I've created a JSFiddle for you to demonstrate how to implement the behavior that I'm describing. You can see it in this link.