We Keep Coding

How to locate initial call of jQuery event?

How do you locate where in a HTML page Javascript initially calls a jQuery event?
I'm attempting to diagnose and track down an obnoxious Datatables bug that has this traceback:
datatables.min.js:50 Uncaught TypeError: Cannot set properties of undefined (setting '_DT_CellIndex')
at fb (datatables.min.js:50:21)
at ia (datatables.min.js:45:1)
at HTMLTableRowElement.<anonymous> (datatables.min.js:45:114)
at jquery-3.5.1.min.js:2:1540
at Function.map (jquery-3.5.1.min.js:2:3509)
at S.fn.init.map (jquery-3.5.1.min.js:2:1508)
at La (datatables.min.js:45:79)
at f (datatables.min.js:123:15)
at HTMLTableElement.<anonymous> (datatables.min.js:123:198)
at Function.each (jquery-3.5.1.min.js:2:2976)
fb # datatables.min.js:50
ia # datatables.min.js:45
(anonymous) # datatables.min.js:45
(anonymous) # jquery-3.5.1.min.js:2
map # jquery-3.5.1.min.js:2
map # jquery-3.5.1.min.js:2
La # datatables.min.js:45
f # datatables.min.js:123
(anonymous) # datatables.min.js:123
each # jquery-3.5.1.min.js:2
each # jquery-3.5.1.min.js:2
u # datatables.min.js:113
(anonymous) # (index):2999
setTimeout (async)
(anonymous) # (index):2997
e # jquery-3.5.1.min.js:2
t # jquery-3.5.1.min.js:2
setTimeout (async)
(anonymous) # jquery-3.5.1.min.js:2
c # jquery-3.5.1.min.js:2
fireWith # jquery-3.5.1.min.js:2
fire # jquery-3.5.1.min.js:2
c # jquery-3.5.1.min.js:2
fireWith # jquery-3.5.1.min.js:2
ready # jquery-3.5.1.min.js:2
B # jquery-3.5.1.min.js:2
Datatables is notoriously buggy, and this error is well-known and can be caused by 'a number of different table configurations that the Datatables devs simply don't want to support. Fortunately, the fix is simple. I need to find where my Datatables call is and modify it to ignore that table.
Unfortunately, the earliest line in the traceback goes to a jQuery call. Nowhere does it touch any of my custom application Javascript, so I can't locate that call in my application code, so I have no idea where it's happening. The call itself isn't even easily recognizable anywhere in my code.
Presumably, I'm launching a jQuery event somewhere, which is touching or updating a table, which is then triggering a Datatables update, causing the error, and because of the use of asynchronous events, the original line of the code is being hidden.
How do I find this?

Axios not working on DigitalOcean server after npm update?

I updated npm on my DigitalOcean droplet, now the axios post call in my authentication (log in) function isn't working. I added a console.log and know that the function is triggered, but the axios post request is not working on the live site. The axios post request still works on my localhost.
I'm getting this error code on the live site:
POST https://www.myexamplesite.com/auth/login 504 (Gateway Time-out) - xhr.js:175
(anonymous) # 2.d105a7aa.chunk.js:1
e.exports # 2.d105a7aa.chunk.js:1
e.exports # 2.d105a7aa.chunk.js:1
Promise.then (async)
u.request # 2.d105a7aa.chunk.js:1
r.forEach.u.<computed> # 2.d105a7aa.chunk.js:1
(anonymous) # 2.d105a7aa.chunk.js:1
onClick # main.84d90956.chunk.js:1
l # 2.d105a7aa.chunk.js:1
d # 2.d105a7aa.chunk.js:1
(anonymous) # 2.d105a7aa.chunk.js:1
m # 2.d105a7aa.chunk.js:1
at # 2.d105a7aa.chunk.js:1
ot # 2.d105a7aa.chunk.js:1
lt # 2.d105a7aa.chunk.js:1
dt # 2.d105a7aa.chunk.js:1
D # 2.d105a7aa.chunk.js:1
F # 2.d105a7aa.chunk.js:1
Xt # 2.d105a7aa.chunk.js:1
Zt # 2.d105a7aa.chunk.js:1
t.unstable_runWithPriority # 2.d105a7aa.chunk.js:1
Ho # 2.d105a7aa.chunk.js:1
M # 2.d105a7aa.chunk.js:1
Gt # 2.d105a7aa.chunk.js:1
Again, the axios post request works fine on the localhost. But the live site sends this error since updating npm (I think it was npm that I updated; there's a chance it was something else). Also, every once and a while I think I've gotten an error about something wrong with a Promise. But that error hasn't appeared for a while.
Any thoughts on how to fix this?

The issue with the new update was that it would no longer allow self certification. I had to add this to the server:
process.env.NODE_TLS_REJECT_UNAUTHORIZED='0';
That is a temporary fix until I'm able to get the website certification working properly. I still think there may be an issue with the new npm update because I didn't self-certify my site, I used an official certification system. Don't know why this error happened. Still trying to figure out how to make the app work again without the process.env.NODE_TLS_REJECT_UNAUTHORIZED='0'; in the server.

Meteor Angular2 Tutorial error after adding ui-accounts

After section 8 (user accounts) in Meteor Angular 2 tutorial (social app) nothing is shown on the browser and in F12 I get this error:
install.js:85 Uncaught Error: Cannot find module 'meteor/accounts-base'require # install.js:85meteorInstall.node_modules.angular2-meteor-accounts-ui.build.login-buttons.js # login-buttons.js:13fileEvaluate # install.js:153require # install.js:82meteorInstall.node_modules.angular2-meteor-accounts-ui.build.index.js # index.js:5fileEvaluate # install.js:153require # install.js:82meteorInstall.client.imports.parties-list.parties-list.js # parties-list.ts:6fileEvaluate # install.js:153require # install.js:82meteorInstall.client.imports.parties-list.parties-list.ts # parties-list.ts:1fileEvaluate # install.js:153require # install.js:82meteorInstall.client.app.js # app.ts:6fileEvaluate # install.js:153require # install.js:82(anonymous function) # parties.ts:22

The referenced meteor/accounts-base module is a direct dependency of the accounts-password package. Step 8 of the Socially - A Meteor-Angular Tutorial App tutorial requires the installation of the accounts-password package, which will in turn install the accounts-base package. Make sure you've run the following:
meteor add accounts-password
To make sure it's installed, look in your .meteor/versions file for a matching accounts-base#X.X.X line.

How to load RxJS (and zone.js / reflect-metadata) with Angular 2 (beta and newer)?

As of Angular 2 Alpha 54 (changelog), RxJS is no longer included in Angular 2.
Update: Turns out that zone.js and reflect-metadata are also excluded.
As a result, I now get the following errors (as seen in the Chrome dev console):
system.src.js:4681 GET http://localhost:3000/rxjs/Subject 404 (Not Found)F # system.src.js:4681(anonymous function) # system.src.js:4681(anonymous function) # system.src.js:4681(anonymous function) # system.src.js:4681(anonymous function) # system.src.js:4681(anonymous function) # system.src.js:4681(anonymous function) # system.src.js:4681(anonymous function) # system.src.js:4681(anonymous function) # system.src.js:4681(anonymous function) # system.src.js:4681
system.src.js:4681 GET http://localhost:3000/rxjs/observable/fromPromise 404 (Not Found)F # system.src.js:4681(anonymous function) # system.src.js:4681(anonymous function) # system.src.js:4681(anonymous function) # system.src.js:4681(anonymous function) # system.src.js:4681(anonymous function) # system.src.js:4681(anonymous function) # system.src.js:4681(anonymous function) # system.src.js:4681(anonymous function) # system.src.js:4681(anonymous function) # system.src.js:4681
localhost/:1 Uncaught (in promise) Error: XHR error (404 Not Found) loading http://localhost:3000/rxjs/Subject(…)t # system.src.js:4681g # system.src.js:4681(anonymous function) # system.src.js:4681
system.src.js:4681 GET http://localhost:3000/rxjs/operator/toPromise 404 (Not Found)F # system.src.js:4681(anonymous function) # system.src.js:4681(anonymous function) # system.src.js:4681(anonymous function) # system.src.js:4681(anonymous function) # system.src.js:4681(anonymous function) # system.src.js:4681(anonymous function) # system.src.js:4681(anonymous function) # system.src.js:4681(anonymous function) # system.src.js:4681(anonymous function) # system.src.js:4681
system.src.js:4681 GET http://localhost:3000/rxjs/Observable 404 (Not Found)
I have RxJS in my package.json file (^5.0.0-beta.0), and it has been installed with npm, but the issue is I just am not familiar enough with SystemJS at this time to get things running. Here's the body section from my index.html file:
<body>
<app></app> <!-- my main Angular2 tag, which is defined in app/app as referenced below -->
<script src="../node_modules/systemjs/dist/system.js"></script>
<script src="../node_modules/typescript/lib/typescript.js"></script>
<script src="../node_modules/angular2/bundles/angular2.dev.js"></script>
<script src="../node_modules/angular2/bundles/http.dev.js"></script>
<script>
System.config({
packages: {'app': {defaultExtension: 'js'}}
});
System.import('./app/app');
</script>
<script src="http://localhost:35729/livereload.js"></script>
</body>
I have been playing around with other configurations, but none have gotten me all the way there. My guess is that this is relatively simple, it's just my lack of understanding or the way the tools get used that is stopping me.
Here's my app.ts file that is the app/app referred to in the SystemJS config:
import {Component} from 'angular2/core';
import {bootstrap} from 'angular2/platform/browser';
import {COMMON_DIRECTIVES} from 'angular2/common';
#Component({
selector: 'app',
directives: [],
template: `<div>{{greeting}}, world!</div>`
})
export class App {
greeting:string = 'Hello';
}
bootstrap(App, [COMMON_DIRECTIVES]);
I'm serving the app with a livereload Express server that uses static mappings so that calls like http://localhost:3000/node_modules/rxjs/Rx.js are able to get the needed file even though index.html is served from /src as the root of the server and node_modules is actually at the same level as src and not inside it.
Any help would, as always, be appreciated.

So it turns out that the problem was fixed easily by changing the SystemJS config to the following in my index.html file:
System.config({
map: {
rxjs: 'node_modules/rxjs' // added this map section
},
packages: {
'app': {defaultExtension: 'js'},
'rxjs': {defaultExtension: 'js'} // and added this to packages
}
});
System.import('app/app');
I had actually tried that, but what I failed to realize was that zone.js and reflect-metadata were also no longer included in Angular 2, and I was running into that problem as well.
For those interested, I got around the lack of zone.js and reflect-metadata most easily by including the angular2-polyfills.js file in my index.html:
<script src="../node_modules/angular2/bundles/angular2-polyfills.js"></script>
Now my app works just as it did with Alpha 53.

POST https://api.parse.com/1/users 400 (Bad Request) ERROR when using Fb login button (JAVASCRIPT)

Followed the FaceBook /Parse guide for letting users login via Fb, getting this message currently? I've looked for other examples, but can't see anything else that looks relevant.
Has anyone come across and solved this before?
POST https://api.parse.com/1/users 400 (Bad Request)b._ajax.j # parse-1.4.2.min.js:1b._ajax # parse-1.4.2.min.js:1(anonymous function) # parse-1.4.2.min.js:1c.extend.then.e # parse-1.4.2.min.js:3(anonymous function) # parse-1.4.2.min.js:3c.extend.then.g # parse-1.4.2.min.js:3c.extend.then # parse-1.4.2.min.js:3b._request # parse-1.4.2.min.js:1(anonymous function) # parse-1.4.2.min.js:3(anonymous function) # parse-1.4.2.min.js:3c.extend.then.e # parse-1.4.2.min.js:3(anonymous function) # parse-1.4.2.min.js:3c.extend.then.g # parse-1.4.2.min.js:3c.extend.then # parse-1.4.2.min.js:3c.extend._continueWith # parse-1.4.2.min.js:3c.extend.save # parse-1.4.2.min.js:3b.User.b.Object.extend.save # parse-1.4.2.min.js:5b.User.b.Object.extend._linkWith # parse-1.4.2.min.js:5b.User.b.Object.extend._linkWith.a.authenticate.success # parse-1.4.2.min.js:5g.authenticate.FB.login.scope # parse-1.4.2.min.js:5window.FB.u.__wrapper # all.js:95(anonymous function) # all.js:91window.FB.ha._xdRecv # all.js:113(anonymous function) # all.js:113pa # all.js:90(anonymous function) # all.js:88window.FB.h.setWrapper.j # all.js:50window.FB.h.setWrapper.j # all.js:50

This was caused my the fact that I'd deleted the Fb app and created a new one and not switched over the secret question and app id in the parse.com back end. Bit stupid to forget this, but someone else might find this handy one day..