Trying to load Angular library conditionally using Modernizr, if CDN fails want it to load the library from local machine but it is not working, so what could be the reason
Modernizr.load([
{
load: "//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular.min.js",
complete: function () {
if(!window.angular){
Modernizr.load("bower_components/angular/angular.min.js");
}
}
}]);
Thanks
Ok so like the error says, Modernizr doesn't know what angular is, which means your fallback doesn't work. Take a look at this code:
Modernizr.load([
{
load: '//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.js',
complete: function () {
if (!window.jQuery) {
Modernizr.load('js/libs/jquery-1.6.4.min.js');
}
}
},
{
// This will wait for the fallback to load and
// execute if it needs to.
load: 'needs-jQuery.js'
}
]);
This code attempts to load jQuery from the Google CDN first. Once the script is downloaded (or if it fails) the function associated with complete will be called. The function checks to make sure that the jQuery object is available and if it’s not Modernizr is used to load a local jQuery script. After all of that occurs a script named needs-jQuery.js will be loaded. http://weblogs.asp.net/dwahlin/detecting-html5-css3-features-using-modernizr
Edit
so change this
load: "//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular.min.js",
to this
load: https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular.min.js,
Related
Problem
If I load the page without a service worker, everything is fine but when I introduce a service worker, the page does not load the first time (when online) because it is missing my bundled files which causes both CSS and Script issues. If I refresh the page then everything works because the service worker caches fetch requests when they occur.
Setup
Say I have a bundle such as
bundles.Add(new ScriptBundle("~/js/main").Include(
"~/Scripts/jquery-3.3.1.min.js",
"~/Scripts/moment.min.js",
"~/node_modules/sweetalert/dist/sweetalert.min.js"));
and a service worker in my root directory such as
var cacheName = 'v1:static';
self.addEventListener('install', function (e) {
e.waitUntil(
caches.open(cacheName).then(function (cache) {
return cache.addAll([
'/images/keypad/number 0.png',
'/',
'/Menu/MainMenu',
'**TODO: Cache Bundles**'
]).then(function () {
self.skipWaiting();
});
})
);
});
self.addEventListener('fetch', function (event) {
if (event.request.method != "POST") {
event.respondWith(
caches.match(event.request).then(function (response) {
if (response) {
return response;
}
fetch(event.request).then(function (fetchResponse) {
caches.open(cacheName).then(function (cache) {
cache.put(event.request, fetchResponse.clone());
});
return fetchResponse;
});
})
);
}
});
Question
How do I cache my bundled files in my service worker, in both Debug and Release mode because debug displays them as individual files while Release will combine them, and I don't know the URLs to the bundles?
Additional Thoughts
You can't put a Razor #... in this file because it isn't cshtml.
I don't want to list every file out in both places and maintain both.
I thought about using a server side handler to generate my service-worker.js file but I was wondering if there is an actual clean way to do this without going crazy.
Thank You!
#Scripts.Url("~/bundles/yourBundleName") use this to get the absolute URL for the URL from there you can get the bundle name map that into a variable and use that variable in service worker install event so that assets are cached on load itself.
note:
one mistake which i used to do Also please don’t refer serviceworker.js file directly in to index.html, this will be loaded at the time of registering from sw-registration.js file
I have been finding it quite difficult to get up and running with Qunit for testing jQuery ajax.
In particular I am stumped at trying to use Qunit's module construct with a setUp and tearDown method to reduce repeated code. The following works:
test("ajax request is 200 OK", function () {
var xhr = sinon.useFakeXMLHttpRequest();
var requests = sinon.requests = [];
xhr.onCreate = function (request) {
requests.push(request);
};
var callback_success = sinon.spy();
$.ajax('/course/data', {
success: callback_success,
});
equal(sinon.requests.length, 1);
equal(sinon.requests[0].url, "/course/data");
requests[0].respond(200, { "Content-Type": "application/json" }, '[]');
ok(callback_success.called);
});
I have a JSFiddle which shows a failing test (number 11). (The earlier tests I wrote as I was trying to get my head around everything).
Specifically my question is: why does the test report failure with 'requests is undefined' when I have declared var requests; at global scope on line 115?
Explanation gratefully received! (Edit: For some reason the JSFiddle linked shows problems with sinon.js, not evident when I run the JSFiddle from my fiddle account??)
Found solution to problem with requests being undefined in my JSFiddle. My test module's setup function was never being called. For some reason I was using camelCase to define setup and teardown:
setUp: function () { .....},
tearDown: function() {....}
When of course is should be just plain
setup: function () {...},
teardown: function () {...}
So, basically a case-sensitivity error on my part, compounded with the fact that I'm finding ajax, qunit and sinon quite mind-bending.
I want to build a test that makes sure the Jasmine Test is using a file called SpecRunner.html".
How do I do that?
You can check window.location (at least if you are running tests in browser).
Quick POC code:
describe("File name", function () {
it("ends with SpecRunner.html", function () {
var fileName = window.location.pathname.split("/").pop();
expect(window.location.pathname).toMatch(/SpecRunner.html$/);
});
});
I have built an app using Ionic Framework, AngularJS, and Cordova. In it, I have made AJAX calls to several php files using $http.get(), which works perfectly in a browser, but not within the app. The app is able to render internet pages through an iframe so the network is working. I have whitelisted my server where the php files reside inside of the app.js file and using . Also, in my php files I've added header('Access-Control-Allow-Origin: *');
Any suggestions on how to get this AJAX call to work?
.controller('StuffCtrl', function($scope, StuffService, LoadingService) {
StuffService.getStuff().then(function(data) {
LoadingService.show();
$scope.stuff = data;
LoadingService.hide();
});
})
.service('StuffService', function($http){
var myStuff;
return {
getStuff: function(){
return $http.get('http://mydomain/stuff.php').then(function(items) {
myStuff = items.data; return myStuff;
});
}
});
});
I had the same error while working on a hybrid app and then I added these lines in my route config function and it started working
$httpProvider.defaults.useXDomain=true;
delete $httpProvider.defaults.headers.common['X-Requested-With'];
This is to enable CORS.
More info on the same can be found here
Add a catch handler to get the error :
StuffService.getStuff().then(function(data) {
LoadingService.show();
$scope.stuff = data;
LoadingService.hide();
}).catch(function(error){
$scope.error = error;
});
And pretty display the error :
<pre>{{error|json}}</pre>
This should tell you what is going on.
First time on Stack Overflow :-). I have been using the Leo Outliner mainly to organize my task and writings and works pretty well to let me clarify my mind on complex subjects, but I cant not share my clarities easily with others because they don't use Leo. I have made a small exportation script from Leo to Dynatree just as a test and it works pretty well, so I thought that is was time create a web outliner, using web2py + dynatree. The problem is that dynatree works only for static data that is inside the script, but trying to use code like this:
<script type="text/javascript">
$(function(){
$("#tree").dynatree({
// In real life we would call a URL on the server like this:
// initAjax: {
// url: "/getTopLevelNodesAsJson",
// data: { mode: "funnyMode" }
// },
// .. but here we use a local file instead:
initAjax: {
url: "sample-data1.json"
data: { mode: "all" }
},
onActivate: function(node) {
$("#echoActive").text(node.data.title);
},
onDeactivate: function(node) {
$("#echoActive").text("-");
}
});
});
The part that loads sample-data1.json is not working, no matter that the file exists and it has the proper permissions. I have searched here:
How to Load Dynatree via Ajax using MVC
https://groups.google.com/forum/?fromgroups=#!msg/dynatree/kZqIO1zCTSU/HYTFe9O2docJ
and others places on the web but I cant find how to enable this loading from external data. I have even thought in change my library for YUI or ExtJS. I now that there is a support for trees on web2py using jstree, but, in contrast with dynatree, YUI or ExtJS, JsTree documentation is not very newbie friendly.
Any pointer to a solution would be appreciated.
Where is the file located?
The best is to put the file under static folder
web2py/applications/yourapp/static/sample-data1.json
So you need to tell your Javascript to load this from static folder.
initAjax: {
url: "yourapp/static/sample-data1.json",
data: { mode: "all" }}
Or you can create the url dynamically
<script>
var url_to_sample_data = "{{=URL('static', 'sample-data1.json')}}";
.....
initAjax: {
url: url_to_sample_data,
data: { mode: "all" }
}
.....
</script>