JavaScript Discussion Boards

Re: AddEventListener in vanilla Javascript

jkirkerx17-Jun-21 11:16

17-Jun-21 11:16

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

Re: AddEventListener in vanilla Javascript

jkirkerx19-Jun-21 11:24

jkirkerx

19-Jun-21 11:24

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

JavaScript

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

Re: AddEventListener in vanilla Javascript

Richard Deeming20-Jun-21 23:42

Richard Deeming

20-Jun-21 23:42

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.

JavaScript

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

Re: AddEventListener in vanilla Javascript

jkirkerx21-Jun-21 6:26

jkirkerx

21-Jun-21 6:26

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

Re: AddEventListener in vanilla Javascript

Richard Deeming21-Jun-21 6:31

Richard Deeming

21-Jun-21 6:31

Are you only dealing with people from one country? Don't forget phone number formats will vary for other countries. Smile | :)

If you need international support, this might be useful:
GitHub - google/libphonenumber: Google's common Java, C++ and JavaScript library for parsing, formatting, and validating international phone numbers.[^]
There are ports for other languages as well.

And don't forget there's a specific input type for phone numbers:
<input type="tel"> - HTML: HyperText Markup Language | MDN[^]

"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer

Re: AddEventListener in vanilla Javascript

jkirkerx21-Jun-21 6:41

jkirkerx

21-Jun-21 6:41

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

Re: AddEventListener in vanilla Javascript

jkirkerx21-Jun-21 6:58

jkirkerx

21-Jun-21 6:58

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

how to limit the draggable area in snap.svg?

Member 1269897212-Jun-21 20:45

Member 12698972

12-Jun-21 20:45

<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 am getting the following error while trying to run ./watch for my Ember JS application

simpledeveloper1-Jun-21 19:44

simpledeveloper

1-Jun-21 19:44

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/*.js 49.7 KiB 37 modules
    modules by path ./CSS/ 869 KiB
      modules by path ./CSS/lightbox2/images/ 176 bytes 4 modules
      modules by path ./CSS/*.less 869 KiB 2 modules
      modules by path ./CSS/chosen/*.png 107 bytes 2 modules
      ./CSS/img/login-bg.jpg 47 bytes [built] [code generated]
    modules by path ./.webpack/*.js 57.2 KiB 6 modules
    
    WARNING in ./node_modules/handlebars/lib/index.js 22:38-56
    require.extensions is not supported by webpack. Use a loader instead.
     @ ./app/request/details/DetailsController.js 5:0-35
     @ ./.webpack/webpack-results.js 3:11112-11163
     @ ./.webpack/webpack-app.js 1:0-30
    
    WARNING in ./node_modules/handlebars/lib/index.js 23:2-20
    require.extensions is not supported by webpack. Use a loader instead.
     @ ./app/request/details/DetailsController.js 5:0-35
     @ ./.webpack/webpack-results.js 3:11112-11163
     @ ./.webpack/webpack-app.js 1:0-30
    
    WARNING in ./node_modules/handlebars/lib/index.js 24:2-20
    require.extensions is not supported by webpack. Use a loader instead.
     @ ./app/request/details/DetailsController.js 5:0-35
     @ ./.webpack/webpack-results.js 3:11112-11163
     @ ./.webpack/webpack-app.js 1:0-30
    
    ERROR in ./app/application/ApplicationController.js 5:0-42
    Module not found: Error: Can't resolve 'constants' in 'C:\GitSrsCodes\IMS\IMS.Ember\app\application'
    
    BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
    This is no longer the case. Verify if you need this module and configure a polyfill for it.
    
    If you want to include a polyfill, you need to:
            - add a fallback 'resolve.fallback: { "constants": require.resolve("constants-browserify") }'
            - install 'constants-browserify'
    If you don't want to include a polyfill, you can use an empty module like this:
            resolve.fallback: { "constants": false }
     @ ./.webpack/webpack-results.js 3:46-97
     @ ./.webpack/webpack-app.js 1:0-30
    
    ERROR in ./app/components/tuts-tests/tuts-tests.js 5:0-30
    Module not found: Error: Can't resolve 'os' in 'C:\GitSrsCodes\IMS\IMS.Ember\app\components\tuts-tests'
    
    BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
    This is no longer the case. Verify if you need this module and configure a polyfill for it.
    
    If you want to include a polyfill, you need to:
            - add a fallback 'resolve.fallback: { "os": require.resolve("os-browserify/browser") }'
            - install 'os-browserify'
    If you don't want to include a polyfill, you can use an empty module like this:
            resolve.fallback: { "os": false }
     @ ./.webpack/webpack-results.js 3:9632-9682
     @ ./.webpack/webpack-app.js 1:0-30
    
    ERROR in ./node_modules/ember-source/dist/ember.debug.js 6498:16-37
    Module not found: Error: Can't resolve 'url' in 'C:\GitSrsCodes\IMS\IMS.Ember\node_modules\ember-source\dist'
    
    BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
    This is no longer the case. Verify if you need this module and configure a polyfill for it.
    
    If you want to include a polyfill, you need to:
            - add a fallback 'resolve.fallback: { "url": require.resolve("url/") }'
            - install 'url'
    If you don't want to include a polyfill, you can use an empty module like this:
            resolve.fallback: { "url": false }
     @ ./.webpack/webpack-entry-dev.js 5:0-39
    
    3 errors have detailed information that is not shown.
    Use 'stats.errorDetails: true' resp. '--stats-error-details' to show it.
    
    webpack 5.38.1 compiled with 3 errors and 3 warnings in 23239 ms

Any help please if possible?

Re: I am getting the following error while trying to run ./watch for my Ember JS application

jkirkerx16-Jun-21 14:58

jkirkerx

16-Jun-21 14:58

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

How To Use Dynamic variable in Javascript

pranay kumar 202127-May-21 3:14

pranay kumar 2021

27-May-21 3:14

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);

Re: How To Use Dynamic variable in Javascript

jkirkerx16-Jun-21 15:01

jkirkerx

16-Jun-21 15:01

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

Member 1520321817-May-21 8:58

Member 15203218

17-May-21 8:58

How to deskew a page of pdf document which is loaded through pdf.js

Javascript Array Wrapper or Class

Member 1510027612-May-21 14:23

Member 15100276

12-May-21 14:23

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...

JavaScript

let myArray = new ArrayClassThing();

myArray.setMax = 50; // should be a const value set in Constructor or Prototype

myArray[50] = "Foo";  // This should work fine, I know index starts at 0, but I am not using 0 so total of 50
myArray[51] = "Bar";  // Need to do nothing

Javascript is different than Ruby where you can use special characters to define Getter and Setter methods:

Ruby

# Ruby Code
class Array_Wrapper
  def initialize
    @data = []
  end
  # Getter
  def [](id)
    if id <= 50 and @data[id]
      return @data[id]
    end
  end
  # Setter
  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?

Use of assignment operator inside {}

captain prime30-Apr-21 1:40

captain prime

30-Apr-21 1:40

In this code we're initializing x using = operator but isn't {} an object and we use key value pair by using : operator?

JavaScript

let x = 1;
{
  let x = 2;
}
console.log(x);

Re: Use of assignment operator inside {}

Richard Deeming30-Apr-21 1:49

Richard Deeming

30-Apr-21 1:49

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

Re: Use of assignment operator inside {}

captain prime30-Apr-21 18:23

captain prime

30-Apr-21 18:23

Thanks mate Smile | :)

Multi select with Id:Value init issue - Tabulator.js (Oli Folkerd)

Member 105369227-Apr-21 23:38

Member 1053692

27-Apr-21 23:38

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 Smile | :)

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;
}
},

Node express.js API slow response on first time request

Member 1395114022-Apr-21 1:36

Member 13951140

22-Apr-21 1:36

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.

Help

fielle14-Apr-21 22:17

fielle

14-Apr-21 22:17

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"){...}

Re: Help

Richard Deeming14-Apr-21 22:51

Richard Deeming

14-Apr-21 22:51

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

8yr JS now giving me console error in FF and CHROME

Member 1514660811-Apr-21 9:07

Member 15146608

11-Apr-21 9:07

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

Re: 8yr JS now giving me console error in FF and CHROME

Richard Deeming11-Apr-21 21:29

Richard Deeming

11-Apr-21 21:29

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

Re: 8yr JS now giving me console error in FF and CHROME

Member 1514660812-Apr-21 3:00

Member 15146608

12-Apr-21 3:00

Your bank analogy of explanation is comical to me, the file is only allowing the data that is in the timeline be styled, it isnt allowing it to be changed. The font style is ARIAL and i want the font to be OSWALD, the color is red and i want the color to be blue, simply that is all the css sheet is doing.

I have contacted the author, and he has no time to look into this now, therefore i was reaching out to see if it was something simple that could be fixed in that small script to work in the browsers is all.

Thanks

Re: 8yr JS now giving me console error in FF and CHROME

Richard Deeming12-Apr-21 3:09

Richard Deeming

12-Apr-21 3:09

Member 15146608 wrote:
Your bank analogy of explanation is comical to me, the file is only allowing ...

... the content of the site in the iframe to be accessed and modified by script running on a different site.

Or are you suggesting that the browser should be able to tell the difference between purely cosmetic changes, and changes which might have unintended consequences?

And even purely cosmetic changes could cause problems. The evil site could make the frame almost invisible, and position the required button directly under your mouse cursor, so that wherever you tried to click on the parent site, you ended up clicking the "give all of my money to the bad guys" button on the target site.

You may find the analogy "comical", but the problem was serious enough and prevalent enough for all of the browser companies to update their browsers to address it.

"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.