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

Question

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?

I've got the same error without Backbone, but dynamically generating a page. I'm deleting a page and recreating again, but the changePage fails. — Jon Zangitu
– Jon Zangitu, Commented Sep 11, 2013 at 6:59

net.uk.sweet · Accepted Answer · 2013-03-18 13:37:36Z

6

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>

answered Mar 18, 2013 at 13:37

net.uk.sweet

12.4k3 gold badges26 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

pokero Over a year ago

This works beautifully, why is it not voted the answer??

Fish Taco · Accepted Answer · 2013-03-25 15:53:00Z

0

I've found the source of the problem to be jquery-mobile version 1.3.0. When I fall back to either JSM 1.2.0 or 1.2.1, the "Uncaught TypeError: Cannot call method 'trigger' of undefined" problem goes away.

BTW, I am not using Backbone, but I get the problem.

answered Mar 25, 2013 at 15:53

Fish Taco

111 bronze badge

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related