I'm upgrading an old Rails 3.0 application that uses jQuery 1.8.2.
The code below used to work on our Rails 3 app, but now throws Uncaught TypeError: Cannot read property 'status' of null:
$.ajax(...).always(function(data){
console.log(data.status);
})
I do know how to fix this JS issue (function(data, textStatus, xhr) ... xhr.status), but what I don't understand is how that could have worked before the upgrade, and what made the behaviour change.
$().jquery; returns "1.8.2" on both Rails 3 and Rails 5, and we use the same jquery-min file
Related
cable_ready 4.5.0
rails 6.1.4.1
ruby 3.0.2p107
This is a simple example from the basic tutorial (https://www.youtube.com/watch?v=F5hA79vKE_E) I suspect the error I am getting is because either cable_ready or rails evolved a little and created a tiny incompatibility.
I get this error in the JS console:
It is triggered when in my controller I ask cable ready to:
cable_ready["timeline"].console_log(message: "***** cable ready post created")
Which leads to my timeline_channel to:
received(data) {
console.log("******** Received data:", data.operations)
if (data.cableReady) CableReady.perform(data.operations)
}
My interpretation is perform causes this line in cable_ready.js line 13:
operations.forEach(function (operation) {
if (!!operation.batch) batches[operation.batch] = batches[operation.batch] ? ++batches[operation.batch] : 1;
});
Is finding something in the received data that it doesn't like.
That's where my trail ends. Can someone see what I am doing wrong, or tell me what other code you'd like me to include?
Solution: downgrade the version of the cable_ready javascript library.
I previously (maybe a year ago) did this tutorial using CableReady 4.5, Ruby 2.6.5 and Rails 6.0.4 and it worked like a charm back then as well as today.
But today, I tried this tutorial again on a duplicate project--same versions of CR, Ruby, and Rails and now I get java console errors similar to yours.
TypeError: undefined is not a function (near '...operations.forEach...')
perform -- cable_ready.js:13
received -- progress_bar_channel.js:8
I looked at the output of yarn list and saw that cable_ready was version 5.0.0-pre8 on the bad project and it was 5.0.0-pre1 on the good project. The downgrade could be accomplished with yarn add cable_ready#^5.0.0-pre1 in the bad project folder and now both projects work.
FYI for other newbies like me trying to understand how CableReady works: This tutorial gives another example of CableReady, and was also fixed the same way.
I am trying to write a basic ngrx effects testing. However I keep getting the error as TypeError: expect(...).toBeObservable is not a function.
This is a new project setup with Angular 7. I had no issues with my previous projects which ran in angular 4.
Initially thought it could be something to do with packages so upgraded all packages to the most latest but no luck yet.
I event tried to test a very simple observable as expect(effects.test$).toBeObservable(5); but it gives the same error. As mentioned in the title I am using jasmine-marbles and the version is 0.4.1.
You need to init the test scheduler and add matchers in before each or toBeObservable will not be defined:
import { addMatchers, initTestScheduler } from 'jasmine-marbles';
beforeEach(() => {
...
initTestScheduler();
addMatchers();
});
I'm having some trouble with getting Summernote to work correctly on my production Rails environment (on Heroku). I'm using rails 4.2.0, bootstrap 4.1.3, and summernote-rails 0.8.10.0.
Everything works fine locally but is broken on production.
There are no errors when the editor loads but as soon as you click in to any of the text fields there are the following errors:
First-
Uncaught TypeError: Cannot read property 'hide' of undefined
at e.hide (application-817b47c5cec07e4f230739dba0885233c6c215d78b973ccec6560fa46ec08080.js:141)
at e.update (application-817b47c5cec07e4f230739dba0885233c6c215d78b973ccec6560fa46ec08080.js:141)
at e.invoke (application-817b47c5cec07e4f230739dba0885233c6c215d78b973ccec6560fa46ec08080.js:142)
at e.update (application-817b47c5cec07e4f230739dba0885233c6c215d78b973ccec6560fa46ec08080.js:140)
at HTMLTextAreaElement.summernote.mousedown (application-817b47c5cec07e4f230739dba0885233c6c215d78b973ccec6560fa46ec08080.js:140)
at HTMLTextAreaElement.dispatch (application-817b47c5cec07e4f230739dba0885233c6c215d78b973ccec6560fa46ec08080.js:33)
at HTMLTextAreaElement.m.handle (application-817b47c5cec07e4f230739dba0885233c6c215d78b973ccec6560fa46ec08080.js:32)
at Object.trigger (application-817b47c5cec07e4f230739dba0885233c6c215d78b973ccec6560fa46ec08080.js:33)
at HTMLTextAreaElement.<anonymous> (application-817b47c5cec07e4f230739dba0885233c6c215d78b973ccec6560fa46ec08080.js:33)
at Function.each (application-817b47c5cec07e4f230739dba0885233c6c215d78b973ccec6560fa46ec08080.js:22)
Second-
Uncaught TypeError: t.slice is not a function
at i (application-817b47c5cec07e4f230739dba0885233c6c215d78b973ccec6560fa46ec08080.js:139)
at e.current (application-817b47c5cec07e4f230739dba0885233c6c215d78b973ccec6560fa46ec08080.js:139)
at e.currentStyle (application-817b47c5cec07e4f230739dba0885233c6c215d78b973ccec6560fa46ec08080.js:140)
at e.invoke (application-817b47c5cec07e4f230739dba0885233c6c215d78b973ccec6560fa46ec08080.js:142)
at e.updateCurrentStyle (application-817b47c5cec07e4f230739dba0885233c6c215d78b973ccec6560fa46ec08080.js:141)
at e.invoke (application-817b47c5cec07e4f230739dba0885233c6c215d78b973ccec6560fa46ec08080.js:142)
at HTMLTextAreaElement.<anonymous> (application-817b47c5cec07e4f230739dba0885233c6c215d78b973ccec6560fa46ec08080.js:141)
at HTMLTextAreaElement.dispatch (application-817b47c5cec07e4f230739dba0885233c6c215d78b973ccec6560fa46ec08080.js:33)
at HTMLTextAreaElement.m.handle (application-817b47c5cec07e4f230739dba0885233c6c215d78b973ccec6560fa46ec08080.js:32)
at Object.trigger (application-817b47c5cec07e4f230739dba0885233c6c215d78b973ccec6560fa46ec08080.js:33)
Both these js errors seem to be coming from Bootstrap.
Also, I guess it does "work" on production but it the extra input fields and just looks broken. Like so-
Anyone got any ideas? Thanks!
I upgraded to Rails 5 and that fixed the minification problem.
I'm using Rails 4.0 with AngularJS 1.5 and the ng-annotate gem. I've noticed that when I put on the 'ng-strict-di' which forces you to annotate all your direct injections in AngularJS I find that Rails complains about modules which have "ngInject" in place.
eg; Here is my application controller for Angular
ApplicationController = (
$scope, $timeout,
hotkeys
ShortcutService) ->
"ngInject"
<SNIP>
I have ng-strict-di enabled in my template
<html ng-app='paisApp' ng-strict-di>
When I run my application in dev mode I get an error in the console;
Error: [$injector:strictdi] ApplicationController is not using explicit annotation and cannot be invoked in strict mode
http://errors.angularjs.org/1.5.11/$injector/strictdi?p0=ApplicationController
minErr/<#http://localhost:3000/assets/angular/angular.self.js?body=1:69:12
annotate#http://localhost:3000/assets/angular/angular.self.js?body=1:4006:17
injectionArgs#http://localhost:3000/assets/angular/angular.self.js?body=1:4733:21
instantiate#http://localhost:3000/assets/angular/angular.self.js?body=1:4784:18
$controller#http://localhost:3000/assets/angular/angular.self.js?body=1:10608:18
controllerDecorator/<#http://localhost:3000/assets/app/bower_components/angular-material-data-table/dist/md-data-table.self.js?body=1:321:12
compile/<#http://localhost:3000/assets/angular-ui-router/angular-ui-router.self.js?body=1:9781:46
bind/<#http://localhost:3000/assets/angular/angular.self.js?body=1:1260:15
invokeLinkFn#http://localhost:3000/assets/angular/angular.self.js?body=1:10153:9
nodeLinkFn#http://localhost:3000/assets/angular/angular.self.js?body=1:9552:11
compositeLinkFn#http://localhost:3000/assets/angular/angular.self.js?body=1:8811:13
publicLinkFn#http://localhost:3000/assets/angular/angular.self.js?body=1:8691:30
lazyCompilation#http://localhost:3000/assets/angular/angular.self.js?body=1:9048:16
updateView#http://localhost:3000/assets/angular-ui-router/angular-ui-router.self.js?body=1:9719:38
configUpdatedCallback#http://localhost:3000/assets/angular-ui-router/angular-ui-router.self.js?body=1:9663:25
configureUIView#http://localhost:3000/assets/angular-ui-router/angular-ui-router.self.js?body=1:5640:17
ViewService.prototype.sync#http://localhost:3000/assets/angular-ui-router/angular-ui-router.self.js?body=1:5645:9
activateViews#http://localhost:3000/assets/angular-ui-router/angular-ui-router.self.js?body=1:6273:5
invokeCallback#http://localhost:3000/assets/angular-ui-router/angular-ui-router.self.js?body=1:1580:20
TransitionHook.prototype.invokeHook#http://localhost:3000/assets/angular-ui-router/angular-ui-router.self.js?body=1:1592:26
TransitionHook.runAllHooks/<#http://localhost:3000/assets/angular-ui-router/angular-ui-router.self.js?body=1:1719:48
TransitionHook.runAllHooks#http://localhost:3000/assets/angular-ui-router/angular-ui-router.self.js?body=1:1719:9
transitionSuccess#http://localhost:3000/assets/angular-ui-router/angular-ui-router.self.js?body=1:3432:13
processQueue#http://localhost:3000/assets/angular/angular.self.js?body=1:16697:28
scheduleProcessQueue/<#http://localhost:3000/assets/angular/angular.self.js?body=1:16713:27
$eval#http://localhost:3000/assets/angular/angular.self.js?body=1:17995:16
$digest#http://localhost:3000/assets/angular/angular.self.js?body=1:17809:15
$apply#http://localhost:3000/assets/angular/angular.self.js?body=1:18103:13
done#http://localhost:3000/assets/angular/angular.self.js?body=1:12083:36
completeRequest#http://localhost:3000/assets/angular/angular.self.js?body=1:12292:7
requestLoaded#http://localhost:3000/assets/angular/angular.self.js?body=1:12220:9
<div id="wrapper" ui-view="" class="ng-scope" data-ng-animate="1">
angular.self.js:14200:18
If I manually annotate this then the error goes away, for that file. I have a lot of angularJS files so I don't want to do this for each one.
Update
I'm running my server with NG_FORCE=true like so;
NG_FORCE=true RAILS_ENV=development bundle exec rails s
I am running into an several errors saying, "Uncaught ReferenceError: Foundation is not defined". They happen into the following:
- foundation.abide
- foundation.accordion
- foundation.clearing
- foundation.dropdown
- foundation.equalizer
- foundation.interchange
- foundation.joyride
In console, I typed Foundation, and got: Object {name: "Foundation", version: "5.5.1", media_queries: Object, stylesheet: CSSStyleSheet, global: Object…}global: Objectinherit: function (scope, methods) {init: function (scope, libraries, method, options, response) {init_lib: function (lib, args) {libs: Objectmedia_queries: Objectname: "Foundation"patch: function (lib) {rtl: falsescope: documentset_namespace: function () {stylesheet: CSSStyleSheetutils: Objectversion: "5.5.1"__proto__: Object.
I also verified that jQuery is working by using the console: $(document) resulting in [>#document].
I am running a Rails (4.2.1) stack on Ruby (2.0.0), and have been following the basic tutorial/walkthrough on zurb/foundation-rails.
rails g foundation:install
I have also tried RailsApps/rails_layout gem but am getting the same error.
rails generate layout:install foundation5 --force
The only thing I can think of is that I am defining Foundation after all the functions that needed it (abide, accordion, etc) but that shouldn't happen because the skeleton code is from the template generators. I'm not experienced in RoR or in the structure of Foundation to know if that's the case, so I was wondering where I can go about finding the error to this.
Or if this was just a client issue with my Mac.
This is caused by a bug in the 5.5.1.1 release of the foundation-rails gem. The plugins you listed above are loaded before the foundation code itself.
5.5.1.2 is on the way to fix this, but in the meantime you can resolve the issue by going back to the previous version:
gem 'foundation-rails', '= 5.5.1.0'