Addable Popup Not working load big data ajax ERR_CONNECTION_ABORTED | UPD

[killprime]

Hello!
I created the settings page by following the instructions:
http://manual.unyson.io/en/latest/helpers/settings-form.html
Everything worked well! But soon the work of the data ajax stopped working. Most likely this problem is due to the fact that ajax sends a lot of data (see screenshots). How to solve the problem I do not understand.

class-fw-settings-form-test.php:

<?php
if (!defined('FW'))
    die('Forbidden');

class FW_Settings_Form_Test extends FW_Settings_Form
{
    public function get_values()
    {
        return get_option('test_fw_settings_form', array());
    }
    
    public function set_values($values)
    {
        update_option('test_fw_settings_form', $values, false);
    }
    
    public function get_options()
    {
        $options_radio = array();
        
        $terms = get_terms(array(
            'hide_empty' => 0,
            'orderby' => 'name',
            'order' => 'ASC',
            'taxonomy' => 'courses',
            'pad_counts' => 1
        ));
        $terms = wp_list_filter($terms, array(
            'parent' => 0
        ));
        
        foreach ($terms as $term) {
            $options_radio[$term->term_id] = __($term->name, '{domain}');
        }
        return array(
            'tab1' => array(
                'type' => 'tab',
                'title' => 'Система экзаменов',
                'options' => array(
                    'examinations' => array(
                        'type' => 'addable-popup',
                        
                        'label' => __('Добавить экзамен', '{domain}'),
                        'desc' => __('Нажмите чтобы добавить экзамен.', '{domain}'),
                        'template' => '{{- name_exam }}',
                        'popup-title' => null,
                        'size' => 'large', // small, medium, large
                        'limit' => 0, // limit the number of popup`s that can be added
                        'add-button-text' => __('Добавить', '{domain}'),
                        'sortable' => true,
                        'popup-options' => array(
                            'name_exam' => array(
                                'label' => __('Наименование', '{domain}'),
                                'type' => 'text',
                                'value' => '',
                                'desc' => __('Введите наименование экзамена.', '{domain}')
                            ),
                            'tickets' => array(
                                'type' => 'addable-popup',
                                'label' => __('Добавить билет', '{domain}'),
                                'desc' => __('Нажмите чтобы добавить билет для данного экзамена.', '{domain}'),
                                'template' => '{{- name_ticket }}',
                                'popup-title' => null,
                                'size' => 'large', // small, medium, large
                                'limit' => 0, // limit the number of popup`s that can be added
                                'add-button-text' => __('Добавить', '{domain}'),
                                'sortable' => true,
                                'popup-options' => array(
                                    'name_ticket' => array(
                                        'label' => __('Название билета', '{domain}'),
                                        'type' => 'text',
                                        'value' => ''
                                    ),
                                    'issues' => array(
                                        'type' => 'addable-popup',
                                        'label' => __('Вопросы билета', '{domain}'),
                                        'desc' => __('Нажмите чтобы добавить вопрос для текущего билета.', '{domain}'),
                                        'template' => '{{- name_issue }}',
                                        'popup-title' => null,
                                        'size' => 'large', // small, medium, large
                                        'limit' => 0, // limit the number of popup`s that can be added
                                        'add-button-text' => __('Добавить', '{domain}'),
                                        'sortable' => true,
                                        'popup-options' => array(
                                            'name_issue' => array(
                                                'label' => __('Текст вопроса', '{domain}'),
                                                'type' => 'text',
                                                'value' => '',
                                                'desc' => __('Введите описание вопроса.', '{domain}')
                                            ),
                                            'option_2' => array(
                                                'type' => 'addable-box',
                                                'label' => __('Вариант ответа', '{domain}'),
                                                'desc' => __('Добавте вариант ответа', '{domain}'),
                                                'box-options' => array(
                                                    'option_1' => array(
                                                        'label' => __('Текст', '{domain}'),
                                                        'type' => 'textarea',
                                                        'value' => '',
                                                        'desc' => __('Введите описание варианта ответа.', '{domain}')
                                                    ),
                                                    'option_2' => array(
                                                        'type' => 'checkbox',
                                                        'value' => false, // checked/unchecked
                                                        'label' => __('Правильный', '{domain}'),
                                                        'desc' => __('Нажмите если ответ является верным', '{domain}'),
                                                        'text' => __('Да', '{domain}')
                                                    )
                                                ),
                                                'template' => 'Вариант {{- option_1 }}', // box title
                                                'box-controls' => array( // buttons next to (x) remove box button
                                                    'control-id' => '<small class="dashicons dashicons-smiley"></small>'
                                                ),
                                                'limit' => 0, // limit the number of boxes that can be added
                                                'add-button-text' => __('Добавить', '{domain}'),
                                                'sortable' => true
                                            )
                                        )
                                    )
                                )
                            ),
                            'cours' => array(
                                'type' => 'radio',
                                'attr' => array(
                                    'class' => 'custom-class',
                                    'data-foo' => 'bar'
                                ),
                                'label' => __('Экзамен для курса:', '{domain}'),
                                'desc' => __('Выберите к какому курсу относится данный экзамен', '{domain}'),
                                
                                'choices' => $options_radio,
                                // Display choices inline instead of list
                                'inline' => false
                            )
                        )
                    )
                    
                )
            )
            /*'tab2' => array(
            'type' => 'tab',
            'title' => 'Tab #2',
            'options' => array(
            'tab2_1' => array(
            'type' => 'tab',
            'title' => 'Sub Tab #1',
            'options' => array(
            'opt2_1' => array(
            'type' => 'text',
            'label' => 'Sub Option #1'
            ),
            ),
            ),
            'tab2_2' => array(
            'type' => 'tab',
            'title' => 'Sub Tab #2',
            'options' => array(
            'opt2_2' => array(
            'type' => 'textarea',
            'label' => 'Sub Option #2'
            ),
            ),
            ),
            ),
            ),*/
        );
        
    }
    
    protected function _init()
    {
        add_action('admin_menu', array(
            $this,
            '_action_admin_menu'
        ));
        add_action('admin_enqueue_scripts', array(
            $this,
            '_action_admin_enqueue_scripts'
        ));
        
        $this->set_is_side_tabs(true);
        $this->set_is_ajax_submit(true);
        # This returns the whole taxonomy...
        
        //var_dump($options_radio);
    }
    
    /**
     * @internal
     */
    public function _action_admin_menu()
    {
        add_menu_page('Экзамены', 'Экзамены', 'manage_options', /** used in @see _action_admin_enqueue_scripts() */ 'test-fw-settings-form', array(
            $this,
            'render'
        ), '', 6);
        
    }
    
    /**
     * @internal
     */
    public function _action_admin_enqueue_scripts()
    {
        $current_screen = get_current_screen(); // fw_print($current_screen);
        
        // enqueue only on settings page
        if ('toplevel_page_' . 'test-fw-settings-form' === $current_screen->base) {
            $this->enqueue_static();
        }
    }
}

functions.php:

add_action('fw_init', '_action_theme_test_fw_settings_form');
function _action_theme_test_fw_settings_form() {

	if (class_exists('FW_Settings_Form')) 
	{
		require_once get_template_directory() . '/class-fw-settings-form-test.php';
		new FW_Settings_Form_Test('test');
	}
 
}

[ViorelEremia]

Try the branch: #3327

[killprime]

Thanks for the answer! It did not work for me. =(

class-fw-settings-form-test.php:

<?php
if (!defined('FW'))
    die('Forbidden');

class FW_Settings_Form_Test extends FW_Settings_Form
{
    public function get_values()
    {
        return get_option('test_fw_settings_form', array());
    }
    
    public function set_values($values)
    {
        update_option('test_fw_settings_form', $values, false);
    }
    
    public function get_options()
    {
        $options_radio = array();
        
        $terms = get_terms(array(
            'hide_empty' => 0,
            'orderby' => 'name',
            'order' => 'ASC',
            'taxonomy' => 'courses',
            'pad_counts' => 1
        ));
        $terms = wp_list_filter($terms, array(
            'parent' => 0
        ));
        
        foreach ($terms as $term) {
            $options_radio[$term->term_id] = __($term->name, '{domain}');
        }
        return array(
            'tab1' => array(
                'type' => 'tab',
                'title' => 'Система экзаменов',
                'options' => array(
                    'examinations' => array(
                        'type' => 'addable-popup',
                        
                        'label' => __('Добавить экзамен', '{domain}'),
                        'desc' => __('Нажмите чтобы добавить экзамен.', '{domain}'),
                        'template' => '{{- name_exam }}',
                        'popup-title' => null,
                        'size' => 'large', // small, medium, large
                        'limit' => 0, // limit the number of popup`s that can be added
                        'add-button-text' => __('Добавить', '{domain}'),
                        'sortable' => true,
                        'popup-options' => array(
                            'name_exam' => array(
                                'label' => __('Наименование', '{domain}'),
                                'type' => 'text',
                                'value' => '',
                                'desc' => __('Введите наименование экзамена.', '{domain}')
                            ),
                            'tickets' => array(
                                'type' => 'addable-popup',
                                'label' => __('Добавить билет', '{domain}'),
                                'desc' => __('Нажмите чтобы добавить билет для данного экзамена.', '{domain}'),
                                'template' => '{{- name_ticket }}',
                                'popup-title' => null,
                                'size' => 'large', // small, medium, large
                                'limit' => 0, // limit the number of popup`s that can be added
                                'add-button-text' => __('Добавить', '{domain}'),
                                'sortable' => true,
                                'popup-options' => array(
                                    'name_ticket' => array(
                                        'label' => __('Название билета', '{domain}'),
                                        'type' => 'text',
                                        'value' => ''
                                    ),
                                    'issues' => array(
                                        'type' => 'addable-popup',
                                        'label' => __('Вопросы билета', '{domain}'),
                                        'desc' => __('Нажмите чтобы добавить вопрос для текущего билета.', '{domain}'),
                                        'template' => '{{- name_issue }}',
                                        'popup-title' => null,
                                        'size' => 'large', // small, medium, large
                                        'limit' => 0, // limit the number of popup`s that can be added
                                        'add-button-text' => __('Добавить', '{domain}'),
                                        'sortable' => true,
                                        'popup-options' => array(
                                            'name_issue' => array(
                                                'label' => __('Текст вопроса', '{domain}'),
                                                'type' => 'text',
                                                'value' => '',
                                                'desc' => __('Введите описание вопроса.', '{domain}')
                                            ),
                                            'option_2' => array(
                                                'type' => 'addable-box',
                                                'label' => __('Вариант ответа', '{domain}'),
                                                'desc' => __('Добавте вариант ответа', '{domain}'),
                                                'box-options' => array(
                                                    'option_1' => array(
                                                        'label' => __('Текст', '{domain}'),
                                                        'type' => 'textarea',
                                                        'value' => '',
                                                        'desc' => __('Введите описание варианта ответа.', '{domain}')
                                                    ),
                                                    'option_2' => array(
                                                        'type' => 'checkbox',
                                                        'value' => false, // checked/unchecked
                                                        'label' => __('Правильный', '{domain}'),
                                                        'desc' => __('Нажмите если ответ является верным', '{domain}'),
                                                        'text' => __('Да', '{domain}')
                                                    )
                                                ),
                                                'template' => 'Вариант {{- option_1 }}', // box title
                                                'box-controls' => array( // buttons next to (x) remove box button
                                                    'control-id' => '<small class="dashicons dashicons-smiley"></small>'
                                                ),
                                                'limit' => 0, // limit the number of boxes that can be added
                                                'add-button-text' => __('Добавить', '{domain}'),
                                                'sortable' => true
                                            )
                                        )
                                    )
                                )
                            ),
                            'cours' => array(
                                'type' => 'radio',
                                'attr' => array(
                                    'class' => 'custom-class',
                                    'data-foo' => 'bar'
                                ),
                                'label' => __('Экзамен для курса:', '{domain}'),
                                'desc' => __('Выберите к какому курсу относится данный экзамен', '{domain}'),
                                
                                'choices' => $options_radio,
                                // Display choices inline instead of list
                                'inline' => false
                            )
                        )
                    )
                    
                )
            )
        );
        
    }
    
    protected function _init()
    {
        //fw_print($_POST);
        if (isset($_POST['fw_theme_settings_form'])) {
            $this->parse_str($_POST['fw_theme_settings_form'], $parsed);
            unset($_POST['fw_theme_settings_form']);
            $_POST = array_merge($_POST, $parsed);
        }
        
        add_action('admin_menu', array(
            $this,
            '_action_admin_menu'
        ));
        add_action('admin_enqueue_scripts', array(
            $this,
            '_action_admin_enqueue_scripts'
        ));
        
        $this->set_is_side_tabs(true);
        $this->set_is_ajax_submit(true);
        # This returns the whole taxonomy...
        
        //var_dump($options_radio);
    }
    
    // The same than parse_str without max_input_vars limitation
    private function parse_str($string, &$result)
    {
        if ($string === '') {
            return false;
        }
        $result = array();
        // find the pairs "name=value"
        $pairs  = explode('&', $string);
        foreach ($pairs as $pair) {
            // use the original parse_str() on each element
            parse_str($pair, $params);
            $k = key($params);
            if (!isset($result[$k])) {
                $result += $params;
            } else {
                $result[$k] = $this->array_merge_recursive_distinct($result[$k], $params[$k]);
            }
        }
        return true;
    }
    // better recursive array merge function listed on the array_merge_recursive PHP page in the comments
    private function array_merge_recursive_distinct(array &$array1, array &$array2)
    {
        $merged = $array1;
        foreach ($array2 as $key => &$value) {
            if (is_array($value) && isset($merged[$key]) && is_array($merged[$key])) {
                $merged[$key] = $this->array_merge_recursive_distinct($merged[$key], $value);
            } else {
                $merged[$key] = $value;
            }
        }
        return $merged;
    }
    
    /**
     * @internal
     */
    public function _action_admin_menu()
    {
        add_menu_page('Экзамены', 'Экзамены', 'manage_options', /** used in @see _action_admin_enqueue_scripts() */ 'test-fw-settings-form', array(
            $this,
            'render'
        ), '', 6);
        
    }
    
    /**
     * @internal
     */
    public function _action_admin_enqueue_scripts()
    {
        $current_screen = get_current_screen(); // fw_print($current_screen);
        
        // enqueue only on settings page
        if ('toplevel_page_' . 'test-fw-settings-form' === $current_screen->base) {
            //fw_print($this->enqueue_static());
            //get_template_directory_uri());
            wp_deregister_script('fw-form-helpers');
            wp_enqueue_script('fw-form-helpers', get_template_directory_uri() . '/js/fw-form-helpers.js');
            wp_localize_script('fw-form-helpers', 'fwAjaxUrl', admin_url('admin-ajax.php', 'relative'));
            
        }
    }
}

fw-form-helpers.js:

/**
 * FW_Form helpers
 * Dependencies: jQuery
 * Note: You can include this script in frontend (for e.g. to make you contact forms ajax submittable)
 */
console.log('start');
var fwForm = {
	/**
	 * Make forms ajax submittable
	 * @param {Object} [opts] You can overwrite any
	 */
	initAjaxSubmit: function(opts) {
		var opts = jQuery.extend({
			selector: 'form[data-fw-form-id]',
			ajaxUrl: (typeof ajaxurl != 'undefined')
				? ajaxurl
				: ((typeof fwAjaxUrl != 'undefined')
					? fwAjaxUrl // wp_localize_script('fw-form-helpers', 'fwAjaxUrl', admin_url( 'admin-ajax.php', 'relative' ));
					: '/wp-admin/admin-ajax.php'
				),
			loading: function (elements, show) {
				elements.$form.css('position', 'relative');
				elements.$form.find('> .fw-form-loading').remove();

				if (show) {
					elements.$form.append(
						'<div'+
						' class="fw-form-loading"'+
						' style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255,255,255,0.1);"'+
						'></div>'
					);
				}
			},
			afterSubmitDelay: function(elements){},
			onErrors: function (elements, data) {
				if (isAdmin) {
					fwForm.backend.showFlashMessages(
						fwForm.backend.renderFlashMessages({error: data.errors})
					);
				} else {
					// Frontend
					jQuery.each(data.errors, function (inputName, message) {
						message = '<p class="form-error" style="color: #9b2922;">{message}</p>'
							.replace('{message}', message);

						var $input = elements.$form.find('[name="' + inputName + '"]').last();

						if (!$input.length) {
							// maybe input name has array format, try to find by prefix: name[
							$input = elements.$form.find('[name^="'+ inputName +'["]').last();
						}

						if ($input.length) {
							// error message under input
							$input.parent().after(message);
						} else {
							// if input not found, show message in form
							elements.$form.prepend(message);
						}
					});
				}
			},
			hideErrors: function (elements) {
				elements.$form.find('.form-error').remove();
			},
			onAjaxError: function(elements, data) {
				console.error(data.jqXHR, data.textStatus, data.errorThrown);
				alert('Ajax error (more details in console)');
			},
			onSuccess: function (elements, ajaxData) {
				if (isAdmin) {
					fwForm.backend.showFlashMessages(
						fwForm.backend.renderFlashMessages(ajaxData.flash_messages)
					);
				} else {
					var html = fwForm.frontend.renderFlashMessages(ajaxData.flash_messages);

					if (!html.length) {
						html = '<p>Success</p>';
					}

					elements.$form.fadeOut(function(){
						elements.$form.html(html).fadeIn();
					});

					// prevent multiple submit
					elements.$form.on('submit', function(e){ e.preventDefault(); e.stopPropagation(); });
				}
			}
		}, opts || {}),
		isAdmin = (typeof adminpage != 'undefined' && jQuery(document.body).hasClass('wp-admin')),
		isBusy = false;

		jQuery(document.body).on('submit', opts.selector, function(e){
			e.preventDefault();
			console.log('submit');
			if (isBusy) {
				console.warn('Working... Try again later.');
				return;
			}

			var $form = jQuery(this);

			if (!$form.is('form[data-fw-form-id]')) {
				console.error('This is not a FW_Form', 'Selector:'. opts.selector, 'Form:', $form);
				return;
			}

			// get submit button
			{
				var $submitButton = $form.find(':submit:focus');

				if (!$submitButton.length) {
					// in case you use this solution http://stackoverflow.com/a/5721762
					$submitButton = $form.find('[clicked]:submit');
				}

				// make sure to remove the "clicked" attribute to prevent accidental settings reset
				$form.find('[clicked]:submit').removeAttr('clicked');
			}

			var elements = {
				$form: $form,
				$submitButton: $submitButton
			};

			opts.hideErrors(elements);

			var delaySubmit = parseInt(
				opts.loading(
					elements,
					/**
					 * If you want to submit your ajaxified Theme Settings form without
					 * any notification for the user add class fw-silent-submit to
					 * the form element itself. This class will be removed
					 * automatically after this particular submit, so that popup will
					 * show when the user will press Submit button next time.
					 */
					! $form.hasClass('fw-silent-submit')
				)
			);
			delaySubmit = (isNaN(delaySubmit) || delaySubmit < 0) ? 0 : delaySubmit;

			$form.removeClass('fw-silent-submit');

			isBusy = true;
			console.log('isBusy');
			setTimeout(function(){
				if (delaySubmit) {
					opts.afterSubmitDelay(elements);
				}

				var data = $form.serialize() + ( $submitButton.length ? '&' + $submitButton.attr( 'name' ) + '=' + $submitButton.attr( 'value' ) : '' );
				console.log('setTimeout');
				if ( $form.attr( 'data-fw-form-id' ) === 'fw-settings-form:test' ) {
					data = {'fw_theme_settings_form': data};
					console.log(data);
				}

				jQuery.ajax({
					type: "POST",
					url: opts.ajaxUrl,
					data: data,
					dataType: 'json'
				}).done(function(r){
					isBusy = false;
					opts.loading(elements, false);

					if (r.success) {
						opts.onSuccess(elements, r.data);
					} else {
						opts.onErrors(elements, r.data);
					}
				}).fail(function(jqXHR, textStatus, errorThrown){
					isBusy = false;
					opts.loading(elements, false);
					opts.onAjaxError(elements, {
						jqXHR: jqXHR,
						textStatus: textStatus,
						errorThrown: errorThrown
					});
				});
			}, delaySubmit);
		});
	},
	backend: {
		showFlashMessages: function(messagesHtml) {
			var $pageTitle = jQuery('.wrap h2:first');

			while ($pageTitle.next().is('.fw-flash-messages, .fw-flash-message, .updated, .update-nag, .error')) {
				$pageTitle.next().remove();
			}

			$pageTitle.after('<div class="fw-flash-messages">'+ messagesHtml +'</div>');

			jQuery(document.body).animate({scrollTop: 0}, 300);
		},
		/**
		 * Html structure should be the same as generated by FW_Flash_Messages::_print_backend()
		 * @param {Object} flashMessages
		 * @returns {string}
		 */
		renderFlashMessages: function(flashMessages) {
			var html = [],
				typeHtml = [],
				messageClass = '';

			jQuery.each(flashMessages, function(type, messages){
				typeHtml = [];

				switch (type) {
					case 'error':
						messageClass = 'error';
						break;
					case 'warning':
						messageClass = 'update-nag';
						break;
					default:
						messageClass = 'updated';
				}

				jQuery.each(messages, function(messageId, message){
					typeHtml.push('<div class="'+ messageClass +' fw-flash-message"><p>'+ message +'</p></div>');
				});

				if (typeHtml.length) {
					html.push(
						'<div class="fw-flash-type-'+ type +'">'+ typeHtml.join('</div><div class="fw-flash-type-'+ type +'">') +'</div>'
					);
				}
			});

			return html.join('');
		}
	},
	frontend: {
		/**
		 * Html structure is the same as generated by FW_Flash_Messages::_print_frontend()
		 * @param {Object} flashMessages
		 * @returns {string}
		 */
		renderFlashMessages: function(flashMessages) {
			var html = [],
				typeHtml = [],
				messageClass = '';

			jQuery.each(flashMessages, function(type, messages){
				typeHtml = [];

				jQuery.each(messages, function(messageId, message){
					typeHtml.push('<li class="fw-flash-message">'+ message +'</li>');
				});

				if (typeHtml.length) {
					html.push(
						'<ul class="fw-flash-type-'+ type +'">'+ typeHtml.join('</ul><ul class="fw-flash-type-'+ type +'">') +'</ul>'
					);
				}
			});

			return html.join('');
		}
	}
};

// Usage example
if (false) {
	jQuery(function ($) {
		fwForm.initAjaxSubmit({
			selector: 'form[data-fw-form-id][data-fw-ext-forms-type="contact-forms"]',
			ajaxUrl: ajaxurl
		});
	});
}

[killprime]

You can come in and see.

[danyj]

@ViorelEremia , looks like issue , mine are returning null http://prntscr.com/jdrjai and they are full with options

[killprime]

@ViorelEremia , I'm waiting for information

[ViorelEremia]

Change your function in:

public function _action_admin_enqueue_scripts()
	{
		$current_screen = get_current_screen(); // fw_print($current_screen);

		// enqueue only on settings page
		if ('toplevel_page_test-fw-settings-form' === $current_screen->base) {
			$this->enqueue_static();

		}
	}

Your code is working well it is not related to max input vars.
I added a lot of items and you must check some ini directives like max_upload_size etc.
I added 10 examines in each examen 10 tests and each test 10 items that generate a very big json.
I don't see any issue here.

[killprime]

@ViorelEremia,
Thank you! Now the data is read well. But with the addition of new exams, the preservation of data hangs. And the changes are not saved.

[ViorelEremia]

Try to increase upload_max_filesize, post_max_size

[killprime]

@ViorelEremia ,
Increased values ​​of variables.
The .htaccess file:

php_value upload_max_filesize 10000M
php_value post_max_size 20000M
php_value memory_limit 30000M
php_value max_execution_time 18000
php_value max_input_time 12000
php_value max_input_vars 300000
php_value upload_max_size 20000M

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>

See the phpinfo data in the screenshot.

The data in the pop-up window is loaded for a very long time. Approximately 10 minutes each.
Changes are saved, then no. As if there were some failures.

[ViorelEremia]

Send me some temporary credentials (admin, ftp): viorel@themefuse.com
Please provide a link to this thread when submitting the message.

[killprime]

@ViorelEremia , Sent