search

reduxframework / redux-framework

Redux is a simple, truly extensible options framework for WordPress themes and plugins!
http://redux.io
Other
1.74k stars 583 forks source link

Repeater Issue #4037

Open papazetis opened 3 weeks ago

papazetis commented 3 weeks ago

I am creating a plugin using Redux v4.5.0 and it returns an error on console when I am trying to add a new repeater section by clicking "Add"

Error: Uncaught TypeError: Cannot read properties of undefined (reading 'mceInit') on file /redux-core/inc/extensions/repeater/repeater/redux-repeater.js on line 148 editorSettings = window.tinyMCEPreInit.mceInit[firstEditorId];

It looks like the window.tinyMCEPreInit is undefined

I made a quick fix by replacing this line with editorSettings = ( typeof window.tinyMCEPreInit !== 'undefined' ) ? window.tinyMCEPreInit.mceInit[firstEditorId] : '';

kprovance commented 2 weeks ago

You do understand that you completely ignored what I wrote you on the wp.org forum, correct? Where I asked: I have to say this, because most people choose not to follow the instructions: Please choose the correct selection for your situation. Theme user versus theme developer. Please read the entire block of text in the post window. Please do not skip over it. Please compile the required information and provide all of it in your post. Please do not skip parts or provide a one line sentence.

Even when I ask for people to carefully follow the instructions, they still don't. It blows my mind.

Here they were. This is the data I needed. It's not optional. If you cannot provide it, I cannot help. It's that simple.

Hello, and welcome to Redux Framework! We offer free bug reporting for our software. Since this service is free, we prefer to provide support our way. This means we ask you to first read the entire block of text below. Please do not post a few lines of what you think is wrong. Doing so without the required information below will get your ticket closed without a reply. We're sorry we have to enforce this policy now.

PLEASE, BEFORE YOU POST, READ THIS ENTIRE BLOCK OF TEXT!!!

We require all the information specified below for support. If this text block is ignored or the required data is not provided, your ticket will be automatically closed. NO exceptions. Thank you.

Are you a user reporting a bug with a theme or plugin?

Redux allows developers to include an options panel in their projects. Consequently, we do not offer support for folks who have purchased a theme or plugin that uses Redux. The responsibility of support for themes and plugins falls upon their author. We realize that some authors have included support links for Redux in their projects when they should not have. We apologize for that confusion and are taking steps to remedy that situation.

Please contact the author for support if you have purchased a theme or plugin that uses Redux. If the author is unavailable for help or has discontinued support, please refer to this before posting to our issue tracker: https://devs.redux.io/guides/basics/support-defined.html

Have a development usage question?

The issue tracker isn't the best place for usage questions. This format is not well-suited for questions & answers, and questions here don't have as much visibility as they do elsewhere. Before you ask a question, here are some resources to get help first:

Think you found a bug?

Please use the "BUG REPORT" template below. Remember, we are rabid about backward compatibility. Do not submit fixes that break previous ways of doing so, or we will reject them.

Also, we will reject your request unless you provide a Site Health Report. NO exceptions. If you do not include this information, and we close your ticket, please do not ask why. Instructions are listed below.

You MUST use Redux in dev mode when submitting an issue to us. If you are not or have circumvented our dev mode protocol, you are on your own. There could be information in your case that requires dev mode active (Compressed JavaScript, for example. We cannot diagnose issues with compressed JavaScript and why dev mode needs to be enabled).

If an error or notice appears on your screen, please cut and paste it into your issue. PLEASE, do not say you received a critical error' without telling us what the error or notice is. If you do so, the ticket will be closed without a reply.

Before you post, check the JavaScript!

Sometimes, an issue may be tied to JavaScript. To make this determination, you will need to check the JavaScript console. To do this, ensure your web browser is the topmost window. On your keyboard, press CTRL+SHIFT+I. The JavaScript console will open. If there are notices or errors there, please cut and paste them into your issue. We would prefer a cut-and-paste since it will include all pertinent information. Also, Redux dev mode must be enabled so an accurate line number may be reported.

-->

Site Health Report

Instructions: In the WordPress Admin screen, click Tools, select Redux, click Info, and click "Copy site info to clipboard." Paste the results here.

Steps to reproduce

Please list your steps clearly so that we can do the same things you do to reproduce the issue.

Expected Behavior

What did you expect to happen?

Actual Behavior

What actually happened?

Any Error Details (PHP/JavaScript)

Please post any PHP error messages, trace logs, or JavaScript console error messages here

papazetis commented 2 weeks ago

First of all, congrats for this plugin. It helps me to build my plugin options. As I said I am creating my own plugin using Redux for plugin options.

Site Health Report

wp-core

version: 6.6.2 site_language: en_US user_language: en_US timezone: +00:00 permalink: undefined https_status: true multisite: false user_registration: 0 blog_public: 1 default_comment_status: open environment_type: development user_count: 1 dotorg_communication: true

wp-paths-sizes

wordpress_path: D:\laragon\www\plugins wordpress_size: loading... uploads_path: D:\laragon\www\plugins/wp-content/uploads uploads_size: loading... themes_path: D:\laragon\www\plugins/wp-content/themes themes_size: loading... plugins_path: D:\laragon\www\plugins/wp-content/plugins plugins_size: loading... fonts_path: D:\laragon\www\plugins/wp-content/uploads/fonts fonts_size: loading... database_size: loading... total_size: loading...

wp-active-theme

name: Twenty Twenty-One (twentytwentyone) version: 2.3 author: the WordPress team author_website: https://wordpress.org/ parent_theme: none theme_features: core-block-patterns, widgets-block-editor, automatic-feed-links, title-tag, post-formats, post-thumbnails, menus, html5, custom-logo, customize-selective-refresh-widgets, wp-block-styles, align-wide, editor-styles, editor-style, editor-font-sizes, custom-background, editor-color-palette, editor-gradient-presets, responsive-embeds, custom-line-height, link-color, custom-spacing, custom-units, widgets theme_path: D:\laragon\www\plugins/wp-content/themes/twentytwentyone auto_update: Disabled

wp-plugins-active (1)

Cookie Consent Modal with Bot Detection: version: 1.0.0, author: Nick Papazetis, Auto-updates disabled

wp-plugins-inactive (5)

Plugin Check (PCP): version: 1.2.0, author: WordPress Performance Team and Plugin Review Team, Auto-updates disabled Polylang: version: 3.6.4, author: WP SYNTEX, Auto-updates disabled Query Monitor: version: 3.16.4, author: John Blackbourn, Auto-updates disabled WPML Multilingual CMS: version: 4.6.13, author: OnTheGoSystems, Auto-updates disabled WPML String Translation: version: 3.2.14, author: OnTheGoSystems, Auto-updates disabled

wp-media

image_editor: WP_Image_Editor_GD imagick_module_version: Not available imagemagick_version: Not available imagick_version: Not available file_uploads: 1 post_max_size: 2G upload_max_filesize: 2G max_effective_size: 2 GB max_file_uploads: 20 gd_version: bundled (2.1.0 compatible) gd_formats: GIF, JPEG, PNG, WebP, BMP, AVIF, XPM ghostscript_version: not available

wp-server

server_architecture: Windows NT 10.0 AMD64 httpd_software: Apache/2.4.54 (Win64) OpenSSL/1.1.1q PHP/8.1.10 php_version: 8.1.10 64bit php_sapi: apache2handler max_input_variables: 10000 time_limit: 60 memory_limit: 512M max_input_time: 60 upload_max_filesize: 2G php_post_max_size: 2G curl_version: 7.77.0 OpenSSL/1.1.1q suhosin: false imagick_availability: false pretty_permalinks: true htaccess_extra_rules: false current: 2024-11-01T19:31:03+00:00 utc-time: Friday, 01-Nov-24 19:31:03 UTC server-time: 2024-11-01T19:31:02+00:00

wp-database

extension: mysqli server_version: 5.7.43 client_version: mysqlnd 8.1.10 max_allowed_packet: 536870912 max_connections: 151

wp-constants

WP_HOME: https://plugins.local WP_SITEURL: https://plugins.local WP_CONTENT_DIR: D:\laragon\www\plugins/wp-content WP_PLUGIN_DIR: D:\laragon\www\plugins/wp-content/plugins WP_MEMORY_LIMIT: 40M WP_MAX_MEMORY_LIMIT: 512M WP_DEBUG: true WP_DEBUG_DISPLAY: true WP_DEBUG_LOG: false SCRIPT_DEBUG: false WP_CACHE: false CONCATENATE_SCRIPTS: undefined COMPRESS_SCRIPTS: undefined COMPRESS_CSS: undefined WP_ENVIRONMENT_TYPE: development WP_DEVELOPMENT_MODE: plugin DB_CHARSET: utf8 DB_COLLATE: undefined

wp-filesystem

wordpress: writable wp-content: writable uploads: writable plugins: writable themes: writable fonts: writable 0: Writable

redux-framework

version: 4.5.0 installation: in_plugin data directory: D:/laragon/www/plugins/wp-content/plugins/cookie-consent-modal/vendor/redux-framework/redux-core/ browser: Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36 Browser: Chrome Version: 130.0.0.0 Platform: Windows

redux-instance-cookie_consent_modal

opt_name: cookie_consent_modal global_variable: cookie_consent_modal dev_mode: true ajax_save: true page_slug: cookie_consent_modal_options page_permissions: manage_options menu_type: submenu page_parent: options-general.php compiler: true output: true output_tag: true templates_path: undefined extensions: Accordion: 4.3.16 Color Scheme: 4.4.10 Custom Fonts: 4.4.2 Customizer: 4.4.11 Datetime: 4.3.15 Google Maps: 4.4.0 Icon Select: 4.4.2 Import Export: 4.0.0 Js Button: 4.3.16 Metaboxes: 4.2.0 Multi Media: 4.4.1 Options Object: 4.0.0 Repeater: 4.3.13 Search: 3.4.5 Shortcodes: 4.3.6 Social Profiles: 4.3.17 Tabbed: 4.4.8 Taxonomy: 4.4.6 Users: 4.4.1 Widget Areas: 4.3.20

Steps to reproduce

Try to create just a repeater field with some text fields in it. Do not add any other fields outside the repeater.

Expected Behavior

When I click "Add", should give me the option to fill the fields on the next repeater section.

Actual Behavior

It doesn't do anything and returns an error on console.

Any Error Details (PHP/JavaScript)

Error: Uncaught TypeError: Cannot read properties of undefined (reading 'mceInit') on file /redux-core/inc/extensions/repeater/repeater/redux-repeater.js on line 148 editorSettings = window.tinyMCEPreInit.mceInit[firstEditorId];

kprovance commented 2 weeks ago

@papazetis - Please download v4.5.0.1 from this repo, install it, activate and let me know if your issue is solved. Thanks.

papazetis commented 1 week ago

@kprovance

@papazetis - Please download v4.5.0.1 from this repo, install it, activate and let me know if your issue is solved. Thanks.

Yes it works ok now. Thanks for sorting this out!

blackandcode commented 1 week ago

There is an issue connected to both the Repeater and TinyMCE in the file redux-core/inc/extensions/repeater/repeater/redux-repeater.js, specifically on line 162. The problematic code is as follows:

quicktagsSetting = QTags.getInstance(firstEditorId).settings;

I’m encountering an error:

Uncaught TypeError: Cannot read properties of undefined (reading 'settings')

In my setup, I have multiple repeaters, where some contain a TinyMCE editor, while others do not. The issue arises because the first repeater in the settings does not include a TinyMCE editor. As a result, QTags.getInstance(firstEditorId) returns undefined, causing the settings property to be inaccessible and triggering the error.

Could you help revise this part of the code to handle such cases where the TinyMCE editor might not be present on the first repeater?

blackandcode commented 1 week ago

Here is a fix for this as contribution so you can easily fix it.

I changed just two things in file redux-repeater.js

FIRST CHANGE Line of code 146 const firstEditorId = parent.find( '.redux-repeater-accordion-repeater' ).find( '.redux-container-editor:first' ).attr( 'data-id' );

changed to: const firstEditorId = parent.find( '.redux-repeater-accordion-repeater' ).find( '.redux-container-editor:first' ).attr( 'data-id' );

SECOND CHANGE

Line of code 148 if ( true === window.tinyMCEPreInit ) {

changed to: if (window.tinyMCEPreInit && window.tinyMCEPreInit.mceInit && window.tinyMCEPreInit.mceInit[firstEditorId]) {

Both changes were nececery in order to make this repeater and editor to work since both were not working properly.

Here is also complete full code at the end


if ( newSlide.find( '.redux-container-editor' ) ) {
    const firstEditorId = parent.find( '.redux-repeater-accordion-repeater' ).find( '.redux-container-editor:first' ).attr( 'data-id' );

    if (window.tinyMCEPreInit && window.tinyMCEPreInit.mceInit && window.tinyMCEPreInit.mceInit[firstEditorId]) {
    editorSettings = window.tinyMCEPreInit.mceInit[firstEditorId];
    }

  $.each(
    newSlide.find( '.redux-container-editor' ),
    function () {
        // Grab an editor id.
        let quicktagsSetting;

        items.push( $( this ).attr( 'data-id' ) );

        // Grab an editor settings from wp_editor
        // Grab a quicktags settings.
        quicktagsSetting    = QTags.getInstance( firstEditorId ).settings;
        quicktagsSetting.id = items[items.length - 1];
    }
)
kprovance commented 3 days ago

@blackandcode, I'll take a look at your proposed changes today. I have to ask about this:

Line of code 146
const firstEditorId = parent.find( '.redux-repeater-accordion-repeater' ).find( '.redux-container-editor:first' ).attr( 'data-id' );

changed to:
const firstEditorId = parent.find( '.redux-repeater-accordion-repeater' ).find( '.redux-container-editor:first' ).attr( 'data-id' );

The two lines are the same. I'm not sure what your proposed change is.

blackandcode commented 3 days ago

I apologize for the confusion earlier. I mistakenly shared a newly added line instead of the current one. The current selector in current version of Redux.io is:

const firstEditorId = $( '.redux-repeater-accordion-repeater:first' ).find( '.redux-container-editor' ).attr( 'data-id' );

The issue with this selector is that it specifically targets the first repeater. However, that repeater might not always contain a redux-container-editor. For example, in my case, I had two repeaters, and the first one did not include a redux-container-editor as it was a simpler one.

This is way i replaced it with const firstEditorId = parent.find( '.redux-repeater-accordion-repeater' ).find( '.redux-container-editor:first' ).attr( 'data-id' );

kprovance commented 3 days ago

No problem. Thanks for updating. I'll get it a spin now.