51

I'm debugging a visual composer plugin that broke after I updated WordPress to 4.5 and I can't figure out why it is throwing a TypeError.

The error message in the console:

JQMIGRATE: Migrate is installed, version 1.4.0              load-scripts.php?....
Uncaught TypeError:     $template.get is not a function     composer-view.js?ver=4.1.1.1:73

The only occurrences of $template are found in the code below. I understand that this isn't very much context to go off of but, how can I resolve this error?

/**
 * Convert html into correct element
 * @param html
 */
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) { // **errors on this line**
    attributes[attr.name] = attr.value;
  });
  this.$el.attr(attributes).html($template.html());
  this.setContent();
  this.renderContent();
},


Update:

It looks like this might be a problem with jQuery. WordPress 4.5 includes jQuery 1.12 which fixed a bug that allowed certain code to be run with incorrect syntax. I assume that the plugin code must have had incorrect syntax but ran nonetheless until now.

https://wordpress.org/support/topic/read-this-first-wordpress-45-master-list#post-8271654

3
  • 6
    Instead of including an image of your error message, please include it as text. This will help future readers who have a similar error message find your question through search.
    – buczek
    Apr 13, 2016 at 17:26
  • any success fixing this so far?
    – rubmz
    Apr 14, 2016 at 7:07
  • I have this error now: stackoverflow.com/questions/37090595/… May 7, 2016 at 16:39

10 Answers 10

124

I was able to resolve the issue. Turns out I was using an older version of JS composer. Updating to the newest version broke my site so I tracked down the error and updated 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()
        },
14
  • 5
    Just in case you can't find needed file to edit, in my case it's here: /wp-content/plugins/js_composer/assets/js/dist/backend.min.js Apr 17, 2016 at 0:02
  • 1
    Doubling any component doesn't work with this update @Ben Apr 17, 2016 at 22:32
  • 9
    worked. the file is situated here: /home/statingt/public_html/wp-content/plugins/js_composer/assets/js/backend/composer-view.js
    – gsziszi
    Apr 19, 2016 at 9:43
  • 4
    composer-view.js?ver=4.5.3:6 Uncaught TypeError: Cannot read property 'attributes' of undefined i get this after changing the code Apr 22, 2016 at 16:37
  • 2
    @DanHastings & Apeiron, see my answer below for a fix for "Uncaught TypeError: Cannot read property 'attributes' of undefined".
    – CB-Dan
    Jul 20, 2016 at 16:26
33

I was still getting this error after trying the patch in Ben's answer: Uncaught TypeError: Cannot read property 'custom' of undefined

So I modified the html2element in composer-view.js as follows:

 html2element: function(html) {
        var $template, attributes = {},
            template = html;

        $template = $(template(this.model.toJSON()).trim());
        if($template.get(0))
        {
            _.each($template.get(0).attributes, function(attr) {
            attributes[attr.name] = attr.value
        })};

        this.$el.attr(attributes).html($template.html()),
        this.setContent(),
        this.renderContent()
    },
3
  • Worked for me on WP 4.6 and VC 4.6. Thanks! Oct 12, 2016 at 3:24
  • You guys are great.. thanks for helping to fix this issue. It resolved it on my end as well! :)
    – cowsay
    May 17, 2017 at 13:40
  • Worked partially on WP 4.8. It's not updating the view after composer adds an element to view. Need to save the page and reload to view the component. Any fix available? Jun 21, 2017 at 10:09
18

@Ben This works perfect!

Cause: Admin was not loading the correct visual editor for js_composer plugin after updatethis plugins.

=====================================================

Error:

Error: TypeError: $template.get is not a function Source File: wp-content/plugins/js_composer_salient/assets/js/dist/backend.min.js?ver=4.10 Line: 4047

=====================================================

Solution Goto file /wp-content/plugins/js_composer_salient/assets/js/dist/backend.min.js around line 4045:

======> Replace the code =====================================================

    html2element: function(html) {
        var $template, attributes = {};
        _.isString(html) ? (this.template = _.template(html), $template = $(this.template(this.model.toJSON(), vc.templateOptions["default"]).trim())) : (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()
    },

======> Replace with this code ========================================

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

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

1
  • works for me too and I can copy elements, but I still got this error Uncaught Error: Syntax error, unrecognized expression: .vc_teaser-btn-{{ name }}
    – manuel-84
    Jan 27, 2017 at 18:21
4

I'm using the theme Applay (2.1.3, a bit outdated). I've just updated WP and all the plugins to the most recent version (4.5.2) and came to this issue as well. I did not analyzed the flow of this component (js_composer), just this "broken" function (it's not really broken). I realized that this.template and $template are getting wrong object types (it needs another validation aside _.isString(html)). I solved it by adding a try & catch block as follows:

ORIGINAL

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

MODIFIED

    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();
    },
1
  • This solution worked for WP 4.6.1 and Visual Composer 4.5.3 Sep 28, 2016 at 16:52
3

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

2
  • This helped me for loading some pages, but some are only loaded partially. I am now getting this error: composer-custom-views.js?ver=4.5.3:853 Uncaught TypeError: Cannot read property 'custom' of undefined. The line looks like this: var $element = $( _.template( this.buttonTemplate, { params: params }, vc.templateOptions.custom ) );
    – mat
    May 11, 2016 at 9:01
  • I replaced the declaration to 0, this seems to solve everything. Probably not a solid solution though...
    – mat
    May 11, 2016 at 9:18
1

Well, i found the solution in this site: https://wordpress.org/support/topic/visual-composer-is-not-working

first: edit html2element:.... in in /wp-content/plugins/js_composer/assets/js/backend/composer-view.js

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

second: However if you open up the frontend editor you'll have this "trim" issue on custom_views.js:101 , and line 467 of another file. I forgot the name, but I think it may be frontend_editor.js.

edit in: \wp-content\plugins\js_composer\assets\js\frontend_editor\

  • frontend_editor.js
  • custom_views.js

Bad code:

this.$controls = $( _.template( template, data, _.extend( {},
            vc.template_options,
            { evaluate: /\{#([\s\S]+?)#}/g } ) ).trim() ).addClass( 'vc_controls' );

Fixed code:

this.$controls = $( _.template( template, data, _.extend( {},
            vc.template_options,
            { evaluate: /\{#([\s\S]+?)#}/g } ) )().trim() ).addClass( 'vc_controls' );

third: See the black magic.

Cheers.

1
  • in salient this is just this.$controls = $(_.template(template, data, vc.template_options).trim()).addClass('vc_controls');
    – MrMesees
    Jun 24, 2016 at 12:28
1

Checkout below code for both $template.get is not a function and Uncaught TypeError: Cannot read property 'attributes' of undefined. Worked for me.

html2element: function(html) {
    var $template, attributes = {},
            template = html;

        $template = $(template(this.model.toJSON()).trim());
        if($template.get(0))
        {
            _.each($template.get(0).attributes, function(attr) {
            attributes[attr.name] = attr.value
        })};

        this.$el.attr(attributes).html($template.html()),
        this.setContent(),
        this.renderContent()
}
1
  • This one did the trick for me! Atleast almost: I can add elements but they don't show up until page save. Atleast I'm not getting any errors on console like I did with other code changes :D
    – mMoovs
    Oct 13, 2017 at 6:58
1

I made this modification that works on my WP 4.8.1 (PHP7)

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

you must modify the render method :

replace this line

this.html2element(_.template($shortcode_template_el.html(), this.model.toJSON())); 

by this line

this.html2element( $shortcode_template_el.html() );

It seems the _.template() function that doesn't work perfectly and doesn't return the good object, so better give the html code instead.

1
  • Works on WP 4.9.8 and PHP 7.2!
    – T.Ilciukas
    Sep 10, 2018 at 12:17
0

try updating your theme. Goto Appearance>Themes, and check for an update. This resolved the issue for me automatically upon update.

The error arises when you update to WP 4.5 for me running the Nimva theme. You have to update to 2.02 of Nimva, which allows auto updates.

Not the answer you're looking for? Browse other questions tagged or ask your own question.