Uncaught TypeError: $template.get is not a functio

问题:

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:

回答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!

回答2:

@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 :)

回答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.

回答4:

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;
		},

回答5:

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 ***.

回答6:

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

回答7:

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;
    },