|
Thanks Richard - I probably ought to have known that!
|
|
|
|
|
I feel I'm pretty close here. I have like 5 phone number inputs, and instead of adding a event attribute in the input element, I thought I would just use a class called phoneNumber and loop all the element to ad an event listener. I'm close, just missing the glue to pass on the element value to the phone number function I stole off the internet and tweaked a bit.
I've done this before in typescript. But I've been really deep in this PHP project I've been working on. I can see the value of using inspector in the event, but PHP Storm isn't suggesting anything for it.
On my for loop, must examples used the index type loop, but I wanted to be a little more ES6 with it. Not sure if it's a good idea or not.
document.addEventListener("DOMContentLoaded",() => {
const phoneInputs = document.getElementsByClassName('phoneNumber');
for (phoneInput of phoneInputs) {
phoneInput.addEventListener('keydown', (e) => {
console.log(e.id);
formatPhoneNumber(e.value)
});
}
});
If it ain't broke don't fix it
Discover my world at jkirkerx.com
|
|
|
|
|
After some more reading, some articles said that this will be available within addEventListener. So I'm just going with it, should work. I have to wait for my DEV server to become available again to test it.
document.addEventListener("DOMContentLoaded",() => {
const phoneInputs = document.getElementsByClassName('phoneNumber');
for (let phoneInput of phoneInputs) {
phoneInput.addEventListener('keydown', () => {
formatPhoneNumber12(this.value)
});
}
});
If it ain't broke don't fix it
Discover my world at jkirkerx.com
|
|
|
|
|
That didn't work at all. Fiddled with it for about 30 minutes on the DEV test server this time and came up with this that works for me in this format xxx-xxx-xxxx
document.addEventListener("DOMContentLoaded",() => {
const phoneInputs = document.getElementsByClassName('form-control phoneNumber');
for (let phoneInput of phoneInputs) {
phoneInput.addEventListener('keydown', event => {
event.target.value = formatPhoneNumber12(event.target.value);
});
}
});
function formatPhoneNumber12(value) {
if (!value) return value;
const phoneNumber = value.replace(/[^\d]/g, "");
const phoneNumberLength = phoneNumber.length;
if (phoneNumberLength < 4) return phoneNumber;
if (phoneNumberLength < 7) {
return `${phoneNumber.slice(0, 3)}-${phoneNumber.slice(3)}`;
}
return `${phoneNumber.slice(0, 3)}-${phoneNumber.slice(
3,
6
)}-${phoneNumber.slice(6, 9)}`;
}
If it ain't broke don't fix it
Discover my world at jkirkerx.com
|
|
|
|
|
NB: This will only add the event handler to matching elements which exist at the point when your code is run. If you modify the document at any point to add new matching elements, they will not have the event handler attached.
You would probably be better off using event delegation[^]. Since you'd only have a single event handler, it can even be more efficient.
document.addEventListener("keydown", (e) => {
const el = e.target;
if (el.classList.contains("phoneNumber")) {
console.debug(el.id, el.value);
el.value = formatPhoneNumber(el.value);
}
});
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
I wasn't thinking of that situation when I composed it. It's a customer form, with their home, office, cell phone numbers. I just needed to make sure that the user followed the format of xxx-xxx-xxxx.
So your saying that I don't have to wait until the Dom is loaded to add the keypress event?
I just thought it was the right thing to do. I'll give it a try.
If it ain't broke don't fix it
Discover my world at jkirkerx.com
|
|
|
|
|
|
Right now the company, only has offices in California, a single state. So I did add all 50 states at least. And I did use type="tel" as well, standard procedure for me over the last 3 years. My options are limited on this project, because I'm using the existing database created in 2003. This project is a reimagination of code , or the existing project to bring it up to PHP 8 and modern browsers in 2021.
I just tried your suggestion, and I don't have to wait for the DOM to load before adding the listeners. I also thought I had to iterate the HTML Collection to hit each phone input, which is not the case. That's pretty slick Richard.
If it ain't broke don't fix it
Discover my world at jkirkerx.com
|
|
|
|
|
I just read the link reference, and now I get what your suggesting. What a radical concept! I guess I was on the right track by changing my design to not use an element attr for the event. But I was still thinking on a individual element level, and not a unlimited collection as a whole. Too bad the customer won't appreciate it.
If it ain't broke don't fix it
Discover my world at jkirkerx.com
|
|
|
|
|
<br> I am working on a `puzzle game` and I use `snap.svg` and javascript to move the elements of the game . But the problem is that any user can drag the element of svg anywhere on the screen, including out of the droppable area. I want to prevent it , I found some resources on internet about snap.svg but it doesn't like i want
I share the code here :
https://jsfiddle.net/j058aoyn/2/
|
|
|
|
|
I changed to a new machine and from Visual Studio 2017 to Visual Studio 2019 I started getting the following errors when I was running watch command as below, which I used to do from the beginning
PS C:\GitSrsCodes\IMS\IMS.Ember> ./watch
npm WARN file-loader@4.2.0 requires a peer of webpack@^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN less-loader@5.0.0 requires a peer of webpack@^2.0.0 || ^3.0.0 || ^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN sass-loader@8.0.0 requires a peer of webpack@^4.36.0 but none is installed. You must install peer dependencies yourself.
npm WARN style-loader@1.0.0 requires a peer of webpack@^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN uglifyjs-webpack-plugin@2.2.0 requires a peer of webpack@^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN webpack-cli@3.3.10 requires a peer of webpack@4.x.x but none is installed. You must install peer dependencies yourself.
npm WARN ims-ember@1.0.0 No description
npm WARN ims-ember@1.0.0 No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
updated 2 packages and audited 2375 packages in 14.249s
18 packages are looking for funding
run `npm fund` for details
found 348 vulnerabilities (17 low, 1 moderate, 330 high)
run `npm audit fix` to fix them, or `npm audit` for details
webpack is watching the files…
(node:14388) [DEP_WEBPACK_WATCH_WITHOUT_CALLBACK] DeprecationWarning: A 'callback' argument need to be provided to the 'webpack(options, callback)' function when the 'watch' option is set. There is no way to handle the 'watch' option without a callback.
(Use `node --trace-deprecation ...` to show where the warning was created)
assets by chunk 1.37 MiB (auxiliary name: app)
assets by path *.png 4.17 KiB 5 assets
assets by path *.svg 540 KiB 2 assets
assets by path *.eot 182 KiB 2 assets
assets by path *.ttf 206 KiB 2 assets
assets by path *.woff 119 KiB 2 assets
assets by path *.woff2 93 KiB 2 assets
asset login-bg.jpg 248 KiB [compared for emit] (auxiliary name: app)
asset loading.gif 8.28 KiB [compared for emit] (auxiliary name: app)
assets by path *.js 23.9 MiB
asset libs.js 9.98 MiB [compared for emit] (name: libs)
asset app.js 6.73 MiB [compared for emit] (name: app)
asset templates.js 6.48 MiB [compared for emit] (name: templates)
asset polyfill.js 681 KiB [compared for emit] (name: polyfill)
runtime modules 3.13 KiB 15 modules
modules by path ./app/ 3.05 MiB 584 modules
modules by path ./node_modules/ 4.6 MiB 495 modules
modules by path ./helpers/ember
Any help please if possible?
|
|
|
|
|
I suspect your global cache of NPM modules is on your old machine, and didn't copy over to your new machine. Rebuilding this is tough to do and requires reading up. There is no exact fix. Same thing happen to me, and I had to rebuild my package.json and global cache.
If it ain't broke don't fix it
Discover my world at jkirkerx.com
|
|
|
|
|
Hi , I am looking for the solution . Please tell me how to use dynamic variable in this below code. I mean how to mention data varibale to get the the data of form varible..?
var form ='some data ';
var data='form';
$('selector').replaceWith(data);
|
|
|
|
|
IMO, that's j Query and nobody uses that anymore. It was replaced with vanilla JavaScript about 6 years ago. It looks like your mixing Javascript with jQuery. I haven't written a line of jQuery in 4 years now, and can't remember it anymore.
If it ain't broke don't fix it
Discover my world at jkirkerx.com
|
|
|
|
|
How to deskew a page of pdf document which is loaded through pdf.js
|
|
|
|
|
I need a Wrapper or a Class that can control the Max Length of an Array on setting a value... It might be possible with a Prototype too, which is fine...
let myArray = new ArrayClassThing();
myArray.setMax = 50;
myArray[50] = "Foo";
myArray[51] = "Bar";
Javascript is different than Ruby where you can use special characters to define Getter and Setter methods:
class Array_Wrapper
def initialize
@data = []
end
def [](id)
if id <= 50 and @data[id]
return @data[id]
end
end
def []=(id,value)
if id <= 50
@data[id] = value
end
end
As far as I understand, cant use a "[]" as a Getter or Setter Method, and I need something that can do exactly that, just to control a Static Maximum, like in the first code block... Perhaps a better question to ask is how to define Getter and Setter Method WITHOUT A PROXY (which I KNOW is damn well good and possible) of a Class Prototype, but from inside the constructor (which I also know is syntactical sugar)...
Can anyone help out with this?
|
|
|
|
|
In this code we're initializing x using = operator but isn't {} an object and we use key value pair by using : operator?
let x = 1;
{
let x = 2;
}
console.log(x);
|
|
|
|
|
Braces have multiple uses in JavaScript. In this case, they denote a new block:
block - JavaScript | MDN[^]
The code demonstrates the scoping rules which apply to variables declared with the let keyword:
let - JavaScript | MDN[^]
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
Thanks mate 
|
|
|
|
|
I have some difficulties with a multiple select (ID:VALUE).
My Goal is to make a multiselect pulldown (like gender-sample) with the difference that i want to see only the text not the value's (value's are my Database ID's).
First off all I am pretty new with the tabulator library and still learning
Now I wrote some code witch works fine when you place only one id in a dataset-row, with multiply id's the view looks good but when you open this select for the firsttime ID's are placed as text in cell and there are no options selected in the pulldown. When you select some everything works like I want.
I'll think i am missing some intitalize code? Or do I need a customeditor too?
This is my code:
{
title: "City",
field: "citycode",
editor: "select",
editorParams:
{
multiselect:true,
values: city
},
cellClick:function(e, cell)
{
},
formatter: function(cell, formatterParams, onRendered)
{
var row = cell.getRow();
var rowIndex = row.getIndex();
sel = document.createElement('select');
sel.style.width = '100%';
sel.style.color = 'lime';
sel.style.height = '40px';
sel.style.position = "relative";
sel.style.border = 'none';
sel.style.background = 'inherit';
var cellContent = '';
if (cell.getValue() !== undefined) {
var cellStr = cell.getValue().toString();
var cityArr = cellStr.split(",");
var i;
for (i = 0; i < cityArr.length; i++) {
if (i > 0) cellContent += ',';
cellContent += city[cityArr[i]];
}
}
sel.innerHTML = '' + cellContent + ''; // Show the text in UI instead of Value.
var mess = document.getElementById("message"); //refer to the div tag
mess.innerHTML = cell.getValue(); //set text in the div tag
return sel;
}
},
|
|
|
|
|
I created a web API made with node express and MSSQL database. When I request to the API at first time, it's response time is about 2000ms. But after that, it works less then 200ms. The problem only happens when I first time call the API, or after idle for minutes.
I tried to access from multi devices. The problem seems happens on every 'first time' request of each device.
|
|
|
|
|
I need some help!
type: 'POST',
url: $("#relpath").val() + 'sendmailcvalidation.php',
data: $("#sendmail").serialize(),
success: function(data) {
data=data.trim();
if(data == "false") {
alert("Erreur lors de l'envoi du message");
mailsendstatus = false;
$("#cvalidationlabel").children(".err").fadeIn('slow');
}
else if(data == "badcapcha"){...}
|
|
|
|
|
You've forgotten to ask a question.
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
Hello,
I am using a JS sniplet code from the web that is 8yr old or so and it is now giving me a console error in FF dev tools. DOMException: Permission denied to access property "frameElement" on cross-origin object...
I am using this code to inject a css style sheet into twitter so it can be styled on my website here.
Fantasy Football: Waterboys[^]
The code origin is found here.
GitHub - kevinburke/customize-twitter-1.1: Add your own custom CSS to modify the Twitter Embeddable Widget[^]
I dont have much expertise in JS and was trying to see if this error is something i will have to live with or the JS file can tweaked with newer code to work around this error and display properly with the css injection?
Of course I am always looking for a better mouse trap to achieve this goal if things have changed with newer coding etc...
MY CODE
<table id="nfltweets" class="report"><caption><span>NFL Tweets</span></caption><tr><td>
<!-- TWITTER -->
<script src="//dagrafixdesigns.com/scripts/twitter.js" type="text/javascript">
</script>
<script>
var options = {
"url": "//dagrafixdesigns.com/Images/2008/DA_2019/zSticks_15387/WB_Twitter.css"
};
CustomizeTwitterWidget(options);
</script>
<a class="twitter-timeline"
data-chrome="noheader noborders transparent nofooter noscrollbar"
data-link-color="#117dff"
width="100%" height="600"
data-theme="dark"
data-dnt="true"
data-widget-id="344811004590424064"
href="//twitter.com/DA_Sticks/lists/dagrafix?ref_src=twsrc%5Etfw"></a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'https':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</td>
</tr>
</table>
Thanks for all feedback and help.
-Stix
|
|
|
|
|
If you have a problem with something from GitHub, it's best to report the problem in that project's "Issues". That way, the author(s) will be notified, and will have a chance to respond.
Issues · kevinburke/customize-twitter-1.1 · GitHub[^]
The error is probably something you can't fix. Script from one domain should not be able to modify documents loaded from another domain unless that other domain explicitly allows it. Imagine the chaos if evilbadguys.com could embed a frame to yourbank.com and then interact with the document to transfer all of your money to their account!
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
General 
News 
Suggestion 
Question 
Bug 
Answer 
Joke 
Praise 
Rant 
Admin 
Submit an article or tip
