I've been following the cloudedit tutorial http://www.jamesyu.org/2011/01/27/cloudedit-a-backbone-js-tutorial-by-example/ for adding backbone to my rails app, but I'm using rails 3.1.3 rather than 3.0.
I keep getting the following errors
Uncaught TypeError: Cannot call method 'extend' of undefined
application.js:7Uncaught TypeError: undefined is not a function
I believe the error is caused by the following code
var App = {
Views: {},
Controllers: {},
Collections: {},
init: function() {
new App.Controllers.Recipes();
Backbone.history.start();
}
};
which is pretty much right from the tutorial.
I currently have this code in assets/javascripts/application.js file, underneath the section where I include the directories, and I call
$(function(){
App.init();
});
in my application.html.erb file.
the line which the error is actually referring to is
App.Controllers.Recipes = Backbone.Controller.extend(
I've tried moving the var App around to different files, but i can't seem to get it to work.
Am I understanding that error correctly? Is there something else I may be missing?
Are you using a version of Backbone >= 0.5.0 if so there is no Controller object anymore. It's been renamed to Router.
Related
I have created a custom page with free text ordering functionality and called custom add to cart API to add items to the cart.
Once the item is added I need to update the cart item count with updated quantity. I tried to use
require([
'jquery',
'Magento_Checkout/js/action/get-totals'
], function ($, getTotalsAction) {
'use strict';
var deferred = $.Deferred();
getTotalsAction([], deferred);
});
But It is throwing error:
Uncaught TypeError: Cannot read property 'quoteData' of undefined at quote.js:34
And
url-builder.js:12 Uncaught TypeError: Cannot read property 'storeCode' of undefined at url-builder.js:12
Anything missing here?
I referred https://magento.stackexchange.com/questions/210517/error-javascript-define-magento2-window-checkout-quotedata-or-store-code-are-u which doesn't have any working solutions.
The issue is that quoteData lives in window.checkoutConfig - this data will only be set on the checkout pages, you won't have many of required js the modules loaded on a custom page that set this data correctly.
this may be a useful read: https://www.yireo.com/blog/2017-08-20-do-not-depend-on-window-checkoutconfig
I was able to achieve this for my scenario using the below code. It might help someone
require([
'Magento_Customer/js/customer-data'
], function (customerData) {
var sections = ['cart'];
customerData.invalidate(sections);
customerData.reload(sections, true);
});
Could anybody help me calling a validation function in can.js?
I'm adding can.jquery.js and can.map.validations.js
and then create such a small example:
var mymap = can.Map.extend({
init: function () {
this.validatePresenceOf('myfield'); // this line reports an error
}
});
when loading page with this script, I get an error in browser:
"Uncaught TypeError: undefined is not a function"
Actually any this.validate* function does not work
After some research I notice that when I put this code under
$(document).ready{}
it works, but if I put it into .js file and load via tag - browser reports an error.
And I'm not going to write all of my js code in the page itself
see here it tells pretty clearly(helped me last time) that you have to use $document.ready() or else it wont work, so try making a new file.js, have $document.ready() contain all your todo-code, and link it up, I hope I am helpful in this regard, if not then bug me up I wont mind at all :) ..
Commenting it late but anyway - it didn't work for me in either case so I just took the sample from http://jsbin.com/jofeq/5/edit?html,js,output - and copied it to my code. Surprisingly it worked after copying - not sure what was wrong on my side.
In that example it looks like this:
var Person = can.Map({
init: function () {
this.validatePresenceOf('firstName');
this.validatePresenceOf('lastName');
}
}, {});
and it works without document.ready tricks or anything else - just included into body tag
I try to submit a simple form with coffeescript/ajax in play. But I'm doing something wrong and can't figure out what.
I started with a working form for creating questions (without ajax) and then followed Playframwork doc on javascript routing:
So first I created the router resource in my Application controller:
def javascriptRoutes = Action { implicit request =>
Ok(
Routes.javascriptRouter("jsRoutes")(
routes.javascript.Questions.create
)
).as("text/javascript")
}
added in routes:
GET /javascriptRoutes controllers.Application.javascriptRoutes
added to my template:
<script type="text/javascript" src='#routes.Application.javascriptRoutes()'></script>
and then included the coffescript:
$ ->
$('#save').on "click", (e) ->
jsRoutes.controllers.Questions.create.ajax
data: $('#questionForm').serialize()
success: (data) ->
alert("success")
error: (err) ->
alert("error")
#save points to a link and the onclick event works for a simple alert. $('#questionForm').serialize() also seems to output the right data.
The script simply does nothing and I don't know how to debug it properly with the chrome javascript debugger as I don't know where to look. At least intellij
tells me that Questions.create is never called.
edit: Thanks to Infinity I noticed that the chrome javascript debugger throws:
Uncaught TypeError: jsRoutes.controllers.Questions.create.ajax is not a function(anonymous function) # save.coffee:3m.event.dispatch # jquery.js:4641m.event.add.r.handle # jquery.js:4309
Thanks to Infinity and the new console error input I noticed that
jsRoutes.controllers.Questions.create.ajax
must be
jsRoutes.controllers.Questions.create().ajax
I've just updated backbone.marionette from 0.9.3 to v1.0.0-beta4 and the following code is breaking:
PlansApp.CompositeView = Backbone.Marionette.CompositeView
PlansApp.ItemView = Backbone.Marionette.ItemVie
PlansApp.Plans.PlansList = do ({PlansApp, Backbone} = window) ->
PlansList = {}
PlansListItemView = PlansApp.ItemView.extend
initialize: ->
#bindTo this.model, "change", this.modelChanged
modelChanged: (model, value)->
this.render()
this.$el.effect("highlight", {}, 6000)
window.addTeachMeHandlers() if model.get 'IsFirst
It is specifically breaking on this.render() with the error message:
Uncaught TypeError: Object [object Object] has no method 'render'
This code previously used to work before the upgrade.
From looking at the source, ItemView still has a render method, so I am guessing the context is wrong or maybe bindTo has changed.
I upgraded underscore also to 1.4.1 from 1.3
in one of the previous versions, I had to change how the EventBinder was attached to the view in order to avoid a conflict w/ the Backbone.StickIt plugin. This change means the default context of the event bindings is no longer the view, and you'll have to specify the 4th parameter - the context - when calling bindTo. It works the same as Backbone's on method:
#bindTo this.model, "change", this.modelChanged, this
I have page that creates a table: http://gupii.co.uk/rap/weekTable.php and I'm using a plugin to add a filter functionality: _http://gupii.co.uk/rap/js/mylibs/tablefilter.js
In weekTable.php:
var theTable = $('#weekTable')
$("#filter").keyup(function() {
$.uiTableFilter( theTable, this.value );
})
This works fine when your directly on the weekTable page, but when I load the page into a JQueryUI tab and try and use the filter I get this error:
Uncaught TypeError: Object function ( selector, context ) {
// The jQuery object is actually just the init constructor 'enhanced'
return new jQuery.fn.init( selector, context );
} has no method 'uiTableFilter'
Whats going on here, why am I getting this error?
The page I'm trying to load into is _http://gupii.co.uk/rap/guilda.php (tab:This Week) if it helps
(apologies for posting more links than I should but I thought it would be helpful in diagnosing the problem)
Try this:
$("#filter").live("keyup", function() {
...
http://api.jquery.com/live/