40106

Backbone.js - 404 jQuery error on navigate

Question:

Navigation is not working as I expected, when I trigger goToTournament (see below) the current view just re-renders and I get a jQuery 404 not found error on the console. The URL is changing appropriately and the correct route method is being triggered as well.

// js/views/home.js define([ 'jquery', 'jquerym', 'underscore', 'backbone', 'models/tournaments/featured', 'collections/home', 'text!/templates/home.html' ], function($, JQM, _, Backbone, FeaturedModel, HomeCollection, homeTemplate) { var HomeView = Backbone.View.extend({ el: $('#site-main'), events: { 'click .tournament': 'goToTournament' }, initialize: function() { this.render(); }, render: function() { var homeCollection = new HomeCollection(); homeCollection.fetch({ success: function() { var data = {tournaments: homeCollection.toJSON()}; var compiledTemplate = _.template(homeTemplate, data); $('#site-main').html(compiledTemplate); $('.main-content').fadeTo(500, 1); return this; } }); }, goToTournament: function(e) { this; var t_id = $(e.currentTarget).data('id'); var router = new Backbone.Router(); router.navigate('tournament/' + t_id, {trigger: true}) } }); return HomeView; }); // js/router.js define([ 'jquery', 'underscore', 'backbone', 'views/home', 'views/tournament', 'collections/tournament' ], function($, _, Backbone, HomeView, TournamentView, TournamentCollection) { var AppRouter = Backbone.Router.extend({ routes: { '': 'home', 'tournament/:id': 'tournament' } }); var initialize = function() { var app_router = new AppRouter; app_router.on('route:home', function() { var homeView = new HomeView(); }); app_router.on('route:tournament', function(id) { var tournament = new TournamentCollection({ id: id }); tournament.fetch({ success: function() { var tournamentView = new TournamentView({collection: tournament}); } }); }); Backbone.history.start(); }; return { initialize: initialize }; });

Answer1:

I got it working by completely disabling jquery mobile's loading method. I made a jqm-config.js file and made sure it was caled before jquery mobile itself.

Recommend

  • URL Routing in .aspx
  • A recommended Ruby interactive console [closed]
  • Insert a TextBox and set the formula
  • getGalleryImages returning NULL in Magento homepage
  • CarrierWave: Single uploader for multiple models?
  • .Net chat room system
  • karma-browserify throws error when trying to load modules shimmed with browserify-shim
  • rails 5 carrierwave no route matches for image
  • javascript XSLT nodes, selecting the first of a group (merge-like)
  • Plotly and ggplot with facet_grid in R: How to to get yaxis labels to use ticktext value instead of
  • Django ORM Left Join With GROUP BY and SUM
  • Flask-Restful error: “as_view” method not inherited
  • how tensorflow worker driver training process and cause variables update on ps job?
  • What distributed message queues support millions of queues?
  • How to share a database between ASP.NET MVC 5 application and .NET console application?
  • How to record a JNLP/ Java Web Start application with JMeter
  • How to show underscore (shortcut) without holding Alt?
  • Invoking a controller's action by button in View without redirecting to any view
  • Duplicate identifier error when referencing a node library using typescript
  • Get variable height for a UIButton for iPhones 5/6/6+
  • How to make nicEditor snaplet? (Several questions)
  • Many to Many in Linq using Dapper
  • Single django queryset to get n adjacent items
  • Are there any side effects from calling SQLAlchemy flush() within code?
  • Django return user model id with L
  • Django model for a Postgres view
  • Trying to string.Join an IList
  • Configure Spring's MappingJacksonHttpMessageConverter
  • Combining two different ActiveRecord collections into one
  • Can't delete or rename original file after resizing
  • Sails.js/waterline: Executing waterline queries in toJSON function of a model?
  • MySQL WHERE-condition in procedure ignored
  • Web-crawler for facebook in python
  • Unanticipated behavior
  • How to disable jQuery.jplayer autoplay?
  • KeystoneJS: Relationships in Admin UI not updating
  • trying to dynamically update Highchart column chart but series undefined
  • CSS Applying specific rule for a specific monitor resolution with only CSS is posible?
  • Setting background image for body element in xhtml (for different monitors and resolutions)
  • java string with new operator and a literal