We Keep Coding

Dynamic Dropdown Menu using 'switch' Javascript Not Working

I have this script at the document level (simplified) on a PDF:
function SetFieldValues(){
var Model = this.getField("Model");
var Armor = this.getField("Armor");
var Winch = this.getField("Winch");
var Test1 = this.getField("Test1");
var Test2 = this.getField("Test2");
if(event.willCommit) {
switch(event.value) {
case "015305676":
Model.value = "AMK23";
Armor.value = "YES";
Winch.value = "NO";
Test1.setItems[("Not Applicable")];
Test2.setItems[("-", "Serviceable", "Unserviceable")];
break;
}}}
This event is kicked off by the Custom Keystroke on the form's initiating dropdown list:
if( event.willCommit )
{
if(event.value == "-")
this.resetForm(["Model","Armor","Winch"]);
else
SetFieldValues(event.value)
}
All the fields update appropriately (Model, Armor, and Winch) however, the "Test" combo boxes do not populate as expected.
I then tried it a different way with this (which I thought would be genius using an array ...pfft... I was wrong):
function SetFieldValues(){
var Model = this.getField("Model");
var Armor = this.getField("Armor");
var Winch = this.getField("Winch");
const ArmorArray = [field='Test1', field='Test2'];
var ArmorArray;
var CheckOptionsY = {
Yes: [["-"],["Serviceable"],["Unserviceable"]],
};
var CheckOptionsN = {
No: [["Not Applicable"]],
};
if(event.willCommit)
{
switch(event.value) {
case "015305676":
Model.value = "AMK23";
Armor.value = "YES";
Winch.value = "NO";
ArmorArray.setItems[(CheckOptionsY)];
break;
}}}
Again, the fields update no problem (Model, Armor, and Winch) but the "Test" fields do not update with the combo box list options. What did I do wrong? How can I get these "Test" combo boxes to load with the appropriate 'Yes' / 'No' options?

How to click on a dynamically created link to then create a new dynamic page from that link?

I wrote an custom API(node.js app) that gets the info about the blogs from medium.com, right now there is
the author/main pic of the article,
title,
link to the article on medium.com(redundant),
the entire article text, in the JSON output.
Sample API/JSON:
{
"img": [
"https://upload.wikimedia.org/wikipedia/commons/4/42/Blog_%281%29.jpg"
],
"title": [
"The old and the new or not so new: Java vs JavaScript"
],
"link": [
"https://medium.com/#aki9154/the-old-and-the-new-or-not-so-new-java-vs-javascript-760f84e87610?source=rss-887f1b1ddb75------2"
],
"desc": [
"<p>It’s funny how the name JavaScript makes you believe that it is somehow..."
]
}
Then i am polling this API/JSON and spitting out the output in a thumbnail format, basic html for now(no design/CSS).
Where i am stuck is when a user clicks on a thumbnail and i need to make sure that i display the correct article?!
For which i need to display a new page when the thumbnail/article is clicked, i can use #4 from JSON above as an output for that dynamically created new page and put it out nicely)
The issue that i am facing now is how to dynamically produce the correct article when the dynamically created link is clicked?
Right now nothing happens when i click on the thumbnail and that's what this project link displays...
I did some stackoverflow research and read some jQuery docs(event propagation and more...) and was able to make changes to the index.js, below is how it looks like but nothing works, any help will be appreciated...
index.js:
$(function () {
var desc = "";
function newWin() {
var w = window.open();
$(w.document.body).html('<p>'+desc+'</p>');
}
var $content = $('.cards-in-grid');
var url = 'link-for private use now';
$.get(url, function (response) {
var output = '';
console.log(response);
$.each(response, function (k, item) {
title = item.title;
var author = item.img;
desc = item.desc;
output += '<li><img src="'+author+'" alt=""><h2>' + title + '</h2></li>';
$(".cards-in-grid ul").on("click", "li", function(){
newWin;
});
return k;
});
$content.html(output);
});
});

`
$(function () {
var $content = $('.cards-in-grid');
var url = 'link-for private use now';
$.get(url, function (response) {
var output = '';
var list = "li";
$.each(response, function (k, item) {
var listNum = list+k;
var idy = "#"+listNum;
var desc = "";
title = item.title;
var author = item.img;
desc = item.desc;
//GIVE ID to each LI using a variable
output += '<li id="'+listNum+'"><img src="'+author+'" alt=""><h2>' +
title + '</h2></li>';
$content.html(output);
$content.on("click",idy, function(){
var w = window.open();
$(w.document.body).html('<p>'+desc+'</p>');
});
return k;
});
});
});
This worked perfectly, some thinking and pondering and was able to make it work!!
Kindly Upvote the answer, if it helped you! Thanks!

jQuery do not accept new fields in HTML

I try to create a generator for lucky numbers. I did it with C# and now with JavaScript and jQuery. You can see this here. When I add new field - JQ do not see it. Just try to click on numbers in "Your field". I have as standard 7 fields and they work fine but when I add new line script do not recognise it like something useful. Could you give me some advice?

change below js code. check this working plunker
Your code:
$('.spielzahlen').on('click', function() {
var list = []
tablereset()
var item = $(this).text().split(', ')
item.forEach(function(index) {
if (index != "")
list.push(index)
})
console.log($(this).text())
list_temp = list
$(this).empty()
$('#temp').val(list)
var tds = document.getElementsByTagName("td")
list.forEach(function(index) {
var idt = index - 1
tds[idt].className = 'checked'
})
changeLen(list_temp.length)
})
Change it with below code , there is only change in initialization other code are same :
$(document).on('click','.spielzahlen', function() {
var list = []
tablereset()
var item = $(this).text().split(', ')
item.forEach(function(index) {
if (index != "")
list.push(index)
})
console.log($(this).text())
list_temp = list
$(this).empty()
$('#temp').val(list)
var tds = document.getElementsByTagName("td")
list.forEach(function(index) {
var idt = index - 1
tds[idt].className = 'checked'
})
changeLen(list_temp.length)
})

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 make next and previous button in monocle ebook reader using this codes?

I created this function for next and previous button, in other words there are 2 buttons in my html page and when i click next or previous the pages in the monocle will also move accordingly,
i read that i have to use a custom page flipper for this but they have not provided an example of how to create one.
this is what i've tried and fails:
function fileSelected(event,str) {
var thefile = document.getElementById('file');
var tval = thefile.value;
var ext = tval.split('.').pop();
var files = event.target.files;
var fname = tval.split(/(\\|\/)/g).pop();
if (ext == "epub" || ext == "EPUB"){
function createReader(bookData) {
Monocle.Reader("reader", bookData);
}
new Epub(files[0], createReader);
}else if(ext == "htm" || ext == "htm" || ext == "html" || ext == "HTML"){
var bookData = {
getComponents: function () {
return [
fname
];
},
getContents: function () {
return [
{title: "test", src: fname}
]
},
getComponent: function (componentId) {
return {url:componentId};
},
getMetaData: function(key) {
return {
title: "Test documents",
creator: "Aron Woost"
}[key];
}
}
window.reader = Monocle.Reader('reader', bookData);
}else{
return false;
}
}
function next(){
Monocle.Reader('reader', {}, {}, function (reader) {
reader.moveTo({ direction: 1 });
});
}
when clicking next will give an undefined error in my console.
any idea as how to implement a custom page flipper?
https://github.com/joseph/Monocle/wiki/Page-flippers
I am not that savvy in JS. sorry :(

I think the problem is in this block of variable declaration:
var thefile = document.getElementById('file');
var tval = thefile.value;
var ext = tval.split('.').pop();
var files = event.target.files;
var fname = tval.split(/(\\|\/)/g).pop();
Is there any input field with 'value' property applicable, like <input type="text" id="file"> ?
You sure the filename will certainly have a dot in it, i.e. extension?
Also event.target.files looks suspicious.
If there's nothing wrong, please tell which line the console shows error at. You can double click on the error to have the erroneous line highlighted.