javascript - theme - wordpress jquery version

Plugin lanzando TypeError después de la actualización de WordPress 4.5

Question

Estoy depurando un complemento visual compositor que se rompió después de actualizar WordPress a 4.5 y no puedo entender por qué está lanzando un TypeError.

El mensaje de error en la consola:

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

Las únicas apariciones de $template se encuentran en el código a continuación. Entiendo que esto no es mucho contexto para salir, pero, ¿cómo puedo resolver este 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();
},

Actualizar:

Parece que esto podría ser un problema con jQuery. WordPress 4.5 incluye jQuery 1.12 que corrigió un error que permitía ejecutar cierto código con una sintaxis incorrecta. Supongo que el código del complemento debe haber tenido una sintaxis incorrecta, pero se ejecutó hasta ahora.

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

Answer 1

@Ben ¡Esto funciona perfecto!

Causa: el administrador no estaba cargando el editor visual correcto para el complemento js_composer después de actualizar estos complementos.

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

Error:

Error: TypeError: $ template.get no es una función Archivo de origen: wp-content / plugins / js_composer_salient / assets / js / dist / backend.min.js? Ver = 4.10 Línea: 4047

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

Solución Ir al archivo /wp-content/plugins/js_composer_salient/assets/js/dist/backend.min.js alrededor de la línea 4045:

======> Reemplazar el código ======================================== =============

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

======> Reemplazar con este código ======================================= =

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

Answer 2

Bueno, encontré la solución en este sitio: https://wordpress.org/support/topic/visual-composer-is-not-working

primero: edite html2element: .... en /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()},

segundo: sin embargo, si abre el editor frontend, tendrá este problema de "recorte" en custom_views.js: 101 y la línea 467 de otro archivo. Olvidé el nombre, pero creo que puede ser frontend_editor.js.

editar en: / wp-content / plugins / js_composer / assets / js / frontend_editor /

• frontend_editor.js
• custom_views.js

Código malo:

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

Código fijo:

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

tercero: ver la magia negra.

Salud.

Answer 3

El siguiente código de pago para $ template.get no es una función y TypeError no capturado: no se pueden leer los atributos de propiedad de undefined. Trabajó para mi.

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

Answer 4

Estoy usando el tema Applay (2.1.3, un poco desactualizado). Acabo de actualizar WP y todos los complementos a la versión más reciente (4.5.2) y también llegué a este problema. No analicé el flujo de este componente (js_composer), solo esta función "rota" (no está realmente rota). Me di cuenta de que this.template y $ template están obteniendo tipos de objetos incorrectos (necesita otra validación aparte _.isString(html) ). Lo resolví agregando un bloque try & catch de la siguiente manera:

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

MODIFICADO

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

Answer 5

Estoy usando el tema Astra. Esta solución funciona al 99.9%. Para algunos, esto solo detiene la rueda giratoria, pero una vez que la página se carga, el compositor visual no lo hace.

Hice un ligero cambio en este código (que ya está publicado en todas partes)

Código de tema original de Astra aquí (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();
    },

El código que funciona:

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

},

La principal diferencia se encuentra aquí (frente al código original)

}); this.$el.attr

Hay un punto y coma en lugar de la coma original :):

}), this.$el.attr

Saludos amigos :) Entonces

Answer 6

Hice esta modificación que funciona en mi WP 4.8.1 (PHP7)

en el archivo wp-content / plugins / js_composer / assets / js / backend / composer-view.js

debes modificar el método de renderizado :

reemplazar esta línea

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

por esta línea

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

Parece que la función _.template () no funciona a la perfección y no devuelve el objeto bueno, así que mejor da el código html.

Answer 7

Noté que el código no se pasaba a la función html2element, pero sí existía en la función que lo llamaba (render)

El siguiente código ha corregido completamente mis problemas, puedo cargar la página, agregar, clonar, eliminar, 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;
  },

Answer 8

Pude resolver el problema. Resulta que estaba usando una versión anterior del compositor JS. La actualización a la versión más reciente rompió mi sitio, así que html2element el error y actualicé la función html2element para

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

¡Todo está funcionando bien para mí otra vez! Espero que esto ayude a otros.

Answer 9

Todavía recibía este error después de probar el parche en la respuesta de Ben: Tipo de error no capturado: no se puede leer la propiedad ''personalizada'' de undefined

Así que modifiqué el html2element en composer-view.js de la siguiente manera:

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

Answer 10

intenta actualizar tu tema. Ir a Apariencia> Temas y buscar actualizaciones. Esto resolvió el problema automáticamente después de la actualización.

El error surge cuando actualiza a WP 4.5 para mí ejecutando el tema Nimva. Debe actualizar a 2.02 de Nimva, que permite actualizaciones automáticas.