Develop Reference

SMART on FHIR client-js: Invalid Character Error on IE11

Note: The issue is also reported on GitHub. Please take a look at Git issue as well for current progress/investigation.
I'm using fhir-client v0.1.15 to develop a SMART on FHIR web application that would run in EHR launch scenario. For example in Epic Hyperspace simulator that uses IE to run the SMART application.
While testing my application locally(localhost) on IE11, I get a JavaScript error from within fhir-client.js.
SCRIPT1014: Invalid character
File: fhir-client.js, Line: 38113, Column: 3
Below are the two lines from code. 38112 & 38113 in order:
var ret = Adapter.get().defer();
var state = JSON.parse(sessionStorage[params.state]);
Any solution or workaround would be much appreciated.
Updated
Upon further investigation we found that sessionStorage is empty when line with JSON.parse executes. However, strange thing is why/how sessionStorage gets empty after redirection from authorization server. This only happens with IE11, everything works fine on Chrome though.
PS. Can someone please add a new tag SMART or SMARTonFHIR?

Though I couldn't find the exact root cause and solution but let me share the findings that helped me resolve this issue somehow.
The issue doesn't exist when I test my SMART application with redirect_uri(in FHIR.oauth2.authorize call) set to a staging server URL instead of localhost.
PS. I’m open to better, and more qualified answers for acceptance.

Javascript acting differently in inappbrowser vs Chrome - Undefined global variables

My problem is that when I use inappbrowser to open my web page, the main javascript file seems to be ignored, even though it is referenced in the Head of the file that I am opening using ref = cordova.InAppBrowser.open('https://MYURLHERE:8484/home/login', '_self', 'location=yes');
I am using chrome://inspect/#devices to inspect the console and I get errors when hitting buttons.. Anything referenced in the main.js file is undefined.. whereas the actual code for the autocomplete and button seems to be executing.
Please note The url is working fine when viewed in the chrome browser. The javascript files seem to load correctly, and all variables are defined correctly. - It is only when I use inappbrowser that I see issues with undefined variables.
My code (cordova app):
ref = cordova.InAppBrowser.open('https://MYURLHERE:8484/home/login', '_self', 'location=yes');
var myInAppBrowserCallback = function(event) {
console.log(event.url, 'LOADED');
};
ref.addEventListener('loadstart', myInAppBrowserCallback);
//Works fine.
My code (from the actual website I'm trying to view in Inappbrowser):
<script src="/Scripts/commonFunctions.js"></script>
var p = 'Hello';
<script src="/Scripts/loginPage.js"></script>
$('#btnLogin').on('click', function() {
alert(p);
});
Returns an alert with undefined.
What I have tried:
Extensive googling! (all the answers seem to be related to javascript not being enabled.. or 404 errors or things like that.. Not with global variables from one js file being undefined in another js file.)
Removing inappbrowser, using window.open.. Won't work as the app needs to execute scripts to inspect localstorage of the site.
Re-installing the android platform using cordova.
Re-installing the plugin.
Checking chrome in the inspector to ensure the files are in sources tab (they are).
Checking that the functions in main.js also exist (they do).
Thanks, JFIT

Summary:
The problem was that a javascript file was trying to load 'SpeechSynthesis' which was undefined only in the inappbrowser.
Details:
The problem with this was confusing but here are the steps I found to debug / solve:
Set up Remote Debugging on the phone so that you can view the console of the phone using chrome://inspect/#devices
View the console of the inappbrowser site (which will show as a seperate page to the inappbrowser instance.
Identify which files are being loaded and remove files until 'undefined' errors disappear.
Add back in the most recent file and start to strip out various functions (especially functions/variables before document.ready (global variables also)
Find the line/variable that way. It was handy for me this way as the actual undefined variable showed up after I removed most of the files.
The actual cause of my error was the speechSynthesis functionality.
The speechsynthesis lines were removed, and I readded all remaining files and everything works. This function works fine in chrome on desktop/android but not in the inappbrowser.

How to get started using Phonegap Build with a Durandal SPA App?

I've built a SPA using Durandal and it all works fine in a browser. What I'm trying to do now is wrap it up with Phonegap (ideally using Phonegap Build) and deploy it as an Android app.
The Durandal documentation on the subject (http://durandaljs.com/documentation/Native-Apps-With-PhoneGap-Cordova/) is pretty sparse. It's key points of optimizing the app to generate a main-built.js file were done as were gathering the js/css assets into one place.
However, it doesn't mention anything about Phonegap/Cordova having a device ready event rather than a document ready one. I've packaged the app according to instructions. It installs alright on my Android device but gets stuck on the splash screen. Other questions have asked about being stuck on the splash screen, but the solutions posted there don't help. I can't help but think something fundamental is missing here?!?
Do I need to have Phonegap specific code in index.html? In any javascript?
Note: I'm using Durandal 1.2 but the same questions apply for v2.0.

You can hook into the Phonegap device ready event in main.js, you can then be sure the device is ready before the shell or any view activate events are fired. This example checks the agent so it will still fire up in a browser. This is from my example Durandal 2 / Phonegap Build project.
https://github.com/BenSinnott/LandmarkTracker
define(['durandal/app', 'durandal/viewLocator', 'durandal/system'], boot);
function boot(app, viewLocator, system) {
var useragent = navigator.userAgent.toLowerCase();
if (useragent.match(/android/) || useragent.match(/iphone/) || useragent.match(/ipad/) || useragent.match('ios') || useragent.match('Windows Phone') || useragent.match('iemobile')) {
document.addEventListener('deviceready', onDeviceReady, false);
}
else {
onDeviceReady();
}
function onDeviceReady() {
app.title = 'Landmark Tracker';
app.configurePlugins({
router: true
});
app.start().then(function () {
viewLocator.useConvention();
app.setRoot('viewmodels/shell', 'entrance');
});
}
}

However, it doesn't mention anything about Phonegap/Cordova having a device ready event rather than a document ready one.
jQuery can listen for document ready via $(document).ready but HTML/javascript itself doesn't have a document ready event. The closest pure javascript equivalent is listening for the DOMContentLoaded event. Phonegap/Cordova offers the device ready event as documented here. Be sure to include <script type="text/javascript" charset="utf-8" src="cordova.js"></script> in your <head></head> tags.
It installs alright on my Android device but gets stuck on the splash screen.
Take a look at your config.xml. Do you have <preference name="splash-screen-duration" value="xxxx"/> where xxxx is set to some crazy high number?
You could always call navigator.splashscreen.hide() after device ready fires but you will need to build in the deviceready listiner. Easy to do using the documentation I provided above. If that doesnt fix it, then we will need to take a look at some of your code to dig into what is going on.

First of all try an unminified Version. Means copy all the folders into your assets folder. Then look at logcat. Most likely u had a js error. If that works try the minified version and check if that one throws errors via logcat
Edit: sry this applies of course only for manual build in android not for the online service. For IOS as far as i remember you get the errors thrown in the output window.

pdf.js not working with Safari

We're testing out pdf.js and while it seems like an awesome project we can't get it working in Safari.
(Tested on PDF.JS version = 0.8.229 (latest) / Safari 5.1.9 - 6.0.4 / Mac OSX 10.6.8 - 10.8.3)
EXAMPLE:
This is an example of the demo code served from our server with a sample PDF that works on Chrome/FFox but not Safari:
http://test.appgrinders.com/pdf_js/test.html
Console output:
Warning: Setting up fake worker.
Error: Invalid XRef stream (while reading XRef):
Error: Invalid XRef stream pdf.js:850undefined
Warning: Indexing all PDF objects
Error: Invalid XRef stream (while reading XRef):
Error: Invalid XRef stream pdf.js:850undefined
More tests:
The following is a list of sample PDFs we tested (They were all served from our server, and all worked in Chrome/FFox/Android). The only one that worked with Safari was the PDF file served from the pdf.js project itself:
FAILS IN SAFARI:
http://samplepdf.com/sample.pdf
http://forums.adobe.com/servlet/JiveServlet/previewBody/2041-102-1-2139/Sample.pdf
https://github.com/prawnpdf/prawn/raw/master/data/pdfs/form.pdf
WORKS IN SAFARI:
http://cdn.mozilla.net/pdfjs/helloworld.pdf
(NOTE: This is a sample PDF from the pdf.js project and the only one we ever got working)
We've submitted a bug report, but the developers do not seem to have an answer, so I'm hoping someone here might...
How can we get pdf.js working with Safari?

I've figured out how to get things working on Mac Safari (without necessarily understanding why)...
compatibility.js must be included.
PDFJS.workerSrc must be assigned.
The demo code I had been testing (from the JS Bin demos here)
does not do this, though some other online examples do (including
the hello world example and the examples provided by
#AndrewBenjamin – thanks). Other browsers don't seem to require this,
but Safari won't work without it.
<script type="text/javascript" src="compatibility.js"></script>
<script type="text/javascript" src="pdf.js"></script>
<!-- NEED THIS for Safari Mac to render work -->
<script type="text/javascript">
// Specify the main script used to create a new PDF.JS web worker.
// In production, change this to point to the combined `pdf.js` file.
PDFJS.workerSrc = 'pdf.worker.js';
</script>
Again, can't explain why, but this is how we got it working for us.

I've got PDF.js working fine in Safari on my local server, but when I put it on the remote server, the goofy error comes back:
Warning: Setting up fake worker.
Unhandled rejection: Error: INVALID_STATE_ERR: DOM Exception 11
It will also show this error on my local computer if I happen to have the developer console open. Close the console, PDF displays in Safari; open the console, and it doesn't work anymore.
The question is: what do the developer tools and the remote server change versus running on a local server? Is this still a range-checking problem?
I got PDF.js to work, though! I've modified so much stuff I don't know what part of what I did worked. Here's a list of stuff I did.
Added compatibility.js – modified the last function in it to read like this:
(function checkRangeRequests() {
var isSafari = Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor') > 0;
if (!isSafari) {
return;
}
document.addEventListener('DOMContentLoaded', function (e) {
if (isSafari) {
PDFJS.disableRange = true;
}
});
})();
Changed the order of xhr.open() calls in pdf.js so that xhr.setRequestHeader() occurs after xhr.open()
Removed all 'use strict'; lines
Added xhr.setRequestHeader("Cache-control", "no-cache"); after xhr.open on lines 37272 and 41262
Minified pdf.js and it all works all the time!

PDFJS.getDocument() will accept either a string link or a Uint8Array. In my client side version I pass PDFJS.getDocument() a Uint8Array, but if I want an existing file rendered, I just pass the path to the file:
jspdf line 965:
PDFJS.getDocument('..files/pdf/sample.pdf').then(function(pdf) {
I don't know what makes your safari browser fail, but if you can see sample.pdf on my test site, you have to be very close to solving this.

I've figured out how to get things working on Mac Safari & iPad
I removed the 'strict mode' at the beginning of
1. pdf.js/src/core/worker.js
2. pdf.js/web/download_manager.js
And worked!!

if you're going to support versions below Safari 14, from what I understood PDFjs doesn't support that.
you will need to use an external viewer in an object tag:
<object data="https://drive.google.com/viewerng/viewer?embedded=true&url=https://researchtorevenue.files.wordpress.com/2015/04/1r41ai10801601_fong.pdf&embedded=true"></object>

I had the same problem with Safari Mobile... Can't open more than 1 Mb PDF's... I solved fragmenting the file in parts of 900 kb, join them in local and then injecting to pdf.js as Uint8Array() object. I think it's a no documented limitation.

Loading Meteor .js in a local Html file in android

I am trying to work with Meteor. Now I have the entire setup running in my localmachine with apache2 and the meteor.js also works when browsing the same URL from Android Emulator's Browser . Now the main problem is that I need the functionality in my android app from a local URL and here the page is not able to load the remote js. I am loading the following html using WebViews loadURL method after setting the javascript as enabled .The js embedded in the html will be something like this
<script type="text/javascript" src="http://meteor.mywebserver.com/meteor.js"></script>
<script type="text/javascript">
window.onload = function()
{
Meteor.host = "meteor.mywebserver.com";
alert(textStatus);
// Call the test() function when data arrives
Meteor.registerEventCallback("process", commentsUpdate);
// Join the demo channel and get last five events, then stream
Meteor.joinChannel("demo", 0);
Meteor.mode = 'longpoll';
// Start streaming!
Meteor.connect();
// Handle incoming events
function commentsUpdate(data)
{
alert(data);
};});
After searching around a lot I tried this stackoverflow answer
To no avail . Can anybody help me find a work around here , I cant use a local meteor.js as it wont work.
Thanks

This has since been addressed in Meteor by way of integrated Cordova, which you can read about here. Basically, you tell Meteor that you want to add the Android platform to your app, and it builds the Android project files for you. Your app will look as if it's running native, but it's really just running in a light app surrounding a "web view". In iOS this is done using WebKit, but I think in Android it depends on the version of the OS.
You will still need to deploy your app to the Play store, which requires signing the app and all.