Develop Reference

Javascript Alternative for Detecting Select Value Which Doesn't Use Xpath in IE?

I had a working solution to grab the value of a select using Xpath. Found out IE doesn't support Xpath and it throws an "XpathResult is undefined" error!!! I'm using a TMS (DTM) so I have to inject my code into the web app. I can't touch the web app code. In researching this, I read that a library (https://github.com/google/wicked-good-xpath) could fix this but I don't have that option. If you go to https://apply.essexcredit.com/ on the first page, you'll see only one select "What type of loan are you interested in? ". I need to set an event listener on this element and grab the value being selected (RV or Boat etc). Is there any other approach I can use to attach an event listener to this and grab the value? Here is the current code I had that works when Xpath is supported:
function _dtmSetProductSel() {
window.addEventListener("click", function() {
var prodSel = document.evaluate("//form/div/div/div/div/div/div/div/div/div/div/div/div/div/div/div[#class='option-selected']", document, null, XPathResult.ANY_TYPE, null).iterateNext();
if (prodSel) {
var currProd = prodSel.getAttribute("title");
if (currProd == "RV" || currProd == "Boat" || currProd == "Auto" || currProd == "Auto-IBG" || currProd == "Investment Line of Credit") {
sessionStorage.setItem("_dtmSelProd", currProd);
}
} else {
setTimeout(_dtmSetProductSel, 1000);
}
});
};

Check if you can use document.querySelector as shown below.
var prodSelCSS = document.querySelector("form div.option-selected")

function _dtmSetProductSel() {
window.addEventListener("click", function() {
var prodSel = document.getElementsByClassName("option-selected");
var tryAgain = true;
for(var i=0;i<prodSel.length;i++) {
var currProd = prodSel[i].getAttribute("title");
if(currProd && (currProd == "RV" || currProd == "Boat" || currProd == "Auto" || currProd == "Auto-IBG" || currProd == "Investment Line of Credit")) {
sessionStorage.setItem("_dtmSelProd", currProd);
tryAgain = false;
break;
}
}
if(tryAgain) {
setTimeout(_dtmSetProductSel, 1000);
}
});
};

xterm.js - Getting current line text

I am developing a small xterm.js application (just getting started), and I am wondering how to get the text from the current line when the user presses enter. Here is the program:
var term = new Terminal();
term.open(document.getElementById('terminal'));
term.prompt = () => {
term.write('\r\n$ ');
};
term.writeln('This is a shell emulator.');
term.prompt();
term.on('key', function(key, ev) {
const printable = !ev.altKey && !ev.altGraphKey && !ev.ctrlKey && !ev.metaKey;
if (ev.keyCode === 13) {
term.prompt();
console.log(curr_line);
var curr_line = ""
} else if (ev.keyCode === 8) {
// Do not delete the prompt
if (term.x > 2) {
curr_line = curr_line.slice(0, -1);
term.write('\b \b');
}
} else if (printable) {
curr_line += ev.key;
console.log(curr_line, ev.key)
term.write(key);
}
});
term.on('paste', function(data) {
term.write(data);
});
Example taken from the xterm.js homepage (and modified)
As you can see, my attempt involves adding to a line of text every time I get a key event (or removing on backspace). However, this does not work because it is inside an asynchronous function.
Does xterm.js ship with another function that allows you to get the current line content, or is there another workaround for it? My Google searches have been to no avail.

Not the most elegant solution, but by moving "curr_line" into the global scope, we can keep it persistent between "on key" events.
var term = new Terminal();
term.open(document.getElementById('terminal'));
term.prompt = () => {
term.write('\r\n$ ');
};
term.writeln('This is a shell emulator.');
term.prompt();
// Move curr_line outside of async scope.
var curr_line = '';
term.on('key', function(key, ev) {
const printable = !ev.altKey && !ev.altGraphKey && !ev.ctrlKey && !ev.metaKey;
if (ev.keyCode === 13) {
term.prompt();
console.log(curr_line);
curr_line = '';
} else if (ev.keyCode === 8) {
// Do not delete the prompt
if (term.x > 2) {
curr_line = curr_line.slice(0, -1);
term.write('\b \b');
}
} else if (printable) {
curr_line += ev.key;
console.log(curr_line, ev.key)
term.write(key);
}
});
term.on('paste', function(data) {
term.write(data);
});
Your question came up in my search for a similar solution, so thank you for submitting it! : )

Polymer 1.0 javascript variable not hitting control statements

I am trying to hide and show certain paper-materials depending on what termiantePlan is. terminatePlan is being passed in from MVC 5 view which is working. Once termiantePlan hits the control statement, its not reading it correctly...the code passes the first if statment because termiantePlan is not null. but once it gets to the second if statement it dosnt read that terminatePlan = "active". Also, If termiantePlan == 'noPlan', i still get this.showTermPlanStatus(terminatedPlan) everytime. I have also tried terminatePlan.indexOf('noPlan') > -1; This doesn't work either.
Polymer({
is: "lithium-terminate-plan",
properties: {
terminatePlan: String
},
observers: [
"termPlan(terminatePlan)"
],
termPlan: function (terminatePlan) {
if (terminatePlan != null || terminatePlan != "active") {
if (terminatePlan == "noPlan") {
this.showTermPlanStatus(noPlanSelected);
} else if (terminatePlan == "error") {
this.showTermPlanStatus(terminatedPlanError);
}
else {
this.showTermPlanStatus(terminatedPlan);
}
} else {
if (this.effectiveDate == null) {
} else {
this.showTermPlanStatus(activePlan);
}
}
},
showTermPlanStatus: function (showTrue) {
this.$.terminatePlanError.hidden = true;
this.$.terminatedPlan.hidden = true;
this.$.noPlanSelected.hidden = true;
this.$.activePlan.hidden = true;
this.$.terminatePlanInProcess.hidden = true;
showTrue.hidden = false;
}
});

window.confirm not working in FireFox

Background:
The goal is to keep a user from going back a page using the backspace. I've created code to disable the the key, except for a few input fields. But if they do, in fact, want to go back, I'd like for the confirm dialog to ask them if they REALLY want to go back or not.
Problem:
The following code works in IE and Chrome, but not FF. The confirm pops up but it still goes 'back' a page. This doesn't happen in IE/Chrome as the confirm dialog waits for user input.
Code:
<script type="text/javascript">
$(document).unbind('keydown').bind('keydown', function (event) {
var doPrevent = false;
if (event.keyCode === 8) {
var d = event.srcElement || event.target;
if ((d.tagName.toUpperCase() === 'INPUT' &&
(
d.type.toUpperCase() === 'TEXT' ||
d.type.toUpperCase() === 'PASSWORD' ||
d.type.toUpperCase() === 'FILE' ||
d.type.toUpperCase() === 'SEARCH' ||
d.type.toUpperCase() === 'EMAIL' ||
d.type.toUpperCase() === 'NUMBER' ||
d.type.toUpperCase() === 'DATE' )
) ||
d.tagName.toUpperCase() === 'TEXTAREA') {
doPrevent = d.readOnly || d.disabled;
}
else {
var r = window.confirm("Leaving the page can cause data to be lost. Are you sure?");
if (!r) {
doPrevent = true;
}
}
}
if (doPrevent) {
event.preventDefault();
//event.stopPropagation();
}
});
</script>

This fixed it and worked in each browser (Safari too):
window.addEventListener("beforeunload", function (e) {
var confirmationMessage = "Leaving the page can cause data to be lost. Are you sure?";
e.returnValue = confirmationMessage; // Gecko and Trident
return confirmationMessage; // Gecko and WebKit
});

Catching the Submit works in Firefox but not in Chrome

I'm using this to catch the submit button press, validate everything, and then either stop it or let it go through, this works in Firefox, but not in Chrome, Chrome lets the form go through empty. I also have a reset function that works in Chrome but in firefox. I'm brand new to js and jquery and could use some help figuring this out since stuff working in one browswer and not in the other confuses the heck out of me :)
(Sorry about having my test alert in there still)
Here's the code:
$("form").submit(function(e){
if (e.originalEvent.explicitOriginalTarget.id=="btn") {
if (bizNameValid==false || bizWebValid==false || bizStreetValid==false || bizCityValid==false || bizStateValid==false || bizZipValid==false || bizPhoneValid==false || firstValid==false || lastValid==false || custStreetValid==false || custCityValid==false || custStateValid==false || custZipValid==false || custPhoneValid==false || custEmailValid==false || monValid==false || yearValid==false || typeValid==false || ccValid==false) {
alert("bizNameValid:" + bizNameValid+"\n bizWebValid:"+bizWebValid+"\n bizStreetValid"+bizStreetValid +"\n bizCityValid: "+bizCityValid+ "\n bizStateValid:"+bizStateValid+"\n bizZipValid: "+bizZipValid+"\n bizPhoneValid:"+bizPhoneValid+"\n firstValid:"+firstValid+"\n lastValid:"+lastValid+"\n custStreetValid:"+custStreetValid+"\ncustCityValid"+custCityValid+"\n custStateValid"+custStateValid+"\n custZipValid:"+custZipValid+"\n custPhoneValid"+custPhoneValid+"\n custEmailValid:"+custEmailValid+"\n monValid:"+monValid+"\n yearValid:"+yearValid +"\n ccValid:"+ccValid+" \nccType:"+typeValid);
e.preventDefault();
return false;
}
else if(total==0) {
$("#svc_desc").append("</br><label id='first_error' style='font-size:16pt;'>You must select a service to continue</label>");
alert("You must select a service to continue");
e.preventDefault();
return false;
}
else {
return true;
}
}
});

try
$("form").submit(function(e){
var target = e.originalEvent || e.originalTarget;
if($(target.srcElement || target.originalTarget).attr('id')=="btn"){
}
//rest of your code
});
ref: https://stackoverflow.com/a/8067990/1679410