Develop Reference

Output Checked Items in Javascript Using Confirm()

I am trying to output the selected checked items from my list (I am using checkboxes) on the alert message on my page. Essentially, when the user hits the Delete button, I want a confirmation box to pop up and show the user which items they have selected to confirm it's correct (in this case, Serial Numbers). By default, all checkboxes are false (unchecked). If a checkbox is checked, the checkbox variable = true. Below is the function I wrote to do this:
function validateDeleteForm() {
var checkboxs=document.getElementsByName("pickSerial");
var okay=false;
for(var i=0,l=checkboxs.length;i<l;i++)
{
if(checkboxs[i].checked)
{
okay=true;
}
}
if(okay)
{
if (confirm("Do you want to delete the selected Serial Number(s) from casting? Hit OK to Delete or CANCEL to re-select: " + this.checkboxs ) == true) { // this will delete selected serial numbers and display
return true;
}
//return true;
else { // this will cancel the delete dialogue and allow user to re-select
return false;
}
}
else {
alert("You have at least one line to be checked");
return false;
}
}
Does anyone see what I am doing wrong? I have tried referencing the checked items doing checkboxs[i].value, this.checkboxs[i], and calling the checkboxs variable but they all show as undefined.
Here is a screenshot of the output currently.
Thank you for any help.

Using querySelectorAll you can right away select all of the checked elements. There is no need to have to loop to find the check ones with this. You can then turn the html collection into an array to get all of the values. You can then use that array to display the info to the use.
const cbs = Array.from(document.querySelectorAll('[name="pickSerial"]:checked'));
const serials = cbs.map(function (cb) { return cb.value; });
if (serials.length) {
console.log(serials.join(",");
}

Adding to your solution, you can create an array to track checked items and then when printing, just use that array
Sample
const checked = [];
// When you are setting okay = true, push that value in checked
checked.push(checkboxs[i].value)
// Now when you are showing it in confirm box just join the array
confirm('text ' + checked.join(', '))
Hope that helps.

How to detect change in input using Angular8

i have edit and close button in same row, if there is any edit made to the input field then it must show an alert message, if no change is made it must retain its old value. My issue here is, i click on edit and do some change to input, when i click on close, i am able to retain new value, but when i click on close, it must revert to old value
TS:
public onEditEvent(event) {
this.editCommitment = event;
}
public onCloseEvent(event){
if(event.policyCT == this.editCommitment.policyCT && event.quotes == this.editCommitment.quotes && event.writtenPremium == this.editCommitment.writtenPremium) {
event.writtenPremium = this.editCommitment.writtenPremium;
event.policyCT = this.editCommitment.policyCT;
event.quotes = this.editCommitment.quotes
this.editableRow = 0;
} else {
alert('change')
}
}
Demo

By default ng-model will update the model.
You need to maintain old value manually when user clicks on edit button. Like below:-
selectedRow: any;
public onEditEvent(event) {
this.selectedRow = { ...event };
this.editCommitment = event;
}
Apply that when user click on close button.
public onCloseEvent(event) {
event.writtenPremium = this.selectedRow.writtenPremium;
event.policyCT = this.selectedRow.policyCT;
event.quotes = this.selectedRow.quotes;
this.editableRow = 0;
}
And on Save click you dont have to do anything as model is already updated.
Working Demo:- https://stackblitz.com/edit/angular-turxyo?file=src%2Fapp%2Fapp.component.ts

Puppeteer Web Crawling Navigation lock on click

I am writing a puppeteer web crawler, what it does is:
Given a list of url in list format
Open each url in puppeteer
Find all buttons present in the web page
Click on each of the button, while listening to the network trace to extract the XHR Post request
Problem
It works fine for non navigation buttons, but for most login/submit button, it will perform a redirect/navigation to a different page, which lead to the following error when trying to perform click for any buttons found in the current page or any action on the original page, and since I don't know which button will trigger the navigation, I need a good way to block navigation from all buttons
Error: Execution context was destroyed, most likely because of a navigation.
I originally thought preventDefault will do the job, but it doesn't really work
I wanted to know if there is a good way to disable page navigation?
Below is my code on extracting and clicking of the buttons
listenAndLogResources() {
this.page.on('console', msg => console.log(msg.text()));
this.page.on('request', (request) => {
let urlBucket = this.resources.get(request.resourceType()) === undefined ?
new Set() :
this.resources.get(request.resourceType());
if (request.resourceType() === "xhr") {
urlBucket.add({
"url": request.url(),
"postData": request.postData(),
"header": request.headers()
});
} else {
urlBucket.add(request.url());
}
this.resources.set(request.resourceType(), urlBucket);
request.continue();
});
}
async findAndClickOnAllButtons() {
return await Promise.all([
this.page.evaluate(() => {
const buttons = document.querySelectorAll('button');
for (let button of buttons) {
button.click((e) => e.preventDefault());
console.log("button clicked");
}
}),
this.page.evaluate(() => {
const inputs = document.querySelectorAll('input');
for (let input of inputs) {
if (input.type === "button" || input.type === "submit") {
input.click((e) => e.preventDefault());
console.log("input clicked");
}
}
})]);
}
Been reading some forums, and people mentioned blocking navigation request
//Prevent navigation
if (request.isNavigationRequest() && request.frame() === this.page.mainFrame() && request.url() !== this.url) {
request.abort();
}
Though it is not working out for me
A simple test against www.facebook.com
document.querySelectorAll('button')[0].click((e) => e.preventDefault())
Doesn't prevent page navigation :(

Close a bootstrap warning when clicking anywhere on page

Bootstrap Warnings Image I have two different types of bootstraps alerts (warning and danger). Danger alerts are always suppose to be on the page no matter what. Warning alerts happen when user clicks on the dropdown list carriers it displays a bootstrap warning notification. User has to click on 'x' for it to close. I need it to work when user click anywhere on the page or by clicking on the 'x'.
HomeController.cs
case "Carrier":
var carrierid = (from foo in db.Carriers
where foo.ID == warningid
select foo.WarningID).Single();
if (carrierid != null)
{
warning = (from warnings in db.Warnings
where warnings.IsActive == true && warnings.Id == carrierid
select warnings.WarningBody).SingleOrDefault();
if (warning != null)
{
warning = ("<div class=\"alert alert-warning alert-dismissible\" id=\"myWarning\" role=\"alert\"><button type=\"button\" class=\"close\" data-dismiss=\"alert\" aria-label=\"Close\"><span aria-hidden=\"true\">×</span></button><strong>" +
warning + "</strong></div>");
}
else
{
warning = "";
}
}
else
{
warning = "";
}
return Json(warning, JsonRequestBehavior.AllowGet);
default:
break;
warningwriter.js
//// warning display script takes a value of warningid and warningcaller
$(document).ready(function () {
var warningid = 0;
var warningcaller = "Universal";
loadWarnings(warningid, warningcaller);
});
$('#Phones').change(function () {
var warningid = $(this).val();
var warningcaller = "Phone";
loadWarnings(warningid, warningcaller);})
$('#Carriers').change(function () {
var warningid = $(this).val();
var warningcaller = "Carrier";
loadWarnings(warningid, warningcaller);})
function loadWarnings(warningid, warningcaller) {
$.getJSON("../Home/LoadWarnings", { warningID: warningid, warningCaller: warningcaller },
function (warning) {
var select = $('#warnings');
select.append(warning);
});
};

As Martin suggested, it's something you need to do in javascript. I haven't tested this, but it would be something like:
$(document).click(function (event) {
$(".alert").hide();
});
This is basically, clicking anywhere on the page will hide any displayed alert.

Since you have two different types of bootstraps alerts (danger and warning). You have to use ".alert-warning" because that is the one you want to get rid of when user did a mouse click anywhere on page. ".alert" is all of the bootstraps alerts, however, if you need to get rid of a certain type you can call the contextual classes(e.g., .alert-success, .alert-info, .alert-warning, and/or .alert-danger. https://v4-alpha.getbootstrap.com/components/alerts/
$(document).click(function (event) {
$(".alert-warning").hide();
});

$(document).ready(function () {
$("#myWarning").click(function () {
$(".alert").alert("close");
});
});
By doing this, u are making two things wrong:
You are binding the click event to an element, that possibly
doesnt exist when the page is loaded.
You are binding the click
event to a restricted element. This means that the alert wont be
closed when u click anywhere on the page. In this case, only clicks on #myWarning will close the alert.
Finally, you should use what #Bryan already posted :)
Edit:
Assuming that u have a set of alerts that u always want to close on page load, add to this elements a way to identify them, for example a class "close-on-screenclick"
$(document).click(function () {
$(".close-on-screenclick.alert").alert("close");
});
.This should close those elements whenever a click is made on the screen

Phonegap - Determine exact element active

I need to change the back button functionality of my phonegap project, which I've succeeded in doing without any problem. The only issue now, is that I need to further change the functionality based on if the user has a certain field selected.
Basically, if the user has clicked in a field with the id of "date-selector1", I need to completely disable the back button.
I was attempting to use document.activeElement, but it only returns the type of the element (input in this case), but I still want the functionality to work when they are in a general input, but not when they are in an input of a specific id.
EDIT
I tried all of the suggestions below, and have ended up with the following code, but still no success.
function pluginDeviceReady() {
document.addEventListener("backbutton", onBackKeyDown, false);
}
function onBackKeyDown() {
var sElement = document.activeElement;
var isBadElement = false;
var eList = ['procedure-date', 'immunization-date', 'lab-test-done', 'condition-onset', 'condition-resolution', 'medication-start-date', 'medication-stop-date', 'reaction-date'];
console.log("[[ACTIVE ELEMENT: --> " + document.activeElement + "]]");
for (var i = 0;i < eList.length - 1;i++) {
if (sElement == $(eList[i])[0]) {
isBadElement = true;
}
}
if (isBadElement) {
console.log('Back button not allowed here');
} else if ($.mobile.activePage.is('#main') || $.mobile.activePage.is('#family') || $.mobile.activePage.is('#login')) {
navigator.app.exitApp();
} else {
navigator.app.backHistory();
}
}

if you're listening for the back button you can add this if statement:
if (document.activeElement == $("#date-selector1")[0]) {
/*disable button here, return false etc...*/
}
or even better (Thanks to Jonathan Sampson)
if (document.activeElement.id === "date-selector1") {
/*disable button here, return false etc...*/
}

You can have a flag set when a user clicks on a field or you can have a click event (or any other type of event) when a user clicks on the field that should disable the back button.
From the documentation it looks like for the specific page that the backbuton is conditional on you can drop back-btn=true removing that back button.
http://jquerymobile.com/test/docs/toolbars/docs-headers.html
If you need complex conditional functionality you can just create your own button in the header or footer, style it using jquery-mobile widgets and implement your own click functionality.