Plugin throwing TypeError after Wordpress 4.5 upda

问题:

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

回答1:

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

All is working well for me again! Hope this helps others.

回答2:

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:

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

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

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

回答6:

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

回答7:

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.

回答8:

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

回答9:

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.

回答10:

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.