jQueryMobile: Uncaught TypeError: Cannot call method '_trigger' of undefined

backbone.js, jquery-mobile

Solution

I think that error might be because jQuery Mobile needs an element in place to transition out on `changePage`. It's a hack, but putting an empty `div` with the `data-role` attribute set to 'page' in your index.html should resolve it:

<body>
    <!-- jQM seems to need a page to exist in the document before it transitions to the first dynamically generated one -->
    <div data-role="page"></div>
</body>

Problem

I am using jQuery Mobile with backbone.js. when i load home page i get the following error: ``` Uncaught TypeError: Cannot call method '_trigger' of undefined ``` this is what i do to load home page. in routes.js: ``` routes:{ '':'home', } home:function () { new HomeView(); this.changePage(new HomeContentView()); }, changePage:function (page) { $(page.el).attr('data-role', 'page'); console.log($(page.el)); page.render(); $('body').append($(page.el)); var transition = $.mobile.defaultPageTransition; if (this.firstPage) { transition = 'none'; this.firstPage = false; } $.mobile.changePage($(page.el), {changeHash:false, transition: transition}); } ``` in view.js ``` window.HomeView = Backbone.View.extend({ template : Handlebars.compile($('#home').html()), render : function (eventname) { this.$el.html(this.template()); this.header = new HeaderElement(); this.$el.find('div.header_element').append(this.header.$el); this.footer = new FooterElement(); this.$el.find('div.footer_element').append(this.footer.$el); return this; } }); window.HomeContentView = Backbone.View.extend({ initialize: function(options) { this.collection = new Fan(); this.template = Handlebars.compile(tpl.get('elements/home')); //~ console.log(tpl.get('home')); this.collection.on("reset",this.render,this); this.init = true; if (this.init) { upLimit = 1; this.collection.index(); this.init = false; } }, el: '#home_content_view', render : function (eventName) { var self = this; var js = (self.collection.toJSON())[0]; console.log(js); $('#home_content_view').html(self.template(js)); $('#home_content_view').trigger("create"); } }); ``` in home.html ``` <div data-role="content"> hi </div> ``` error stack trace: ``` Uncaught TypeError: Cannot call method '_trigger' of undefined jquery.mobile-1.1.1.js:2843 transitionPages jquery.mobile-1.1.1.js:2843 $.mobile.changePage jquery.mobile-1.1.1.js:3465 Backbone.Router.extend.changePage routes.js:153 Backbone.Router.extend.home routes.js:37 f.extend.route backbone-min.js:27 f.extend.loadUrl backbone-min.js:32 b.some.b.any underscore-min.js:14 f.extend.loadUrl backbone-min.js:32 f.extend.start backbone-min.js:31 (anonymous function) routes.js:162 $.ajax.success view.js:29 v.Callbacks.l jquery-1.8.3.min.js:2 v.Callbacks.c.fireWith jquery-1.8.3.min.js:2 T jquery-1.8.3.min.js:2 v.support.ajax.v.ajaxTransport.send.r jquery-1.8.3.min.js:2 ``` other pages are rendered correctly. Only home page is giving me trouble. Where am i getting wrong? How do i solve this?

Original source