Im using ace editor and mootools.
I have just updated my mootools to version 1.4.5 and when i click/drag on the editor i get js exception:
Uncaught TypeError: Cannot read property 'clientX' of undefined
Please help... Thanks
Instead of removing the bind method always I think I found a workaround. It seems that only a couple of Mootools builds have this issue. So I use this code to fix them:
if (this.MooTools.build=='ab8ea8824dc3b24b6666867a2c4ed58ebb762cf0') {
delete Function.prototype.bind;
Function.implement({
/*<!ES5-bind>*/
bind: function(that){
var self = this,
args = arguments.length > 1 ? Array.slice(arguments, 1) : null,
F = function(){};
var bound = function(){
var context = that, length = arguments.length;
if (this instanceof bound){
F.prototype = self.prototype;
context = new F;
}
var result = (!args && !length)
? self.call(context)
: self.apply(context, args && length ? args.concat(Array.slice(arguments)) : args || arguments);
return context == that ? result : context;
};
return bound;
},
/*</!ES5-bind>*/
});
}
The benefit is that I can fix it for each build separately. The drawback is clearly to have mootools code shipped with my own code. But currently I see no other option and since I code for Joomla I'm pretty sure that there is a limited number of mootools versions in use.
i solve it for my situation!
i've delete some lines from mootools.js:
1) bind:function(e){var a=this,b=arguments.length>1?Array.slice(arguments,1):null,d=function(){};var c=function(){var g=e,h=arguments.length;if(this instanceof c){d.prototype=a.prototype;
g=new d;}var f=(!b&&!h)?a.call(g):a.apply(g,b&&h?b.concat(Array.slice(arguments)):b||arguments);return g==e?f:g;};return c;}
2) delete Function.prototype.bind;
(i don't need mouse binding in mootools so it's revelation for me!)
This is a very strange error. During debugging I didn't get the error. But as soon as I removed the breakpoint it appeared again. I finally solved the issue by adding the latest version of mootools 1.4.5 to joomla. The error was immediately gone.
Related
I'm using the jspsych.js module, and when using it, I look at the console and I'm getting this error:
The AudioContext was not allowed to start. It must be resumed (or created) after a user gesture on the page.
and it takes me to this lines of code:
core.webaudio_context = (typeof window !== 'undefined' && typeof window.AudioContext !== 'undefined') ? new AudioContext() : null;
I don't get where the mistake is.
You need to a user-events to initiate audio.
Can you check the error lines again? Probably you are trying to start audio automatically but it's not possible.
add button your page:
<button class="play">Play</button>
Then add function to use your audio source the following;
play.onclick = function() {
audioSource.start(0);
//or another function to use audio source
}
I have created a reproduction of this bug here (ugly use of Aurelia but to prove the point): https://jberggren.github.io/GoogleAureliaBugReproduce/
If I load Google API and try to list my files in Google Drive my code derived from Googles quickstart works fine. If I use the same code after loading Aurelia I get a script error from gapi stating
Uncaught Error: arrayForEach was called with a non array value
at Object._.Sa (cb=gapi.loaded_0:382)
at Object._.eb (cb=gapi.loaded_0:402)
at MF (cb=gapi.loaded_0:723)
at Object.HF (cb=gapi.loaded_0:722)
at Object.list (cb=gapi.loaded_0:40)
at listFiles (index.js:86)
...
When debugging it seems to be some sort of array check (Chroms says 'native code') that failes after Aurelia is loaded. In my search for an answer I found two other people with the same problem but no solution (Aurelia gitter question, SO Question). Don't know if to report this to the Aurelia team, Google or where the actual problem lays.
Help me SO, you are my only hope.
This is not a perfect solution but works.
aurelia-binding
https://github.com/aurelia/binding/blob/master/src/array-observation.js
Aurelia overrides Array.prototype.* for some reasons.
gapi (especially spreadsheets)
Gapi lib checks to make sure that is it native code or not.
// example
const r = /\[native code\]/
r.test(Array.prototype.push)
conclusion
So, we have to monkey patching.
gapi.load('client:auth2', async () => {
await gapi.client.init({
clientId: CLIENT_ID,
discoveryDocs: ['https://sheets.googleapis.com/$discovery/rest?version=v4'],
scope: 'https://www.googleapis.com/auth/spreadsheets',
});
// monkey patch
const originTest = RegExp.prototype.test;
RegExp.prototype.test = function test(v) {
if (typeof v === 'function' && v.toString().includes('__array_observer__.addChangeRecord')) {
return true;
}
return originTest.apply(this, arguments);
};
});
I'm writing a unit test of an AngularJS 1.x directive.
If I use "template" it works.
If I use "templateUrl" it does not work (the directive element remains the same original HTML instead of being "compiled").
This is how I create the directive element to test in Jasmine:
function createDirectiveElement() {
scope = $rootScope.$new();
var elementHtml = '<my-directive>my directive</my-directive>';
var element = $compile(elementHtml)(scope);
scope.$digest();
if (element[0].tagName == "my-directive".toUpperCase()) throw Error("Directive is not compiled");
return element;
};
(this does not actually work, see Update for real code)
I'm using this workaround to use the $httpBackend from ngMockE2E (instead of the one in ngMock). In the browser developer "network" tab I don't see any request to the template file. It seems to work because I solved the error "Object # has no method 'passThrough'".
I know that the call to the template is done asynchronously using the $httpBackend (this means $compile exit before the template is really applied).
My question is:
obviously $compile is not doing what I expect. How can I trap this error?
If I use a wrong address in the templateUrl I don't receive any error.
How can I found the problem happened when I called $compile(directive) or scope.$digest() ?
Thanks,
Alex
[Solution]
As suggested by #Corvusoft I inject $exceptionHandler and I check for errors after every test.
In the end this is the only code I have added:
afterEach(inject(function ($exceptionHandler) {
if ($exceptionHandler.errors.length > 0)
throw $exceptionHandler.errors;
}));
Now I can clearly see the errors occurred in the Jasmine test result (instead of search for them in the console), example:
Error: Unexpected request: GET /api/category/list
No more request expected,Error: Unexpected request: GET /api/category/list
No more request expected thrown
And, most important, my tests does not pass in case there are some errors.
[Update to show real example case]
Actually the real code to make templateUrl work use asynchronous beforeEach ("done") and a timeout to wait the end of compile/digest.
My directive use some prividers/services and the template contains other directives which in turn use their templateUrl and make calls to some APIs in the link function().
This is the current (working) test code:
// workaround to have .passThrough() in $httpBackend
beforeEach(angular.mock.http.init); // set $httpBackend to use the ngMockE2E to have the .passThrough()
afterEach(angular.mock.http.reset); // restore the $httpBackend to use ngMock
beforeEach(inject(function (_$compile_, _$rootScope_, _$http_, $httpBackend, $templateCache, $injector) {
$compile = _$compile_;
$rootScope = _$rootScope_;
$http = _$http_;
$httpBackend.whenGET(/\/Scripts of my app\/Angular\/*/).passThrough();
$httpBackend.whenGET(/\/api\/*/).passThrough(); // comment out this to see the errors in Jasmine
}));
afterEach(inject(function ($exceptionHandler) {
if ($exceptionHandler.errors.length > 0)
throw $exceptionHandler.errors;
}));
beforeEach(function(done) {
createDirectiveElementAsync(function (_element_) {
element = _element_;
scope = element.isolateScope();
done();
});
});
function createDirectiveElementAsync(callback) {
var scope = $rootScope.$new();
var elementHtml = '<my-directive>directive</my-directive>';
var element = $compile(elementHtml)(scope);
scope.$digest();
// I haven't found an "event" to know when the compile/digest end
setTimeout(function () {
if (element.tagName == "my-directive".toUpperCase()) throw Error("Directive is not compiled");
callback(element);
}, 0.05*1000); // HACK: change it accordingly to your system/code
};
it("is compiled", function () {
expect(element).toBeDefined();
expect(element.tagName).not.toEqual("my-directive".toUpperCase());
});
I hope this example helps someone else.
$exceptionHandler
Any uncaught exception in AngularJS expressions is delegated to this
service. The default implementation simply delegates to $log.error
which logs it into the browser console.
In unit tests, if angular-mocks.js is loaded, this service is overridden by mock $exceptionHandler which aids in testing.
angular.
module('exceptionOverwrite', []).
factory('$exceptionHandler', ['$log', 'logErrorsToBackend', function($log, logErrorsToBackend) {
return function myExceptionHandler(exception, cause) {
logErrorsToBackend(exception, cause);
$log.warn(exception, cause);
};
}]);
i am following a famous book "beginning html5 game development with createjs.pdf " Apress Publication .
Anyhow when i run the codes i get error in my browser console : i updated my createjs hosted lib to latest version
gs skinner github i found p.initialize =function is deprecated .
i am not a good programmer. is there any way so that i can fix the error and run the codes of this book. thanks
Uncaught TypeError: this.EventDispatcher_initialize is not a function
AssetManager.js:34 Uncaught TypeError:
here i pasted few lines for 34 to last of function
p.initialize = function () {
this.EventDispatcher_initialize();
this.loadManifest = [
{id:this.EXPLOSION, src:this.assetsPath + 'explosion.mp3'},
{id:this.SOUNDTRACK, src:this.assetsPath + 'dreamRaid1.mp3'},
{id:this.GAME_SPRITES_DATA, src:this.assetsPath + 'all.json'},
{id:this.GAME_SPRITES, src:this.assetsPath + 'all.png'}
];
}
Can you show more of your code? The this.EventDispatcher_initialize is used with early inheritance approaches, as well as with the newer extend/promote approach.
If you are using the old approach, there should be a line above this one that says:
p.EventDispatcher_initialize = p.initialize;
This stores the superclass (EventDispatcher) method on the current class prototype first, so you can call it to apply the default functionality. You should also see something like this at the top, which sets up the inheritance:
function MyClass() {
this.initialize();
}
var p = MyClass.prototype = new createjs.EventDispatcher();
If you are missing any of these steps, your code will not work.
I'm trying to run the "Using IndexedDB" sample code on https://developer.mozilla.org/en-US/docs/IndexedDB/Using_IndexedDB
Right out of the gate I stumble with the first line of code:
window.indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB;
Using Firebug I see that window.indexedDB is undefined as expected for FF 15, window.webkitIndexedDB is undefined as expected (FF isn't webkit) but window.mozIndexedDB is null but not undefined. If it's null that tells me it exists but doesn't have a valid value/isn't initialized.
This is with Firefox 15.0.1 on OSX 10.6.8 and Ubuntu 12.04. Can somebody tell me why I'm not able to see/use window.mozIndexedDB? Am I doing something wrong?
For completeness, here's my JavaScript file:
window.indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB;
var request = window.indexedDB.open("MyTestDatabase", 3);
var db;
request.onerror = function (event) {
alert("Oops, request.onerror");
};
request.onsuccess = function (event) {
// Do something with request.result!
alert("Made it to request.onsuccess");
db = request.result;
};
// This event is only implemented in recent browsers
request.onupgradeneeded = function (event) {
alert("Made it to request.onupgradeneeded");
};
db.onerror = function (event) {
alert("Database error (db.onerror): " + event.target.errorCode);
};
My original HTML5 application uses jQuery Mobile & REST WS. In development I would run it directly from the file system and it works fine. For sharing with coworkers I have it running behind Apache httpd.
While adding the IndexedDB, I was trying to test by viewing files from the file system via the browser. It didn't work and that's what caused me to go back to square one and try running the example code from Mozilla.
It appears IndexedDB requires a domain even if it's localhost. I simply placed my code under public_html and viewed it via httpd/localhost and it's working perfectly.