Develop Reference

Include Adobe DTM asynchronously in AngularJS

We have a platform developed with AngularJS. The platform is the same for all our customers.
We must include Adobe DTM only for a client.
I sometimes have external scripts that aren't loaded.
Do you have a better way to do it?
var adobedtm = '//assets.adobedtm.com/5249...abe2e5/satelliteLib-2d8560...eb5937-staging.js';
if( window._env.environment === 'production' ){
adobedtm = "//assets.adobedtm.com/5249...abe2e5/satelliteLib-2d8560...eb5937.js"
}
$.getScript('//cdnjs.cloudflare.com/ajax/libs/postscribe/2.0.8/postscribe.min.js', function (data, textStatus, jqxhr){
postscribe(document.body, '<script src="' + adobedtm + '" type="text/javascript"><script type="text/javascript">_satellite.setDebug(true);</script><script type="text/javascript">_satellite.pageBottom();</script>');
});

I believe there is no better way other than embedding DTM library in the header section of your HTML file. the external scripts are added using document.write() which only work while the page is loading.
Reference: http://javascript.info/modifying-document#a-word-about-document-write

Dynamically insert and execute a script resource

Hope I can explain this properly. We are currently inserting this external JS in our HTML:
<script src="https://NotOurDomain.com/SomeScript.js"></script>
The code in this script resource is something like this:
var callbackUrl = encodeURIComponent(window.location.href);
var token = encodeURIComponent('eidoasjdiojancoxjnegkjasd');
var url = 'https://NotOurDomain.com/path?token=' + token + '&callbackUrl=' + callbackUrl;
document.open();
document.write('<iframe src="' + url + '"></iframe>');
document.close();
This all works fine, but now I need to insert this dynamically. Problem is, I can't just copy the code in this script resource because the "token" part changes periodically.
How can I get this to work? Is it possible to load https://NotOurDomain.com/SomeScript.js as a string and parse out the token so that I could create and insert an iframe with the correct URL? Or is there a simpler way of doing this?
This obviously does not work because a script include will only execute on load:
jQuery('#someDiv').append('<script src="https://NotOurDomain.com/SomeScript.js"></script>');
But is there some way to get it to "eval" after inserting?

Implementing pdf.js in android to read from sd card

I'm trying to implement a pdf viewer for my android app which displays different pdf files which are present in the SD card.
I am thinking of using the pdf.js library.I used the code sample as posted here: https://bitbucket.org/butelo/pdfviewer/
However, the library takes the pdf url in the javascript file which is relative address to the folder to which it belongs (/assets/pdfviewer).
<script type="text/javascript">
var url = '../compressed.tracemonkey-pldi-09.pdf';
</script>
How can I redirect it to use a pdf present in a folder in the sdcard ?
Also the filenames of the pdfs are not fixed and I need to change them in the program as per requirement.
Update --------------------------------------------------------------------------------------------------------------------------
I updated the java code like this:
Uri path = Uri.parse(Environment.getExternalStorageDirectory().toString() + "/data/test.pdf");
webView.loadUrl("file:///android_asset/pdfviewer/index.html?file=" + path);
In the pdffile.js, I modified the following:
From:
<script type="text/javascript">
var url = '../compressed.tracemonkey-pldi-09.pdf';
</script>
To:
var url = getURLParameter('file');
function getURLParameter(name) {
return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.search)||[,""])[1].replace(/\+/g, '%20'))||null}
The above javascript code extracts the 'file' parameter from the URL of the 'index.html'
Still does not work. The webview 'chromium' in logcat shows:
I/chromium(1353): [INFO:CONSOLE(106)] "Warning: Unhandled rejection:
Unexpected server response (0) while retrieving PDF "file:///storage/sdcard0/data/test.pdf".", source: file:///android_asset/pdfviewer/pdf.js (106)"
This seems to be cross server issue. So how can I modify the pdf.js code to read local files without server ?

Solved the issue. The app was missing READ_EXTERNAL_STORAGE permissions.
The code can be found at: https://github.com/pauldmps/Android-pdf.js
Its Apache V2 license, so feel free to use in your app.

Do we need a web server (like Apache) to access a .json file?

I was trying to read an info.json file, using the jQuery API. Please find the code below, which is part of test.html.
$.getJSON('info.json', function(data) {
var items = [];
$.each(data, function(key, val) {
items.push('<li id="' + key + '">' + val + '</li>');
});
The test.html file resides on my local machine and when I try to open it in the browser, the Ajax call is not getting triggered and the info.json file is not read.
Is it not working because I don't have a web server? Or am I doing anything wrong in the code? (I don't see any errors in the Firebug console though).
Thanks in advance.

You will always have to host your site from where you are making AJAX call. Otherwise it will throw this exception.
origin null is not allowed by access-control-allow-origin
Host your page on localhost server and I guess everything will work nicely.

While technically you don't need a web server for this, some of the libraries you use to abstract network access may not work with local files and some browsers don't let local files do a lot, so something like a little test web server for static files would be very useful for your development and testing.

Install a small webserver like http://jetty.codehaus.org/jetty/
easy to install, and small download ;)

By putting your JSON string into a text file and loading it in a iframe, you can extrapolate the data. (Most browsers can load .txt files in iframes.)
var frame = document.createElement("IFRAME"); //Create new iframe
var body = document.body;
frame.onload = function() { //Extrapolate JSON once loaded
data = JSON.parse(frame.contentDocument.documentElement.innerText); //Loads as a global.
body.removeChild(frame); //Removes the frame once no longer necessary.
}
frame.style.display = "none"; //Because the frame will have to be appended to the body.
body.appendChild(frame);
frame.src = "your JSON.txt"; //Select source after the onload function is set.

XMLHttpRequest() and Google Analytics Tracking

I have implemented an XMLHttpRequest() call to a standalone html page which simply has an html, title & body tag which Google Analytics Tracking code.
I want to track when someone makes a request to display information (i.e. phone number) to try and understand what portion of people look at my directory versus obtaining a phone number to make a call.
It is very simple code:
var xhReq = new XMLHttpRequest();
xhReq.open("GET", "/registerPhoneClick.htm?id=" + id, false);
xhReq.send(null);
var serverResponse = xhReq.responseText
Yet I cannot see the "hit" in Analytics... Has anyone had this issue? All the analytics tracking code does is call:
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-XXXXXXX");
pageTracker._trackPageview();
} catch(err) {}</script>
So realistically, my XmlHTTPRequest() calls an htm file within which a script is execute to make an outbound call to Google Analytics.
Is there any reason why an XmlHTTPRequest() would not execute this?
Does an XmlHTTPRequest() still bring the code to the client before execution?
Help Please

Requesting the file doesn't mean that it's automatically executed. You just get the content of the file back as a string.
For the code to be executed, it would have to be loaded as a page in the browser. You can for example use an iframe to load it.

To those having similar issues, obviously analytics won't track XMLHttpRequest() so to get around it, I found this post: Tracking API: Basic Configuration which explains how to simply log a pageview using javascript.
I simply added the following code to my javascrip:
var pageTracker = _gat._getTracker("UA-XXXXX-XXX");
pageTracker._trackPageview("/home/landingPage");
Much cleaner, easier and simpler than what I was originally trying to do...