How can I Integrate dialog-polyfill into my React app? - javascript

I'm using Firebase and FirebaseUI in my React app for phone number registration. As you can see at http://brigadesaffinitywebapp-dev.herokuapp.com it works well on Google Chrome desktop but as soon as I try to use another navigator the country code selector doesn't work and throws an error : undefined is not an object (evaluating 'window.dialogPolyfill.registerDialog'). So I guess I need to integrate https://github.com/GoogleChrome/dialog-polyfill but I'm having a hard time figuring out how.
I tried to npm install dialog-polyfilland then import dialogPolyfill from 'dialog-polyfill but I still get the error. Maybe it has something to do with the fact that I'm not currently attaching the instance to the windowobject ?

I guess there is no reasons to complicate things... Just had to put this a the top of index.html
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/dialog-polyfill/0.4.7/dialog-polyfill.js"></script>
<script>
var dialog = document.querySelector('dialog');
dialogPolyfill.registerDialog(dialog);
// Now dialog acts like a native <dialog>.
dialog.showModal();
</script>

Related

Not able to access variable in google chrome console

I am using the latest version of Meteor js. I am a newbie and couldn't find the solution. I have surfed for this problem a lot.
Before going to the problem, please have look at the directory structure first.
My directory structure of the project is like this :
\client
\main.html
\main.css
\main.js
\imports
\lib
\todos
\todos.js
\server
\main.js
I have created a Mongo Object in todos.js.
export const Todos = new Mongo.Collections('todos');
This is working fine.
Now in client\main.js, I am importing this object,
import { Todos } from '\imports\lib\todos\todos.js';
Note: I tried relative and absolute both type of addressing.
I put a debugger after that and checked and the variable is there. I can access that variable on the console. But as soon as I pass the statement and all the code is rendered on the browser(google chrome), I am not able to use Todos. It is giving me a ReferenceError. The error is
Todos is not defined.
I know there is no problem till the browser is loading because I checked that. I have surfed a lot. Please help me.
Thank you in advance.
Edit 1: I am using windows 7 if that is necessary.
As the comments above said, variables declared or imported in a file/module don't end up on the developers console.
What you can do to get stuff on the console is import it to the console using require
> require('/imports/lib/todos/todos.js')
Any valid absolute path or package will work here
Note: the path separators are always *nix style /
I had a similar problem while trying to evaluate moment from Moment.js in Chrome console. It was imported by the script being debugged/under breakpoints but does not work in console. import or require Moment.js in console gave me errors and did not work for me.
I ended up switching to Firefox Developer Edition, where I can put breakpoints and then evaluate moment in its console out of the box without any problems.

Cordova Google-Analytics-Plugin Missing Exec

I'm implementing Dan Wilson's Google-Analytics-Plugin into my Cordova/Ionic application and am getting an odd error. I installed the latest version (1.8.2) of the plugin and implemented it into my app.js:
if (typeof window.ga !== "undefined") {
window.ga.startTrackerWithId('UA-84899403-18');
window.ga.trackView('Home');
}
The condition passes and the code is run, but the console output looks like this:
There isn't any data in my Google Analytics App Overview but I know it can take a while for that to come in. I've never seen this missing exc: and it isn't an error so I can't tell if the plugin is working or not. Any help?
This is a Ripple Emulator issue with the lack of ability to use native Java/Swift code, hence the missing exec:. In order to fix or properly test the app with the plugin you need to install it in a better emulator or on a device.

How to integrate tesseract OCR with Cordova/Phonegap app

Im trying use tesseract OCR with my app and by instructions posted here
http://scn.sap.com/community/developer-center/front-end/blog/2015/05/15/create-an-ocr-android-app-with-cordova-and-tesseract
several times I followed the instructions but with no success.When im inspecting code with Google Chrome Dev console thru the WebVieW it give me
Uncaught SyntaxError: Unexpected token }
in file tesseractPlugin.js:11
thats located somewhere in
file:///android_asset/www/plugins/com.tesseract.phonegap/tesseractPlugin/tesseractPlugin.js
and
Uncaught Error: Module com.tesseract.phonegap.tesseractPlugin.TesseractPlugin does not exist.
in cordova.js:1431
witch i think means the cordova cant find the plugin but i dont know why.I think it's something with the version of Cordova and its access to plugins
its frustrating because there are no other options on the web and i dont know how to write my own cordova plugin.
I would also like to add that I created the project exactly as instructed to avoid the mistakes and over I have found that it is not possible to download the plugin by git from
https://github.com/engzhaowei/Tesseract-phonegap-android-example/tree/master/plugins/com.tesseract.phonegap.tesseractPlugin
so i downloaded full package and fetch plugin from
C:\xxx\plugins\com.tesseract.phonegap.tesseractPlugin
There is tessaract js http://tesseract.projectnaptha.com/
which is a javascript library and you can use it and will work for phonegap its very easy to implement.
Just reference the cdn script in the header and call the code snippet it should work. Be warned actress is slow.
<script src='https://cdn.rawgit.com/naptha/tesseract.js/1.0.10/dist/tesseract.js'></script>
var myimage = document.getElementById("largeImage").src;
Tesseract.recognize(myimage)
.then(function(result){
// console.log(result);
document.getElementById("textarea1").value = result.text; // assign results to a textbox

Using react-router with the client-side library - I get errors

I've loaded the client-side library as the author suggests. "If you just want to drop a <script> tag in your page and be done with it, you can use the UMD/global build hosted on cdnjs."
ReactRouter is loaded onto the window object.
To render a Router, Route or Link I will need the ReactClass. But there I am stumped. I am using pure JavaScript so I want to do something like:
var router = React.createElement(ReactRouter.Router, null);
React.render(router, document.getElementById('container'));
But I just get an error message:
Uncaught TypeError: Cannot read property 'toUpperCase' of undefined
Does anyone have an example of getting react-router to work with the CDN hosted client side library?
I'm using:
13.0 of React and the JSX inline transpiler and 13.3 of React-Router. (I have the same error whether I do it in JSX or pure JavaScript)
This was resolved for me by following the example in the answer by dionmampo on this ticket: react-router Uncaught TypeError: Cannot read property 'toUpperCase' of undefined
Note the essential change added in my comment to make it work.
This doesn't quite explain my issue but does provide a working example of using React Router with the client side include. It suggests but doesn't prove that the key issue is the loading one: you need to wait till the Window has loaded before trying to run the Router.
Note that the Router, Route and Link are available on window.ReactRouter in this case.

Rally app SDK 2.0rc1 - Uncaught ReferenceError: rally is not defined

Long time SO reader, first time questioner. I'm fairly new to coding in JavaScript and I'm working on a Rally app. I'm trying to "update" existing items, so I figured I'd set up the datasource at the beginning of the app, like this:
Ext.define('CustomApp', {
extend: 'Rally.app.App',
componentCls: 'app',
launch: function() {
this.rallyDataSource = new rally.sdk.data.RallyDataSource("__WORKSPACE_OID__",
"__PROJECT_OID__",
"__PROJECT_SCOPING_UP__",
"__PROJECT_SCOPING_DOWN__");
However, on page load, the Chrome console is showing me "Uncaught ReferenceError: rally is not defined". I checked the HTML to ensure there was a reference to sdk.js, and there is:
<script type="text/javascript" src="/apps/2.0rc1/sdk.js"></script>
I've searched around and attempted some solutions, but nothing seems to work. Any one else run into this or know what it causing it?
Edit: To clarify, I am testing this within the Rally workspace in which it will be used. I have comboboxes correctly loading and populating with Release and User Story info, so I know it is able to communicate.
rixo is on the right track above. Basically, you're trying to use sdk 1.x code (rally.sdk.data.RallyDataSource and the hangman variables) from the sdk 2.x.
SDK 1.x is deprecated but the docs are still available here: https://help.rallydev.com/app-sdk
SDK 2.x is the preferred platform and its docs are here: https://help.rallydev.com/apps/2.0rc2/doc/
Both of those resources contain a bunch of guides for getting started and whatnot.
Shouldn't that be Rally.sdk.data with a capital 'r'?

Categories