Uncaught TypeError: $template.get is not a function

Question

I am getting this error in WordPress when I am using a plugin called WpBakery Visual Composer.

I am using the latest version of WordPress (4.5), using the latest Google Chrome version and all plugins are updated. I cannot seem to be able to add any elements or templates using Visual Composer.

Can someone help me or tell me what could be going on and how I can fix this error.

The error I get:

Answer 1

Please see my answer here.

I fixed this bug by updating the html2element function to:

html2element: function(html) {
        var $template, attributes = {},
            template = html;
        $template = $(template(this.model.toJSON()).trim()), _.each($template.get(0).attributes, function(attr) {
            attributes[attr.name] = attr.value
        }), this.$el.attr(attributes).html($template.html()), this.setContent(), this.renderContent()
    },

in /wp-content/plugins/js_composer/assets/js/backend/composer-view.js

or in wp-content/plugins/js_composer/assets/js/dist/backend.min.js`

Hope this works for you!

Answer 2

I am using the Astra theme. This fix is 99.9 % working. For some tho, this only stops the spinning wheel, but once the page loads visual composer does not.

I made a slight change to this code (that is posted everywhere by now)

Original Astra theme code here (composer-view.js)

        html2element:function (html) {
        var attributes = {},
            $template;
        if (_.isString(html)) {
            this.template = _.template(html);
            $template = $(this.template(this.model.toJSON()).trim());
        } else {
            this.template = html;
            $template = html;
        }
        _.each($template.get(0).attributes, function (attr) {
            attributes[attr.name] = attr.value;
        });
        this.$el.attr(attributes).html($template.html());
        this.setContent();
        this.renderContent();
    },

The code that works :

html2element: function(html) {
    var $template, 
    attributes = {},
    template = html;
    $template = $(template(this.model.toJSON()).trim()), 
     _.each($template.get(0).attributes, function(attr) {
    attributes[attr.name] = attr.value
}); this.$el.attr(attributes).html($template.html()), this.setContent(), this.renderContent()
},

The main difference is located here (versus original code)

}); this.$el.attr

There is a semicolon instead of the original comma :) :

}), this.$el.attr

Cheers folks :)

Update : This fixed about 19 out of 20 sites I had with theme astra with the same error as mentioned above... all except one site.

I had this error after the visual composer finally appeared (missing half of the design elements)

Uncaught Error: Syntax error, unrecognized expression: .ui-tabs-nav [href=#tab-1415196282-1-8]

I fixed this by updating the line 552 of the composer-custom-views.js :

$('.ui-tabs-nav [href="#tab-' + params.tab_id + '"]').text(params.title);

And voilà everything now works. Im sorry if it does not work for all themes, do try to use the code mentioned by others above. If that does not work try my solutions :)

Answer 3

Someone posted on the WordPress forums this solution which worked for me.

Replace the html2element function in /wp-content/plugins/js_composer/assets/js/backend/composer-view.js with the following.

html2element: function(html) {
            var $template, attributes = {},
                template = html;
            $template = $(template(this.model.toJSON()).trim()), _.each($template.get(0).attributes, function(attr) {
                attributes[attr.name] = attr.value
            }), this.$el.attr(attributes).html($template.html()), this.setContent(), this.renderContent()
        },

Edit: I had to make this replacement a second time under different circumstances, and it didn't start working until I disabled and then reenabled both the Visual Composer plugin and the Ultimate Visual Composer add-on.