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:

I think, $template has not get named method. type 'console.dir($template);' in console. — superui, Apr 15 '16 at 09:41
This should fix your issue. http://stackoverflow.com/questions/36605420/plugin-throwing-typeerror-after-wordpress-4-5-update — Thomas T., Apr 15 '16 at 16:52
I have faced same issue on latest wordpress 4.7.2. Hope this will solve your problem- http://www.mashpy.me/2017/02/solved-after-upgrading-wp-bakery-visual.html — Mashpy Rahman, Feb 05 '17 at 13:40

score 113 · Answer 1 · edited May 23 '17 at 12:26

113

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!

edited May 23 '17 at 12:26

Community

1
1

answered Apr 15 '16 at 17:16

Ben

2,545
3
13
7

6

Cannot read property 'attributes' of undefined was the error that came up after using the code above – Dan Hastings Apr 22 '16 at 07:32
7

This just made it load. But when trying to add a new element to the page, the problem still exists. TypeError: $template.get(...) is undefined – Sorin Haidau Apr 27 '16 at 12:04
3

Whoah, I confirm it doesn't work... It seems working, but I can't add new elements... – Defkon1 Apr 28 '16 at 11:57
THANKS! I'm using the "WPBakery Visual Composer (Modified Version)" and it stopped working. Same error described here and the effect was that the composed stood loading nonstop. Your fix did the trick for me! tks again – Mauricio Moraes Apr 28 '16 at 14:44
Applied the code but, Uncaught TypeError: Cannot read property 'attributes' of undefined!! :( – Arvind K. May 13 '16 at 06:14
@ArvindK. Can you provide a little more context? What line of the JS are you getting that error on, etc? – Ben May 13 '16 at 17:25
this is really a good fix. adding 1 line of code in previous code. $template = $(template(this.model.toJSON()).trim()), – mindlogixtech Aug 18 '16 at 11:07
2

Why are we changing plugin stuff - shouldn't the authors fix this? When we will update we'r in the same s*** again ... ? – trainoasis Jan 16 '17 at 13:36
This is not working :(. Following code by @Renegade_Mtl is working perfectly. – Jayesh Dhudashia Jul 31 '17 at 03:41

score 25 · Answer 2 · edited Dec 24 '20 at 22:35

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

composer-view.js?ver=4.7.4:142 Uncaught TypeError: Cannot read property 'attributes' of undefined :/ — Apeiron, Apr 29 '16 at 10:00
I had missed the final comma at the end, updated my code. Unless you had seen that and fixed it also... sorry about that. Maybe this might not be the right fix for your theme. — Renegade_Mtl, Apr 29 '16 at 17:49
Applied the code but, Uncaught TypeError: Cannot read property 'attributes' of undefined!! :( — Arvind K., May 13 '16 at 06:14

Elon Zito · Answer 3 · 2016-07-30T06:34:16.257

18

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.

edited Jul 30 '16 at 06:34

answered Jun 22 '16 at 21:26

Elon Zito

2,872
1
24
28

2

Faced an issue with "attribute" not defined when adding new elements using VC add element pop-up :/ – Nirav Zaveri Oct 03 '17 at 12:48
confirming +1 , WP 4.9.4, VC 4.5.3 – Ilya Novojilov Mar 26 '18 at 15:51
Confirmed working. +1 this was the only solutions who fixed my problem :) big thx! – jcdarocha Dec 01 '18 at 09:42

score 3 · Answer 4 · answered Oct 10 '16 at 13:14

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

score 2 · Answer 5 · answered Oct 21 '16 at 08:36

2

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

answered Oct 21 '16 at 08:36

Shamppi

447
4
16

I can also recommend upgrading to the latest version. I remember hitting these JavaScript issues back in May and when I checked the VC support site, it looked like the author had abandoned the product, as there were loads of support tickets mentioning JavaScript issues and not a single response from the author. Like many others, I applied one of the hacks above and that fixed things for a while, but two weeks ago it broke again. So I decided to purchase the latest version after reading this answer and voila! The plug-in now works fine. Also, it is much improved, so well worth the investment. – JamesG Nov 14 '16 at 22:33
Your right, same here, downloaded latest version and it works. Got v5.3 now – TheLD Sep 29 '17 at 08:44

score 0 · Answer 6 · answered Dec 13 '16 at 06:46

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

score 0 · Answer 7 · answered Mar 29 '19 at 10:59

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

score -2 · Answer 8 · answered Jan 12 '17 at 04:51

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

Uncaught TypeError: $template.get is not a function

8 Answers8

Linked