I'm not exactly sure how to ask this question. I don't have easy access to my company site to try this using normal AJAX calls, so I'd need to resolve cross domain issues as well as possibly change settings on our Jira server. Since I'm home all week this week ostensibly on vacation, but a bit bored before Thanksgiving, I thought I'd play around with this so I can get a jump on the project I just got assigned this past Friday.
Using the Jira Rest API, if I drop https://jira.atlassian.com/rest/api/2/projectinto a browser (Chrome) and press enter, I get valid JSON data back in the browser. Granted you have to have valid Jira credentials as well as be already logged onto the site for this to work (otherwise you just get [] for a response), but for the experimentation I'm doing that's OK. I'm just trying to generate some valid data that I can massage into a form.
How can I do this in JavaScript in an automated fashion so the returned JSON goes into a variable that I can use for subsequent data manipulation? Ideally this should work on our real Jira site, but I'm fine if it just works on the sites linked in this question, as I said I'm just doing some experimentation trying to read project data and associated properties.
I've tried (cite):
$.getJSON("https://jira.atlassian.com/rest/api/2/project?callback=?", function(result){
//response data are now in the result variable
alert(result);
});
I've also tried to simply eval() the string into a variable, but that doesn't work either.
My eventual project will most likely be in jQuery / jQuery Mobile, but a straight JS answer is fine, I can translate that into jQuery later if it becomes necessary.
EDIT:
Here is the HTML I'm using to test this and suggestions being made, pretty much straight out of https://html5boilerplate.com/:
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<!-- Place favicon.ico in the root directory -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/vendor/modernizr-2.8.3.min.js"></script>
</head>
<body>
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<!-- Add your site or application content here -->
<p>Hello world! This is HTML5 Boilerplate.</p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.3.min.js"><\/script>')</script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
<script type="text/javascript">
var result = $.get("https://jira.atlassian.com/rest/api/2/project");
console.log(result);
</script>
</body>
So using AJAX / .get, etc was the wrong approach (at least for this experiment, it's the right answer for when I have access to the JIRA server).
What I found that worked was using:
location.href = "https://jira.atlassian.com/rest/api/2/project";
var data = JSON.parse(document.getElementsByTagName('body')[0].innerText);
console.log(data);
This is not a perfect answer because it replaces the body of the web page with the JSON response from JIRA, but it allowed me to move forward. I found several different methods to try in this SO post.
Here's the whole web page:
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<!-- Place favicon.ico in the root directory -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/vendor/modernizr-2.8.3.min.js"></script>
</head>
<body>
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<!-- Add your site or application content here -->
<p>Get JIRA data</p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.3.min.js"><\/script>')</script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
<script type="text/javascript">
location.href = "https://jira.atlassian.com/rest/api/2/project";
var data = document.getElementsByTagName('body')[0].innerText;
console.log(data);
</script>
</body>
</html>
The reason it doesn't work as well as it might is you still have to go after the fact & get the data in the console:
var data = JSON.parse(document.getElementsByTagName('body')[0].innerText);
But that gives you an array of JIRA objects that you can then manipulate.
Adding this SO question to the answer because it contains useful information about solving CORS (Cross Origin Resource Sharing).
Related
I am having a simple markup.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="prefetch" href="page2.html">
<link as="script" rel="prefetch" href="./src/script2.js">
</head>
<body>
<p>Let's check</p>
Go to page 2 where script2 is there
<script src="./src/script1.js"></script>
</body>
</html>
Here I am prefetching the second script script2.js. It is prefetched successfully but when I click on page 2 link where I have my script tag script2.js, again script2 is downloaded it is not taking it from prefetch cache.
Here is the page2.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>This is page 2</p>
<script src="./src/script2.js"></script>
</body>
</html>
Had similar issue and the cause for me was that I had disable cache enabled in Google Chrome.
You can see how to disable/enable caching in Chrome DevTools on this answer https://stackoverflow.com/a/7000899/2992661
I've been facing this issue for a while, just got a clue that HTTP header VARY will hurt prefetch cache. checkout the MDN description about VARY.
https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Vary
The Vary HyperText Transfer Protocol (HTTP) response header determines how to match future request headers. This information is required to decide whether or not a cached response can be served instead of requesting a fresh one from the origin server. This response header is used by the server to indicate the headers it used when selecting a representation of a resource in a content negotiation algorithm.
in my case, after i remove 'vary', the 'prefetch' script did load from 'prefetch cache'.
I have next index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1"> {{content-for 'head'}}
<meta name="fragment" content="!">
<link rel="icon" href="/assets/favicon.ico">
<link rel="stylesheet" href="{{rootURL}}assets/vendor.css?{{app-version hideSha=true}}">
<link rel="stylesheet" href="{{rootURL}}assets/ember-drink-it.css?{{app-version hideSha=true}}"> {{content-for 'head-footer'}}
</head>
<body>
{{content-for 'body'}}
<script src="{{rootURL}}assets/vendor.js?{{app-version hideSha=true}}"></script>
<script src="{{rootURL}}assets/ember-drink-it.js?{{app-version hideSha=true}}"></script>
{{content-for 'body-footer'}}
</body>
</html>
I want to add version to my css and js file to prevent users load these files from cache when version grows. As you see, I already tried with ember-cli-app-version addon, but it helpers doesn't work in index.html file for some reason.
So how can I add version to my app files?
You mentioned that I want to add version to my css and js file to prevent users load these files from cache when version grows.
By default, Ember CLI puts an md5 hash at the end of the url of the assets. So that browsers can track the changes. This is called fingerprinting. This is enabled in production builds by default.
To look forward about fingerprinting have a look at this doc.
Further, instead of using md5 hash, if you want to use your versions as a fingerprint; you can customize the fingerprint options. Get value by using the require('git-repo-version') and set the value to the customHash of fingerprint.
But, default configuration is good enough.
I am trying to enable browser cache the javascript, css files of my web application. The document type I'm using is a JSP.
I see manifest.appcache is deprecated, what is the best way to implement caching so that browser caches the js, css files.
Below is my code
<html manifest="../manifest.appcache">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Web app</title>
<link rel="stylesheet" href="<%= contextPath %>/app.css">
</head>
<body>
<script type="text/javascript" src="<%= contextPath %>/app.js"></script>
</body>
</html>
You have to add Expires to your http response headers. This will make the browser in the client side to save the component of the page until that date.
If you wonder how to set the headers while sending a response, you have to know to configure your server either by using a back-end programming language, or a third party.
Please see expires header .
Try adding this to your html file <meta http-equiv="Cache-control" content="public">
I am developping a web app for iOS and Android, using the last version of PhoneGap.
I want to send Notifications to the users on their phone's status bar, and I cannot figure out how to do that.
It seems that there was a Cordova plugin (StatusBarNotification) that once existed, but all the links I find are dead.
If anyone knows a way to send notif to the statusbar, I would be grateful.
Thanks
Quentin
EDIT : I should have been more specific : I am trying to understand how to use the status area on phones (http://developer.android.com/guide/topics/ui/notifiers/notifications.html), and for that I have a simple html file with a button. I want a notification to appear on the status area when I click the button. (like when you receive a text message, you have a notification).
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<title>Hello World</title>
</head>
<body>
<input type="button" value="Notiiiiiiif" id="btNotif"/>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
btNotif = document.getElementById('btNotif');
btNotif.addEventListener('click', function(){
//There I want a notif to appear in the status bar
});
</script>
</body>
</html>
I am testing this app on my Nexus 4, with Android 4.4.2.
EDIT : I ended up using Google Cloud Messaging (gcm) for android devices and Apple Push Notification (apn) on my node server. This works pretty well with android devices, a bit harder for iphones
Perhaps its already to late for the answer, but I think this would make sence for your furhter work with notifications in PhoneGap. For using StatusBarNotifications in latest versions of PhoneGap (v3.x), you need to a proper Plugin that will work. This should be installed with Cordova CLI.
For the older versions of PhoneGap (v2.9 and below) you still can use DEPRECATED version of StatusBarNotifications from GitHub.
By the way, using of older version is less headache for not experienced developers :)
Hope this will help you.
I'm using phonegap to build an enyo app. My program works completely fine in chrome and it also works in the ripple emulator service for blackberry. My problem is, when I use the .ipk build for webOS and the .apk build for android, I get the same error:
Not allowed to load local resource: file:///usr/palm/enyo.js
Uncaught ReferenceError: enyo is not defined, package.js:1
Uncaught ReferenceError: enyo is not defined, tests/package.js:1
Uncaught ReferenceError: enyo is not defined, index.html:10
This leads me to think that it must be a problem in my index file, which is:
<!DOCTYPE html>
<html>
<head>
<title>Enyo Bootplate App</title>
<link rel="shortcut icon" href="assets/favicon.ico">
<!-- -->
<meta http-equiv="Content-Type" content="text/html; charset=utf8">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <!-- look this up for blackberry ad error -->
<!-- css -->
<link href="build/enyo.css" rel="stylesheet">
<link href="build/app.css" rel="stylesheet">
<!-- js -->
<script src="enyo/enyo.js"></script>
<script src="phonegap.js"></script>
<script src="source/mobile.js" type="text/javascript" ></script>
<script type="text/javascript" src="http://www.blackberry.com/app_includes/asdk/adBanner.js"></script>
<script src="source/gameBanks.js" type="text/javascript"></script>
<script src='https://cdn.firebase.com/v0/firebase-auth-client.js' type='text/javascript'></script>
<script src="https://static.firebase.com/v0/firebase.js" ></script>
<script src="build/enyo.js" ></script>
<script src="build/app.js" onerror="alert('No application build found, redirecting to debug.html.'), location='debug.html';"></script>
</head>
<body class="enyo-unselectable">
<script>
new App().write();
</script>
</body>
</html>
The weird thing is that index.html:10 is a comment (the css comment) so I have no idea how an error could possibly be there. Anyone have any idea why I would be getting this error? Or perhaps what "file:///usr/palm/enyo.js" is? That's not a file in my package.
Also, after messing around with it a bit, adding lines at the top of index.html doesn't change where the error is (index.html:10) so is it possible that the error is referring to some other form of index.html? I went through my commits at github and at no point in time was there anything other than comments at line index.html:10.
Update:
When using any other service to package the apps such as palm-run, it updates my code properly. My builds downloaded off of phonegap are not working properly. Is there any reason why phonegap's build specifically would cause this problem?
Finally solved this problem, phonegap was somehow finding the wrong index.html files. When I downloaded the enyo bootplate, there were some index.html's deep within the api and tools folders. After I removed those, it worked properly.
Strange...not sure what is causing that, but I do see you are trying to load enyo.js twice. I doubt that that is the issue, but it is something you want to clear up.
If you start with the base bootplate project with no changes, does it work to package an ipk/apk?