Plugin throwing TypeError after WordPress 4.5 update

June 22, 20231 Views

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

Post Views: 1

10 comments

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

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

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

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

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

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

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-contentpluginsjs_composerassetsjsfrontend_editor

frontend_editor.js
custom_views.js

Bad code:

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

Fixed code:

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

third: See the black magic.

Cheers.

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

Anonymous says:

June 22, 2023 at 12:33 pm
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.
Anonymous says:

June 22, 2023 at 12:33 pm

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.

Comments are closed.

Related posts

10 comments

Social Network