WordPress 4.5 更新后插件抛出 TypeError

【问题标题】：Plugin throwing TypeError after WordPress 4.5 updateWordPress 4.5 更新后插件抛出 TypeError
【发布时间】：2016-08-04 23:07:30
【问题描述】：

我正在调试一个可视化作曲家插件，该插件在我将 WordPress 更新到 4.5 后损坏了，我不知道它为什么会抛出 TypeError。

控制台中的错误信息：

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

$template 的唯一出现在下面的代码中。我知道这不是很多上下文，但是，我该如何解决这个错误？

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


更新：

看起来这可能是 jQuery 的问题。 WordPress 4.5 包含 jQuery 1.12，它修复了一个错误，该错误允许某些代码以不正确的语法运行。我认为插件代码的语法一定不正确，但仍然运行到现在。

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

【问题讨论】：

  • 请不要包含错误消息的图像，而是将其作为文本包含。这将有助于未来有类似错误消息的读者通过搜索找到您的问题。
  • 到目前为止解决这个问题是否成功？
  • 我现在有这个错误：stackoverflow.com/questions/37090595/…

标签： javascript jquery html wordpress


【解决方案1】：

我做了这个修改，适用于我的 WP 4.8.1 (PHP7)

在文件wp-content/plugins/js_composer/assets/js/backend/composer-view.js

你必须修改 render 方法：

替换这一行

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

这条线

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

似乎_.template()函数不能完美运行，也没有返回好的对象，所以最好给html代码。

【讨论】：

  • 适用于 WP 4.9.8 和 PHP 7.2！
【解决方案2】：

检查下面的代码 $template.get is not a function 和 Uncaught TypeError: Cannot read property 'attributes' of undefined。为我工作。

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

【讨论】：

  • 这个对我有用！至少几乎：我可以添加元素，但它们直到页面保存才会显示。至少我没有像其他代码更改那样在控制台上收到任何错误：D
【解决方案3】：

注意到代码没有被传递到 html2element 函数中，但确实存在于调用它的函数中（渲染）

以下代码已经完全纠正了我的问题，我可以加载页面、添加、克隆、删除等

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 Error: Syntax error, unrecognized expression: .vc_teaser-btn-{{ name }}
【解决方案4】：

在尝试 Ben 的回答中的补丁后，我仍然收到此错误：Uncaught TypeError: Cannot read property 'custom' of undefined

所以我修改了composer-view.js中的html2element如下：

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

【讨论】：

  • 在 WP 4.6 和 VC 4.6 上为我工作。谢谢！
  • 你们太棒了.. 感谢您帮助解决此问题。它也解决了我的问题！ :)
  • 在 WP 4.8 上部分工作。在作曲家将元素添加到视图后，它不会更新视图。需要保存页面并重新加载才能查看组件。有什么可用的修复吗？
【解决方案5】：

好吧，我在这个网站上找到了解决方案：https://wordpress.org/support/topic/visual-composer-is-not-working

首先：在 /wp-content/plugins/js_composer/assets/js/backend/composer-view.js 中编辑 html2element:.... 

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：但是，如果您打开前端编辑器，您将在 custom_views.js:101 和另一个文件的第 467 行遇到这个“修剪”问题。我忘记了名字，但我认为它可能是 frontend_editor.js。

编辑：\wp-content\plugins\js_composer\assets\js\frontend_editor\

  • frontend_editor.js
  • custom_views.js

错误代码：

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

固定代码：

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

第三：见黑魔法。

干杯。

【讨论】：

  • 很明显这只是this.$controls = $(_.template(template, data, vc.template_options).trim()).addClass('vc_controls');
【解决方案6】：

我正在使用主题 Appplay（2.1.3，有点过时）。我刚刚将 WP 和所有插件更新到最新版本（4.5.2）并且也遇到了这个问题。我没有分析这个组件（js_composer）的流程，只是这个“坏掉”的功能（它并没有真正坏掉）。我意识到 this.template 和 $template 得到了错误的对象类型（除了_.isString(html)，它还需要另一个验证）。我通过添加一个 try & catch 块来解决它，如下所示：

原创

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

修改

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

【讨论】：

  • 此解决方案适用于 WP 4.6.1 和 Visual Composer 4.5.3
【解决方案7】：

我正在使用 Astra 主题。此修复程序 99.9% 有效。对于某些人来说，这只会停止纺车，但一旦页面加载，视觉作曲家就不会。

我对这段代码做了一点改动（现在到处都贴出来了）

此处为原始 Astra 主题代码 (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();
    },

有效的代码：

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

},

主要区别在这里（相对于原始代码）

}); this.$el.attr

用分号代替原来的逗号 :) :

}), this.$el.attr

干杯，伙计们：）所以

【讨论】：

  • 这帮助我加载了一些页面，但有些只是部分加载。我现在收到此错误：composer-custom-views.js?ver=4.5.3:853 Uncaught TypeError: Cannot read property 'custom' of undefined。该行如下所示： var $element = $( _.template( this.buttonTemplate, { params: params }, vc.templateOptions.custom ) );
  • 我将声明替换为0，这似乎解决了一切。虽然可能不是一个可靠的解决方案......
【解决方案8】：

@Ben 这很完美！

原因： 更新此插件后，管理员没有为 js_composer 插件加载正确的可视化编辑器。

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

错误：

错误：TypeError：$template.get 不是函数 源文件：wp-content/plugins/js_composer_salient/assets/js/dist/backend.min.js?ver=4.10 线路：4047

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

解决方案 转到第 4045 行附近的文件 /wp-content/plugins/js_composer_salient/assets/js/dist/backend.min.js：

======> 替换代码====================================== ================

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

======> 用这个代码替换 ==================================== ====

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

【讨论】：

    【解决方案9】：

    我能够解决问题。原来我使用的是旧版本的 JS 作曲家。更新到最新版本破坏了我的网站，所以我追踪了错误并将html2element 函数更新为

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

    对我来说一切都很好！希望这对其他人有帮助。

    【讨论】：

    • 以防万一您找不到需要编辑的文件，就我而言，它在这里：/wp-content/plugins/js_composer/assets/js/dist/backend.min.js
    • 加倍任何组件不适用于此更新@Ben
    • 工作。该文件位于此处：/home/statingt/public_html/wp-content/plugins/js_composer/assets/js/backend/composer-view.js
    • composer-view.js?ver=4.5.3:6 Uncaught TypeError: Cannot read property 'attributes' of undefined 我在更改代码后得到了这个
    • @DanHastings & Apeiron，请参阅下面我的答案以修复“未捕获的类型错误：无法读取未定义的属性‘属性’”。
    【解决方案10】：

    尝试更新您的主题。转到外观>主题，然后检查更新。这在更新时自动为我解决了这个问题。

    当您为我运行 Nimva 主题更新到 WP 4.5 时出现错误。 您必须更新到 Nimva 2.02，它允许自动更新。

    【讨论】：

      猜你喜欢
      • 1970-01-01
      • 2016-09-02
      • 2013-04-01
      • 2012-02-28
      • 2012-08-12
      • 2013-12-28
      • 2019-06-10
      • 1970-01-01
      相关资源
      最近更新 更多
      热门标签
      Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode