Getting "Dispatching event 'DOMNodeInsertedIntoDocument' failed" error when using jsdom - node.js

I'm considering using JSDom for a project that requires scraping a site.
I started by trying an Amazon page. Here's a sample code:
jsdom.env(url, ["http://code.jquery.com/jquery.js"], function(errors, window) {
console.log(errors);
var $ = window.$,
results = parseResultsPage($);
//do some stuff
window.close();
});
At first, I had an if(errors.length > 0) ... clause, but it turns out, errors is always full. Even though the scraping itself works, and I get all the results I need, I always get:
[ { type: 'error',
message: 'Dispatching event \'DOMNodeInsertedIntoDocument\' failed',
data: { error: [Object], event: [Object] } } ]
This means I cannot test for errors effectively. Simply ignoring this error feels unsafe to me.
Any suggestions? Could this be an Amazon-related issue? (they're using jQuery 1.2.6 on their pages)
Update:
Submitted issue on JSDom github page (link).

Well, after a debug session using node-inspector, I managed to single out the piece of code on the Amazon page that throws that error.
It's a CSS rule inside a long inline <style> element, that JSDom does not know how to handle:
<style type="text/css">
...
.cust-rec-aui-button #-moz-document url-prefix(){
.cust-rec-aui-button .a-button .a-button-text{
line-height:29px
}
.cust-rec-aui-button .a-button.a-button-small .a-button-text{
line-height:21px
}
}
...
</style>
At first, I thought it was a CSS syntax error (though JSDom is not supposed to throw an exception for those), but then I found some sources (here's one) that say this is perfectly legal.
So, after conferring with the developers of JSDom (see issue on Github to get the whole correspondence, along with code that reproduces the issue), it has been declared a bug, and hopefully will get fixed!

Related

Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.7.9/$injector/moduler

Am getting the above error in console on loading my application. My controller looks as below.Am new to angular so any help would be appreciated
Am trying to export the datatable into excel here. I think the issue is here angular.module('myApp','datatables', 'datatables.buttons'])
What is the correct way to include them in the module?
ViewCtrl.js
angular.module('myApp',['datatables', 'datatables.buttons'])
.controller('ViewCtrl', function($scope, DTOptionsBuilder, DTColumnDefBuilder) {
$scope.dtOptions = DTOptionsBuilder.newOptions()
.withPaginationType('full_numbers')
.withDisplayLength(2)
.withDOM('pitrfl')
.withButtons([{
extend: 'excelHtml5',
}
]);
vm.dtColumnDefs = [
DTColumnDefBuilder.newColumnDef(0),
DTColumnDefBuilder.newColumnDef(1).notVisible(),
DTColumnDefBuilder.newColumnDef(2).notSortable()
];
});
Verify the console loads. If the console.log does not show and you still get the inject error, then your problem is likely the datatables and datatables.buttons. Verify that these files are added to your index.html file prior to this file.
angular.module('myApp', ['datatables', 'datatables.buttons'])
.controller('ViewCtrl', function ($scope) {
console.log("Code of awesomeness");
});
If you find that you do see the console.log("Code of awesomeness"); Then your $inject issue is DTOptionsBuilder, DTColumnDefBuilder. Verify spelling.

Unable to use getElementsByTagName("body")

Here's the code that results in an error each time I run it. My goal is to scrap the content from the URL, remove all HTML, and return it:
console.log("Fetching: " + inputData.tweeturl);
fetch(inputData.tweeturl)
.then(function(res) {
return res.text();
}).then(function(body) {
var rawText = body.getElementsByTagName("body")[0].innerHTML;
var output = { id: 100, rawHTML: body, rawText: rawText };
callback(null, output);
})
.catch(callback);
The problem is with var rawText = body.getElementsByTagName("body")[0].innerHTML;
The error I receive is:
Bargle. We hit an error creating a run javascript. :-( Error:
TypeError: body.getElementsByTagName is not a function eval (eval at (/var/task/index.js:52:23), :16:24) process._tickDomainCallback (node.js:407:9)
Unfortunately - there is no JS DOM API in the Code by Zapier triggers or actions (that is because it isn't run in a browser and doesn't have the necessary libraries installed to fake it).
You might look at Python and instead, and https://docs.python.org/2/library/xml.etree.elementtree.html. Decent question and answer is available here Python Requests package: Handling xml response. Good luck!
Any function not supported by Zapier will result in a TypeError. I needed to use a regular expression to achieve this.

Photoswipe and Require.js configuration

I have a module which is dependent upon both, PhotoSwipe and PhotoSwipeUI_Default. I am requiring both modules, like so and inside of my module I am initialising my gallery. EG:
define("modules/lightboxStart", ["vendor/PhotoSwipe", "vendor/PhotoSwipeUI_Default"], function (PhotoSwipe, PhotoSwipeUI_Default) {
var StartGallery = function(){
var lightBox = new PhotoSwipe($pswp, PhotoSwipeUI_Default, items, options);
lightBox.init();
}
StartGallery()
}
The gallery then works as expected but require is throwing a mismatched anonymous define module error in PhotoSwipe.js.
After looking through the docs I came to the conclusion that I need to run both scripts(PhotoSwipe and PhotoSwipeUI_Default) through the require.js API.
I then defined each, like so:
define('PhotoSwipe', function() {
//PhotoSwipe script here
return PhotoSwipe
})
And
define('PhotoSwipeUI_Default', function() {
//PhotoSwipeUI_Default script here
return PhotoSwipeUI_Default
})
This then eliminates the mismatched anonymous define module error I was getting earlier, but I am getting this error now instead:
PhotoSwipe is not a function
How could I fix this? I am essentially trying to access the PhotoSwipe function within PhotoSwipe.js and pass through my arguments but I am unable to do so without generating a load of js errors on the page and I can not figure out why.
Help much appreciated!
define( ["modules/lightboxStart", "vendor/PhotoSwipe", "vendor/PhotoSwipeUI_Default"], function (lightboxStart, PhotoSwipe, PhotoSwipeUI_Default) { //i think so}

require js with underscore.js not working

I am following the tutorial at:
http://javascriptplayground.com/blog/2012/07/requirejs-amd-tutorial-introduction
I am basically making a simple template module that requires "jquery" and "underscore"
Here is my app.js
require.config({
paths: {
"jquery": "https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min",
"underscore": "http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.3/underscore-min"
}
});
require(['template'], function(template) {
//Template is undefined
console.log(template);
});
Here is my template.js
define(['underscore', 'jquery'], function()
{
var showName = function(n)
{
var temp = _.template("Hello <%= name %>");
$("body").html(temp({name: n}));
};
return
{
showName: showName
};
});
I have verifed that all the scripts are pulling in via google chrome's network tab, but the template callback is NOT defined.
EDIT:
It seems the error is caused by return with { on another line. I have never run into this before with javascript...Is there a rule for this?
EDIT: It seems the error is caused by return with { on another line. I have never run into this before with javascript...Is there a rule for this?
Despite best efforts of certain luminaries to convince gullible newcomers otherwise, semicolons are optional in JavaScript. This has some implication to how return keyword is handled. See the link.
One of the issues with people thinking that semicolons are required is - they think that the parser will continue parsing until it encounters a semi... Gotcha!

how to run nodejs flatiron/director example

I tried to run the https://github.com/flatiron/director#client-side example to get familiar with director.js.
I am not able to setup the flatiron module on the client-side.
In my html page (say, <my_project>/page.html) I replaced the location of director.js with
a location of its counterpart from my project:
<my_project>/node_modules/flatiron/node_modules/director/lib/director.js
Upon loading the <my_project>/page.html page in the browser
I got errors: export and Router not defined.
First idea: After all, on the browser side there is no nodejs...
Ok, I thought that browserify could help me with it.
I generated a single 'browser-side' bundle (was it necessary?):
my_project> node node_modules/browserify/bin/cli.js node_modules/flatiron/node_modules/director/lib director.js -o cs_director.js
and I used it in the line: <script src="cs_director.js"></script>
The problem is that the error
Uncaught ReferenceError: Router is not defined
(anonymous function)
still appears so I guess the whole example will not work.
I am new to node/js and I am not sure if it makes sens what I have done in my case described above...
Does anybody how to solve it?
Or generally, how to use 'isomorphic' stuff on a browser-side?
The html examples on Github just refer to the same .js files
as server-side examples ...
Can you recommend any tutorials, examples?
Thanks,
-gvlax
You can find a browser-specific build of director here which has all of the server code stripped away.
Thanks DeadDEnD,
Now it works like a charm!
I have no idea how I could missed that info in readme ... I read the manual first, I swear:-)
Here is my sample code:
<!html>
<html>
<head>
<script src="director-1.0.7.min.js"></script>
<script>
var author = function () { console.log("author called.");},
books = function () { console.log("books called."); },
viewBook = function(bookId) { console.log("viewBook called."); };
var routes = {
'/author': author,
'/books': [books, function() { console.log("anonymous fun called."); }],
'/books/view/:bookId': viewBook
};
var router = Router(routes);
router.init();
</script>
</head>
<body>
Click me to call two functions at a time.
</body>
</html>
--gvlax

Resources