Как добавить пользовательские поля на странице плагина WordPress с ajax

Question

У меня есть страница плагина, где я добавил несколько настраиваемых полей для создания формы, созданной с помощью полей c.

На моей странице плагина у меня есть группа опций с field_name и type_of_field. .

Если пользователь выбирает «выбрать» в качестве типа поля, я хотел бы динамически добавить другой набор текстовых полей, чтобы составить параметры выбора.

//definition of the fields

    public function setSettings()
        {
            $args = array(
                array(
                    'option_group' => 'nsp_form_option_group',
                    'option_name' => 'nps_form_option',
                    'callback' => array( $this->form_callbacks, 'formSanitize' )
                )
            );

            $this->settings->setSettings( $args );
        }

        public function setSections()
        {
            $args = array(
                array(
                    'id' => 'nsp_form_section',
                    'title' => 'Form Manager',
                    'callback' => array( $this->form_callbacks, 'formSectionManager' ),
                    'page' => 'nsp_form_manager'
                )
            );

            $this->settings->setSections( $args );
        }


        // define the fields for creating a form field
        // name
        // type
        // required
        public function setFields()
        {
            $args = array(
                array(
                    'id' => 'field_name',
                    'title' => 'Field Name',
                    'callback' => array( $this->form_callbacks, 'textField' ),
                    'page' => 'nsp_form_manager',
                    'section' => 'nsp_form_section',
                    'args' => array(
                        'option_name' => 'nsp_form_option',
                        'label_for' => 'field_name',
                        'placeholder' => 'eg. Profession'
                    )
                ),
                array(
                    'id' => 'type_of_field',
                    'title' => 'Type of Field',
                    'callback' => array( $this->form_callbacks, 'selectField' ),
                    'page' => 'nsp_form_manager',
                    'section' => 'nsp_form_section',
                    'args' => array(
                        'option_name' => 'nsp_form_option',
                        'label_for' => 'type_of_field',
                        'options' => array(
                            'textfield' => 'Text',
                            'checkbox' => 'Checkbox',
                            'radio' => 'Radio buttons',
                            'select' => 'Select',
                            'textarea' => 'Textarea'
                        )
                    )
                ),
                array(
                    'id' => 'required',
                    'title' => 'Required',
                    'callback' => array( $this->form_callbacks, 'checkboxField' ),
                    'page' => 'nsp_form_manager',
                    'section' => 'nsp_form_section',
                    'args' => array(
                        'option_name' => 'nsp_form_option',
                        'label_for' => 'required',
                        'class' => 'ui-toggle'
                    )
                )
            );

            $this->settings->setFields( $args );
        }

//creation of fields
public function registerCustomFields()
    {
        // register setting
        foreach ( $this->settings as $setting ) {
            register_setting( $setting["option_group"], $setting["option_name"], ( isset( $setting["callback"] ) ? $setting["callback"] : '' ) );
        }

        // add settings section
        foreach ( $this->sections as $section ) {
            add_settings_section( $section["id"], $section["title"], ( isset( $section["callback"] ) ? $section["callback"] : '' ), $section["page"] );
        }

        // add settings field
        foreach ( $this->fields as $field ) {
            add_settings_field( $field["id"], $field["title"], ( isset( $field["callback"] ) ? $field["callback"] : '' ), $field["page"], $field["section"], ( isset( $field["args"] ) ? $field["args"] : '' ) );
        }
    }

// template
<div class="wrap">
    <h1>Form Fields Manager</h1>
    <?php settings_errors(); ?>

    <form method="post" action="options.php">
        <?php 
            settings_fields( 'nsp_form_option_group' );
            do_settings_sections( 'nsp_form_manager' );
            submit_button();
        ?>
    </form>
</div>

Я думал сделать ajax запрос 'onchange' и создать новые поля в php, но тогда как мне обновить шаблон для отображения / скрытия полей?

Или другой подход?

Answer 1

Ajax возможно, но также возможно (и проще) делать то, что вы хотите, только в JavaScript, без php. На самом деле я сделал нечто очень похожее на то, что вы хотите сделать в моем WordPress бэкэнде:

1. Решите, где вы хотите, чтобы новые поля отображались при выборе соответствующей опции выбора. В HTML этого места вставьте (пустую) таблицу HTML с уникальным идентификатором.

2. Сохраните код HTML новых полей, которые должны быть добавлены / показаны при выборе соответствующего параметра триггера в меню выбора внутри переменной, скажем,

let newRow = "<td>cell 1</td><td>cell 2</td>";

, если ваша таблица, например, содержит два столбца.

Когда в меню выбора выбран вариант, выбранный в качестве триггера, просто:

a) получить (ранее пустую) таблицу HTML с помощью

let table = document.getElementById('unique-id) ;

b) Затем в эту таблицу вы вставляете новую последнюю строку (с insertRow(-1)).

c) Затем вы получите последнюю строку таблицы с let lastRow = table.rows[-1]; «новой» HTML таблицы, теперь содержащей еще одну строку

d) И затем вставьте соответствующее новое поле в него, через lastRow.innerHTML = newRow;.

ОБНОВЛЕНИЕ: (Если вы хотите динамически использовать поля настроек, созданные в php коде)

1. Создать файл javascript, например update_fields. js. В этом файле вы определяете функцию JavaScript, которая выполняет то, что написано выше (или все, что вы хотите, чтобы это происходило с вашим полем настроек, когда выбран соответствующий параметр выбора). Не вводите код php в этот файл javascript. Просто обратитесь к полю настроек любым удобным для вас способом (например, при определении переменной). Для наглядности давайте использовать let settingsField = php_variable.field; (прочитайте до конца, и вы поймете это).

2. Используйте wp_enqueue_script(), чтобы зарегистрировать и поставить в очередь ваш файл javascript, созданный выше, на страница настроек. Другими словами, это импортирует функциональность javascript, созданную в файле, упомянутом в шаге 1., на страницу настроек. Чтобы сделать это правильно, отметьте https://developer.wordpress.org/reference/functions/wp_enqueue_script/.

3. Определите поле настроек, которое вы будете использовать sh для динамического использования, если выбрана опция выбора c. (если еще не сделано) в php коде. Сохраните его как переменную php, скажем, $settings_field.

4. Теперь вы используете wp_localize_script(). Не запутайтесь в названии, слово «локализация» здесь не имеет ничего общего с местами или путями, оно скорее относится к переводу терминов (что является первоначальной целью функции; переводить термины в сценариях; потому что встроенный в переводе терминов это невозможно в javascript через WordPress). В любом случае, вы используете функцию, чтобы получить поле настроек, созданное как переменную php на шаге 3. и передать его в файл javascript, созданный на шаге 1. После этого вы сможете использовать поле настроек, созданное в php как простая javascript переменная. Чтобы сделать это правильно, отметьте https://developer.wordpress.org/reference/functions/wp_localize_script/. Убедитесь, что вы используете тот же обработчик $, что и для wp_enqueue_script () в wp_localize_script (). В соответствии с определением переменной let settingsField на шаге 1. для работы этого примера вам нужно будет использовать "php_variable" в качестве $object name, используемого в функции wp_localize_script(), и "field" => $settings_field для назначения php_variable свойство объекта, доступное через .field в поле настроек, изначально сохраненное как $settings_field. Это то, что позволит вам использовать поле настроек, изначально созданное в коде php, динамически только через javascript, без необходимости ajax. Очистить?

Answer 2

Хорошо, поэтому сначала я бы отредактировал заголовок вопроса с помощью

Как добавить динамические c поля в форму на странице плагина с помощью настроек API

Я вроде нашел решение, не уверен, что это лучший подход, но он работает

    // ajax function

        const select_field = document.getElementById('type_of_field');
        const form_field_id = document.getElementById('form_field_id');

        select_field.addEventListener('change', (event) => {
             if(!event.target.value) {
                alert('Please Select One');
                return;
             }
             const count = select_field.options.length;

             if(event.target.value == 'select') {
                fetch(ajaxurl , {  
                    credentials: 'same-origin',
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded',
                        'Cache-Control': 'no-cache',
                    },
                    method: "POST",
                    body: 'action=update_form'
                }).then(res => {
                    return res.text();
                })
                .then(data => {
                    form_field_id.innerHTML = data;
                });
             } 
        })

    and then I replace all the content of the form (not just the field added)

    public function update_form()
        {
            $field = array(
                'id' => 'option',
                'title' => 'Option',
                'callback' => array( $this->form_callbacks, 'textField' ),
                'page' => 'nsp_form_manager',
                'section' => 'nsp_form_section',
                'args' => array(
                    'option_name' => 'nsp_form_option',
                    'label_for' => 'option',
                )
            );

            add_settings_field( $field["id"], $field["title"], ( isset( $field["callback"] ) ? $field["callback"] : '' ), $field["page"], $field["section"], ( isset( $field["args"] ) ? $field["args"] : '' ) );

            $res = settings_fields( 'nsp_form_option_group' ) . do_settings_sections( 'nsp_form_manager' ) . submit_button();

            echo $res;
            wp_die();
        }

    // form.php (where the form is displayed)
<div class="wrap">
    <h1>Form Fields Manager</h1>
    <?php settings_errors(); ?>

    <form method="post" action="options.php" id="form_field_id">
        <?php 
            settings_fields( 'nsp_form_option_group' );
            do_settings_sections( 'nsp_form_manager' );
            submit_button();
        ?>
    </form>
</div>