Polymer iron-ajax/iron-request won't fire - ajax

I am trying to make a request using iron-ajax.
My code looks like this:
<link rel="import" href="../bower_components/iron-ajax/iron-ajax.html">
<iron-ajax
id="fetch"
url="myapi.com/resource"
method="GET"
content-type="application/json"
handle-as="json"
on-response="storeData"
debounce-duration="300" auto>
</iron-ajax>
I consistently get this error and have linked to the source below.
Uncaught TypeError: request.completes.then is not a function
https://github.com/PolymerElements/iron-ajax/blob/master/iron-ajax.html#L447
When I log the spawned iron-request object request.completes out to my console, I see the below object.
g
_callbacks: Object
_pendingCallbacks: Object
ctx: null
promiser: ()
__proto__ : Object
I am using the following versions, and polymer serve to run the app locally.
iron-ajax: 1.4.3
polymer: 1.7

The awful resolution to this is that I had a naming conflict. I use bloodhound.js in this project and recently switched from a manually downloaded file over to bower. The bloodhound registered on bower is NOT the library written by twitter. It is an entirely different, one-starred, zero-forked library, last updated in 2014 that happens to overwrite the Promise prototype at a global scope :(
Thanks to all for your consideration and help!

Related

Using graphviz in ES6 module

When I try to load graphviz in an ES6 module, I get errors about .wasm
(index):284 GET https://anki.wip/build/graphvizlib.wasm 404
__webpack_require__.O # chunk loaded:23
(anonymous) # app.scss?8f59:1
webpackJsonpCallback # jsonp chunk loading:72
(anonymous) # app.js:1
index.js:184 Aborted(both async and sync fetching of the wasm failed)
abort # index.js:184
getBinary # index.js:184
My set up is pretty simple, although I've tried many variations of this
yarn add d3-graphviz
# installs d3-graphviz#4.1.1
Then in my js file
import { graphviz } from 'd3-graphviz';
graphviz('#test')
.fade(false)
.renderDot('digraph {a -> b}');
I have read, and re-read, the issue on github at https://github.com/magjac/d3-graphviz/issues/152, and various issues related to running it with Vue and Angular, but still can't figure it out.
I've tried loading the unpkg in my HTML file, but then my javascript module doesn't have access to graphviz.
<script src="https://unpkg.com/viz.js#1.8.0/viz.js" type="javascript/worker"></script>
<script src="https://unpkg.com/#hpcc-js/wasm#0.3.11/dist/index.min.js"></script>
<script src="https://unpkg.com/d3-graphviz#3.0.5/build/d3-graphviz.js"></script>
<script src="//d3js.org/d3.v5.min.js"></script>
Any ideas?
Basically you need to treat the wasm file like any "static asset" (like a png or jpeg). Based on where the browser is looking for the file by default, the quickest solution is to simply copy the wasm file to your public folder.
On the #hpcc-js/wasm side take a look at the "wasmFolder" documentation here: https://github.com/hpcc-systems/hpcc-js-wasm#wasmFolder as it will let you override the default location.

uirouter/angular-hybrid AoT build bootstrapModuleFactory promise injector fails to get UIRouter

I've got a sample uirouter/angular-hybrid app, successfully built with #ngtools/webpack AngularCompiler plugin and running. I've updated the main.aot.ts boot function to use bootstrapModuleFactory and can get the injector from the platformRef available in the promise success handler. But injector.get(UIRouter) fails with "Cannot read property 'config' of null."
platformBrowser().bootstrapModuleFactory(AppModuleNgFactory).then((platformRef) => {
const urlService: UrlService = platformRef.injector.get(UIRouter).urlService;
function startUIRouter() {
urlService.listen();
urlService.sync();
}
platformRef.injector.get<NgZone>(NgZone).run(startUIRouter);
});
I confirmed that the injector.get(NgZone) will succeed and injector.get(UIRouter) will fail. I tried moving the call to injector.get(UIRouter) inside the NgZone run func without success.
I also tried moving the upgrade.bootstrap call into the promise success function above to ensure it had booted first, without fixing the problem.
A simple angularjs component is rendering fine, so the boot process seems to be succeeding, except for not being able to call the listen() and sync() functions on the UIRouter.urlService.
I also confirmed the development config and non-aot production config, for this same sample app, do not have this problem and seem to be working fine.
Using versions:
uirouter/angular-hybrid v6.0.2
angular packages at v7.1.4, but also failed with 6.0.0 (which is the angular version in the package.json in the docs for uirouter/angular-hybrid v6.0.2)
Thanks for any ideas.
The problem was that the config object I was passing to UIRouterUpgradeModule.forRoot was being imported from a file that was using a default export of the object, and the object had a reference to a config function that was not being exported. This combination hid the problem during the build, and resulted in the symptom at runtime of not having the UIRouter object available to the injector.
Replacing the default export with a named export triggered the AOT compiler to complain about the non-exported function reference. Additionally exporting the function then allowed a successful build, a happy injector, and a successful runtime boot.

js in html is not executing in Phoenix framework sample app

I'm playing around with the phoenix framework. I copied the chat example entirely but I'm not getting any results.
In fact when I write console.log("testing") in my app.js I notice that my console does not log anything...
I am getting the error referenced in this link:
phoenix framework - invalid argument at new Socket - windows
However that error seems to be related to Brunch not working in windows. When I brunch build, I can confirm that app.js has the console.log("testing") that I included.
Nevertheless, I don't see that console log when I visit my localhost:4000.
Why is JS not executing?
Turns out the guide is missing a key line that made it not work.
The guide has the following:
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="<%= static_path(#conn, "/js/app.js") %>"></script>
</body>
But that is missing the below line which you can put above the body tag.
<script>require("web/static/js/app")</script>
Even as Chowza already solved this question I would like to propose another, possible cleaner solution, using the autoRequire feature of Brunch.io.
The problem occurs because Brunch.io does not autoRequire the app.js under Windows correctly. Chowza worked around this issue by requiring the file manually in the html. You can omit the manual require if you alter the /brunch-config.js as follows: Change from
modules: {
autoRequire: {
"js/app.js": ["web/static/js/app"]
}
}
To
modules: {
autoRequire: {
"js/app.js": ["web/static/js/app"],
"js\\app.js": ["web/static/js/app"]
}
}
This way the app.js is autoRequired, even if you work on a Windows based system.
I would like to mention, that this solution is based on the link Chowza himself posted, so all credit goes to him for pointing to the link.

Ace editor "SECURITY_ERR: DOM Exception 18" in Chrome when running locally (no server)

I'm trying to run Ace editor from file system for now and in Chrome I'm getting:
"SECURITY_ERR: DOM Exception 18"
FireFox doesn't mind it.
Found this on google groups:
due to same origin restrictions workers can't be loaded from cdn you
need to put them on your site, and add ace.config.set("workerPath",
"path/to/ace/src-min");
No joy.
I'm initializing the editor like so:
<script src="js/source-editor/src-min-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
<script>
var editor = ace.edit("editor");
ace.config.set( "workerPath", "js/source-editor/src-min-noconflict");
editor.setTheme("ace/theme/monokai");
editor.getSession().setMode("ace/mode/css");
</script>
Am I missing something hopelessly simple?
This isn't a full solution but it may help:
editor.getSession().setUseWorker(false);
This turns off worker, probably destroying performance in the process. It should probably be conditional on whether you are a local file by checking the url.
For what's it worth, issue disappears one deployed to server.

Simple ajax/prototype problem

im beginning with Ajax, i have problem with including Ajax files.
Ajax code written in original page (like index.php) and placed in (head) section works fine, but when i try to place code in external file (in js folder, where is placed prototype.js file), i don't get any response, not even in Firefox Error Console.
I haven't changed Ajax code except url for calling PHP function.
edit:
calling ajax files:
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/myValidation.js"></script>
</head><body>
....
Username: <input type="text" name="uname" id='uname' />
Available?
<span id="result"></span>
Email address: <input type="text" name="email" />
...
I embaded this function call in html. Validate function is from book "PHP and Script.aculo.us Web 2.0 app interfaces"
myValidation.js
function Validate(){
var user=$('uname');
var name="uname="+user.value;
var pars=name;
new Ajax.Request(
'myValidation.php',
{
method:'post', parameters:pars, asynchronous:true, onComplete: showAvailable
}
);
}
function showAvailable(originalRequest){
var newData=originalRequest.responseText;
$('result').innerHTML=newData;
}
This example is from mentioned book
You haven't shown us your myValidation.js file, but here are the typical reasons I see when people move from inline script blocks to external files and things stop working:
They put script blocks in the external JavaScript files. You probably didn't do that, but I've seen it often enough to mention it. Your external script is pure JavaScript, so for instance it should be:
function Validate() {
// ...
}
not:
<script type='text/javascript'>
function Validate() {
// ...
}
</script>
I've seen the latter a fair bit.
They put the JavaScript file in a location that doesn't match their script tag src.
They left an opening <!-- or closing --> in the script. Important not to do that, in external JavaScript files those are syntax errors.
They're using a web server that's case sensitive and the src attribute and the file's actual name don't match.
They're using a web server sensitive to permissions and the file doesn't have the right permissions.
In the case of the last two above, it's easy to check: Just open a new tab and actually enter the URL of the JavaScript file. If you see the JavaScript, great; if not, you probably have more information.
For issues like this (and hundreds of others), there's nothing like having a decent toolset. For debugging JavaScript on browsers, there are quite a few. There's Firebug (a Firefox add-in), Chrome's and Safari's Development Tools (built into the browsers), Microsoft Visual Studio or Script Debugger for debugging with IE, etc. Firebug and Dev Tools would both tell you about broken src links, as well as any exceptions, etc.
Have you checked that those files are accessible from the HTML code? And more - have you placed you scripts in the bottom of the page - because AJAX will bind it's handlers only to existing elements?
Problem solved.
In /js/ folder i had one php file, that i put there just because of simplicity. After moving it to other location all worked. Don't know if that is rule, nut no php files in /js/ folder. Thanks T.J and Tomasz

Resources