Visual Composer – $template.get is not a functi

I have been having problems with Visual Composer recently, specifically when editing a existing page or adding/cloning elements.

First I was unable to load the elements on the page, then I stumbled on to this post
[resolved] [closed] Visual Composer is not working

This got me part the way there, I was able to load the page elements and modify them.. But unable to add new elements or clone any existing elements.

Doing some more research and debugging I found another post on StackOverflow to add a Try Catch inside of the original html2element function – works, seems legit, but still doesn’t correct my 2nd problem.

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

Doing some more testing, 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;
		},

Original Render Function

render: function () {
			var $shortcode_template_el = $( '#vc_shortcode-template-' + this.model.get( 'shortcode' ) );
			if ( $shortcode_template_el.is( 'script' ) ) {
				this.html2element( _.template( $shortcode_template_el.html(),
					this.model.toJSON(),
					vc.templateOptions.default ) );
			} 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;
		},