Our application uses an $http interceptor to add tokens to $http requests as a form of security, the token that the interceptor adds are updated every 5 or so minutes. We now want to use ng-grid.
However, the $http interceptor makes is so that ng-grid will not load the template it uses for the header row, which causes the header row to not render.
Here is the issue in action: http://plnkr.co/edit/krvBF2e4bHauQmHoa05T?p=preview
If you check the console it shows the following error:
GET http://run.plnkr.co/l0BZkZ2qCLnzBRKa/ng1389719736618headerRowTemplate.html?securityToken=123456 404 (Not Found)
The reason why this happens is because ng-grid stores the template for the header row in the $templateCache, and then uses an ng-include to later retrieve it.
ng-include uses a $http.get request, with $templateCache as the cache, to get the template.
The $http.get request is intercepted by the interceptor which adds the security token to the url before it has a chance to query $templateCache for the template using the url.
$templateCache is expecting ng1389719736618headerRowTemplate.html but instead gets ng1389719736618headerRowTemplate.html?securityToken=123456
The result is that the $templateCache can't find the template, which then results in $http.get hitting the server and getting the 404 error.
The other issue is that if we ever wanted to use $templateCache to store templates and later retrieve it with ng-include or $http.get, $templateCache would not being able to find the template because the url would get modified.
How can I get ng-grid to display the header row with the $http interceptor adding security tokens to the end of the urls?
here is the code
Html:
<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
<meta charset="utf-8">
<title>Custom Plunker</title>
<link rel="stylesheet" type="text/css" href="http://angular-ui.github.com/ng-grid/css/ng-grid.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.min.js"></script>
<script type="text/javascript" src="http://angular-ui.github.com/ng-grid/lib/ng-grid.debug.js"></script>
<script type="text/javascript" src="main.js"></script>
</head>
<body ng-controller="MyCtrl">
<div class="gridStyle" ng-grid="gridOptions"></div>
</body>
</html>
javascript:
var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function($scope) {
$scope.myData = [{name: "Moroni", age: 50},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34}];
$scope.gridOptions = { data: 'myData' };
});
app.config(function($provide, $httpProvider) {
$provide.factory('tokenAuthInterceptor', function($q){
return {
// optional method
'request': function(config) {
// do something on success
config.url = config.url + "?securityToken=123456";
return config || $q.when(config);
}
};
});
$httpProvider.interceptors.push('tokenAuthInterceptor');
});
Update
The solution that was finally decided upon was to use an angular decorator and decorate $templateCache, the plunker was updated to reflect this.
$provide.decorator('$templateCache', function($delegate) {
var get = $delegate.get;
function formatKey(key)
{
// code for formatting keys
}
$delegate.get = function(key) {
var entry = get(key);
if (entry)
{
return entry;
}
else
{
return get(formatKey(key));
}
};
return $delegate;
});
We ran into this same issue and implemented a quick check in our interceptor to check if the item was already in the templateCache.
if ($templateCache.get(config.url)){
return config;
}
I got the idea from the cachebuster project.
Related
I would like to display a Google Analytics report in my web application. So far I have successfully Authenticated a user through OAuth with server side and I have successfully stored AccessToken and UserProfileId in my database Table.
Now I want to display Chart like Below:
Here is the script which I have taken from the source to display above chart: Embeded API demo
Script:
gapi.analytics.auth.authorize({
container: 'embed-api-auth-container',
clientid: 'REPLACE WITH YOUR CLIENT ID', // i dont want to authenticate here as i have already done authentication.instead use access token to by pass this
authentication
});
So is it possible to not authenticate user with this script and still display google analytics chart for login user??
I have search on internet and I found below link somewhat useful in which Philip Walton answer is saying that it is possible: Google Analytics Embed API authentication
So if anybody have done this then please do provide any solution.
I found this option Embed API - Component Reference from this link which solved my issue:
I just needed to set the access_token:
gapi.analytics.auth.authorize({
serverAuth: {
access_token: 'XXXXXX'
}
});
try this using JavaScript sdk
<!DOCTYPE html>
<html>
<head>
<title>Embed API Demo</title>
</head>
<body>
<!-- Step 1: Create the containing elements. -->
<section id="auth-button"></section>
<section id="view-selector"></section>
<section id="timeline"></section>
<hr/>
<section id="chart-1-container"></section>
<!-- Step 2: Load the library. -->
<script>
(function(w,d,s,g,js,fjs){
g=w.gapi||(w.gapi={});g.analytics={q:[],ready:function(cb){this.q.push(cb)}};
js=d.createElement(s);fjs=d.getElementsByTagName(s)[0];
js.src='https://apis.google.com/js/platform.js';
fjs.parentNode.insertBefore(js,fjs);js.onload=function(){g.load('analytics')};
}(window,document,'script'));
</script>
<script>
gapi.analytics.ready(function() {
// Step 3: Authorize the user.
var CLIENT_ID = 'xxxxxxxxxxx-xxxx.apps.googleusercontent.com';
//gapi.analytics.auth.authorize({
// container: 'auth-button',
// clientid: CLIENT_ID,
//});
gapi.analytics.auth.authorize({
'serverAuth': {
'access_token': 'xx.xxxxx-xxxxxxxxxx_xxxxxxx'
}
});
// Step 4: Create the view selector.
var viewSelector = new gapi.analytics.ViewSelector({
container: 'view-selector'
});
// Step 5: Create the timeline chart.
var timeline = new gapi.analytics.googleCharts.DataChart({
reportType: 'ga',
query: {
'dimensions': 'ga:date',
'metrics': 'ga:users',
'start-date': '30daysAgo',
'end-date': 'yesterday',
},
chart: {
type: 'LINE',
container: 'timeline'
}
});
var dataChart1 = new gapi.analytics.googleCharts.DataChart({
query: {
'ids': 'ga:xxxxxxxx', // <-- Replace with the ids value for your view.
'start-date': '30daysAgo',
'end-date': 'yesterday',
'metrics': 'ga:sessions,ga:users',
'dimensions': 'ga:date'
},
chart: {
'container': 'chart-1-container',
'type': 'LINE',
'options': {
'width': '100%'
}
}
});
dataChart1.execute();
// Step 6: Hook up the components to work together.
gapi.analytics.auth.on('success', function(response) {
viewSelector.execute();
});
viewSelector.on('change', function(ids) {
var newIds = {
query: {
ids: ids
}
}
timeline.set(newIds).execute();
});
});
</script>
</body>
</html>
Does reactjs works fine with IE8? I am using React v0.11.1.
Following code is NOT working in IE8. Works fine on all the other browsers
SCRIPT438: Object doesn't support property or method 'isArray'
File: react.js, Line: 17372, Column: 37
SCRIPT5009: 'React' is undefined
File: myreact.js, Line: 3, Column: 1
SCRIPT438: Object doesn't support property or method 'map'
File: JSXTransformer.js, Line: 12637, Column: 3
/** #jsx React.DOM */
var MyComponent = React.createClass({displayName: 'MyComponent',
getDefaultProps:function(){
return{
text:"",
numbers:0
}
},
getInitialState:function(){
return {txt:"initial", id:0}
},
updateText: function(event){
this.setState({text:event.target.value})
},
propTypes:{
text:React.PropTypes.string,
numbers: React.PropTypes.number.isRequired
},
render:function(){
return (
React.DOM.div(null,
Widget({text: this.state.text, update: this.updateText}),
Widget({text: this.state.text, update: this.updateText})
)
)
}
});
var Widget = React.createClass({displayName: 'Widget', render:function(){
return(
React.DOM.div(null,
React.DOM.input({type: "text", onChange: this.props.update}),
React.DOM.div(null, this.props.text)
)
)
}
});
React.renderComponent(
MyComponent({text: "HI there", numbers: 34}),
document.getElementById("content")
);
You need to use the following shims/pollyfills as noted in the react docs. es5-shim will resolve the specific isArray bug you are seeing.
I've managed to launch my React app in IE8 using the following code:App.js:
require('core-js'); //Important!
var React = require('react');
var ReactDOM = require('react-dom');
var Application = React.createClass({ ... });
ReactDOM.render(React.createElement(Application,null), document.getElementById("app-container"));
index.html:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.5.7/es5-shim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.5.7/es5-sham.min.js"></script>
<script type="text/javascript" src="bundle.js" defer></script>
</head>
<body>
<div id="app-container"></div>
</body>
</html>
Comments: bundle.js will be loaded after es5-shim/es5-sham because of defer html attribute
I m creating Web application using MVC3.In Global.asax we are giving the routings like below.
public static void RegisterRoutes(RouteCollection routes)
{
routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
routes.MapRoute(
"Default", // Route name
"{controller}/{action}/{id}", // URL with parameters
new { controller = "Login", action = "RedirectToLogin", id = UrlParameter.Optional } // Parameter defaults
);
routes.MapRoute(
"Paging",
"Home/Page/{page}",
new { controller = "Login", action = "RedirectToLogin" }
);
}
After this in Login page we are giving ~ symbol to access the css,js files like below.
<link href="<%=Url.Content("~/Content/jquery.mobile/jquery.mobile.min.css")%>" rel="stylesheet" type="text/css" />
<script src="<%=Url.Content("~/Scripts/jquery.mobile.min.js")%>" type="text/javascript"></script>
And other aspx pages we are access the css,js files like below
<link href="<%= Url.Content("../Content/jquery.mobile/jquery.mobile.min.css")%>" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="<%= Url.Content("../Scripts/jquery.mobile.min.js")%>"></script>
ADDED
I am using common toast message for all pages.At that time
if (messageType == "notification") {
$.mobile.loading("show", {
text: message,
textVisible: true,
theme: "b",
textonly: false,
html: "<span></span><img src='../Content/jquery.mobile/images/notice.png' style='margin-left:75px'><h1>" + message + "</h1>"
});
While accessing the image in different page creating problem.
}
Url accessing is different between the pages.Is there any way to make it common for all pages.Please suggest the solution for this
I'm writing a sencha touch app using sencha architect. Because my app do lot of ajax request, most of it need to send 'token' in request header for authentication. So I think of create child class base on Ext.Ajax which always has 'token' in request header. Then I can use this child class without care of the header.
MyApp.override.Ajax.request({ ... })
I try define this in app/override/Ajax.js
Ext.define('Myapp.override.Ajax', {
override: 'Ext.Ajax',
headers: {
'token': 'test'
}
});
I also set this as 'requires' in Application. But get error when try to call
Myapp.override.Ajax.request({ ... })
Seem Myapp can not locate .override package (MyApp.override is undifined)
How to let MyApp know override package or what is the correct/best way to do this.
A quick example is very appreciated. Thank you very much.
Update info:
override file location: app\override\Ajax.js
html file:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script>
var Ext = Ext || {};
Ext.theme = {
name: "Default"
};
</script>
<script src="sencha-touch-all-debug.js"></script>
<link rel="stylesheet" href="resources/css/sencha-touch.css">
<script src="app/override/Ajax.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body></body>
</html>
app.js file
Ext.Loader.setConfig({
});
Ext.application({
requires: [
'MyApp.override.Ajax'
],
views: [
'ContactDetailView'
],
name: 'MyApp'
...
App can start without error, but when call MyApp.override.Ajax.request : Cannot read property 'Ajax' of undefined , mean MyApp.override is undefined
Update
Here something news, it better but not working yet.
Ext.define('MyApp.Ajax', {
extend: 'Ext.data.Connection',
singleton: true,
request: function( options ) {
this.constructor(options, options.url);
console.log(options);
options.header = {'Token':'mytoken'};
this.callParent( options );
}
});
and error when try MyApp.Ajax.request() . I'm sure that options.url is exist in options by check the log
[ERROR][Ext.data.Connection#request] No URL specified
I add extend from constructor function
constructor : function (config, url)
{
config = config || {};
//config.url = 'google.com';
this.initConfig(config);
this.callParent(config);
},
Error just disappear when I remove comment from config.url = 'google.com'; but it comes that the config.url there is ajax request url but local file url ??? I see from chrome console and network ?
GET file:///C:/MyApp/assets/www/google.com?_dc=1370855149720
Please help. thanks.
Finally, this is work with me
Ext.define('MyApp.Ajax', {
extend: 'Ext.data.Connection',
singleton: true,
request: function( options ) {
options.headers = {
Token: 'mytoken',
};
this.callParent( [options] );
}
});
And this simple do what i want too, great.
Ext.Ajax.on('beforerequest', (function(conn, options, eOpts) {
options.headers = {
Token: 'mytoken',
};
}), this);
You don't seem to agree with yourself about the name of your override class:
Myapp.override.Ajax
Lunex.override.Ajax
Myapp.override.data.proxy.Ajax
Which one is it? Pay attention to this, the Loader won't go easy about it...
Anyway, you seem a bit confused about override and extend.
extend does create a new class from the parent class, with the modifications you've specified. Then you can use the class you defined, like you're trying to do.
override, on the other hand, applies the modification to the existing class. In this case, the class name is only used for the require statement, and by the loader. No actual class is created. So, in your example, the namespace MyApp.override is not defined, hence the error. Nevertheless, whenever you use Ext.Ajax, your custom header should be sent. Provided you're manager to load your file, that is ;p
Now, your case is a bit special because Ext.Ajax is a singleton instance of Ext.data.Connection. See its code, there's not much in there. And while overriding a singleton can make sense, extending from it would be disturbing.
So, what you were probably trying to do is that:
Ext.define('Myapp.Ajax', {
extend: 'Ext.data.Connection',
headers: {
'token': 'test'
}
});
So that you can do:
Myapp.Ajax.request({ ... });
Whether the best choice here is to override or to extend is a tough question. I'm glad you didn't ask it!
Why not using the config 'defaultHeaders' in your extended class? In that way it's always added to your headers.
http://docs-origin.sencha.com/touch/2.4.0/apidocs/#!/api/Ext.data.Connection-cfg-defaultHeaders
From the source of Ext.data.Connection
setupHeaders: function(xhr, options, data, params) {
var me = this,
headers = Ext.apply({}, options.headers || {}, me.getDefaultHeaders() || {}),
contentType = me.getDefaultPostHeader(),
jsonData = options.jsonData,
xmlData = options.xmlData,
key,
header;
Using soundManager2, I made a simple anchor with onclick="mySound.play()", but there is a big gap (almost half a second) before the sound is actually heard! This is, even though I pre-loaded the sound. How can I get a better response-time?
Here is the source code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" >
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="author" content="Shawn Inder" />
<title>jeuReno</title>
<style type="text/css">
<!--
-->
</style>
<!-- include SM2 library -->
<script type="text/javascript" src="soundManager/script/soundmanager2.js"></script>
<!-- configure it for your use -->
<script type="text/javascript">
soundManager.url = 'soundManager/swf/'; // directory where SM2 .SWFs live
// Note that SoundManager will determine and append the appropriate .SWF file to the URL,
// eg. /path/to/sm2-flash-movies/soundmanager2.swf automatically.
// Beta-ish HTML5 audio support (force-enabled for iPad), flash-free sound for Safari + Chrome. Enable if you want to try it!
// soundManager.useHTML5Audio = true;
// do this to skip flash block handling for now. See the flashblock demo when you want to start getting fancy.
soundManager.useFlashBlock = false;
// disable debug mode after development/testing..
// soundManager.debugMode = false;
// Option 1: Simple onload() + createSound() method
/*soundManager.onload = function() {
// SM2 has loaded - now you can create and play sounds!
soundManager.createSound('helloWorld','sounds/crash.mp3');
soundManager.play('helloWorld');
};*/
// Option 2 (better): More flexible onload() + createSound() method
/*soundManager.onload = function() {
var mySound = soundManager.createSound({
id: 'aSound',
url: 'sounds/kick.mp3'
// onload: [ event handler function object ],
// other options here..
});
mySound.play();
}*/
// Option 3 (best): onready() + createSound() / ontimeout() methods for success/failure:
/*soundManager.onready(function() {
// SM2 has loaded - now you can create and play sounds!
var mySound = soundManager.createSound({
id: 'aSound',
url: 'sounds/snare.mp3'
// onload: [ event handler function object ],
// other options here..
});
mySound.play();
});*/
soundManager.useHighPerformance = true;
soundManager.ontimeout(function() {
// (Optional) Hrmm, SM2 could not start. Show an error, etc.?
alert("wtf");
});
</script>
<script type="text/javascript">
/*var snare = soundManager.createSound({
id: 'snare',
url: 'sounds/snare.mp3'
});
var kick = soundManager.createSound({
id: 'kick',
url: 'sounds/kick.mp3'
});
var crash = soundManager.createSound({
id: 'crash',
url: 'sounds/crash.mp3'
});
var highHat = soundManager.createSound({
id: 'highHat',
url: 'sounds/highHat.mp3'
});*/
soundManager.onready(function() {
// SM2 has loaded - now you can create and play sounds!
mySound = soundManager.createSound({
id: 'aSound',
url: 'sounds/snare.mp3'
// onload: [ event handler function object ],
// other options here..
});
mySound.load();
// mySound.play();
});
</script>
</head>
<body>
click
</body>
</html>
I don't see where the song gets preloaded. You want to set autoLoad to true in the default or createSound section (the defaults should be inherited by createSound).
In the default section it would be soundManager.autoLoad = true;
Or in the createSound method autoLoad:true, id: 'aSound', url: 'sounds/kick.mp3'