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 Go

Answer 1

a latest fix in December 2016, for Visual composer fix is this,

html2element:function(html){var $template,attributes={},template=vc.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()},

notice this important thing, template=vc.template(html); in the actual code. this is the quick fix in latest version, compatible with WPordpress latest.

Remember to update Wordpress and theme accordingly, so this fix should work fine.

thanks and happy coding

Answer 2

Noticed that code was not being passed into the html2element function, but did exist in the function calling it (render)

The following code has completely corrected my problems, I can load the page, add, clone, remove, etc

render: function () {
			var $shortcode_template_el = $( '#vc_shortcode-template-' + this.model.get( 'shortcode' ) );
			if ( $shortcode_template_el.is( 'script' ) ) {
				var newHtmlCode =  _.template( $shortcode_template_el.html(),
												this.model.toJSON(),
												vc.templateOptions.default );
				if(!_.isString(newHtmlCode)){
					newHtmlCode = $shortcode_template_el.html();
				}
				this.html2element( newHtmlCode );
			} else {
				var params = this.model.get( 'params' );
				$.ajax( {
					type: 'POST',
					url: window.ajaxurl,
					data: {
						action: 'wpb_get_element_backend_html',
						data_element: this.model.get( 'shortcode' ),
						data_width: _.isUndefined( params.width ) ? '1/1' : params.width,
						_vcnonce: window.vcAdminNonce
					},
					dataType: 'html',
					context: this
				} ).done( function ( html ) {
					this.html2element( html );
				} );
			}
			this.model.view = this;
			this.$controls_buttons = this.$el.find( '.vc_controls > :first' );
			return this;
		},

Answer 3

Funny thing... my visual composer version number was way above the latest update (4.8.*).

Anyways...I had this same problem and those previous answers did not completely solve my problems, so I decided to try and buy a new copy of the plugin. It worked out well.

I can now confirm that the Visual Composer version 4.12.1 works with the WordPress 4.6.1 without errors.

Also note this:

There is no such directory as backendor such a file called composer-view.js in the latest version of Visual Composer.

PS. Using these GUI page builders sucks ***.

Answer 4

for anyone comes here from google search: after change html2element function if you have this error Cannot read property 'attributes' update render: function to below code

render: function () {
        var $shortcode_template_el = $( '#vc_shortcode-template-' + this.model.get( 'shortcode' ) );
        if ( $shortcode_template_el.is( 'script' ) ) {
            var newHtmlCode =  _.template( $shortcode_template_el.html(),
                                            this.model.toJSON(),
                                            vc.templateOptions.default );
            if(!_.isString(newHtmlCode)){
                newHtmlCode = $shortcode_template_el.html();
            }
            this.html2element( newHtmlCode );
        } else {
            var params = this.model.get( 'params' );
            $.ajax( {
                type: 'POST',
                url: window.ajaxurl,
                data: {
                    action: 'wpb_get_element_backend_html',
                    data_element: this.model.get( 'shortcode' ),
                    data_width: _.isUndefined( params.width ) ? '1/1' : params.width,
                    _vcnonce: window.vcAdminNonce
                },
                dataType: 'html',
                context: this
            } ).done( function ( html ) {
                this.html2element( html );
            } );
        }
        this.model.view = this;
        this.$controls_buttons = this.$el.find( '.vc_controls > :first' );
        return this;
    },

Answer 5

@Sorin Haidau

Hi guys, 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 6

this worked for me for WordPress version 4.9.8

html2element:function (html) {
    var attributes = {}, 
        $template;
    if (_.isString(html)) {
        this.template = _.template(html);
    } else {
        try {
            this.template = _.template(html());                                                                                                                          
        } catch (err) {
            this.template = html;
        }   
    }   
    $template = $(this.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();
},