Обновите пользовательское поле Wordpress, используя AJAX - PullRequest
Новая
       26

Обновите пользовательское поле Wordpress, используя AJAX

0 голосов
/ 02 февраля 2020

Я пытаюсь обновить настраиваемое поле в Wordpress, используя Ajax (например, при вводе текста в форме заменить текст настраиваемого поля одним нажатием кнопки). Я использую плагин Advanced Custom Fields и следую примеру, который нашел здесь, но это не похоже на работу: https://support.advancedcustomfields.com/forums/topic/use-update_field-with-ajax/

Что я сделал, это:

(1) Добавить html форму к моему синглу (посттип). php

<form id="test-form" action="">
<input type="text" name="input-test" value="<?php the_field('field-name'); ?>">
<input type="submit" value="Update">
</form>

(2) функция update_field в функциях. php (это функция ACF) 

function test_function() {
    $input_test = $_POST['input-test'];
    if (!isset($input_test) || $input_test == "") { $input_test = "Fall Back"; }
    update_field('field-name', $input_test);
    wp_die();
}
add_action( 'wp_ajax_nopriv_test_function',  'test_function' );
add_action( 'wp_ajax_test_function','test_function' );

(3) Поставить скрипт Js в функции. php

function theme_scripts() {
    wp_enqueue_script( 'functionality', get_template_directory_uri() . '/js/functionality.js', array ( 'jquery' ), 1.1, true);

    wp_localize_script('functionality', 'MyAjax',
    array(
        'ajaxurl' => admin_url('admin-ajax.php'),
        'postCommentNonce' => wp_create_nonce('myajax-post-comment-nonce')
    )
);
}
add_action( 'wp_enqueue_scripts', 'theme_scripts' );

(3) Создать Javascript файл js / functions. js

jQuery(document).ready(function() {
  var ajaxurl = 'http://'+window.location.host+'/wp-admin/admin-ajax.php';
  var form = "#test-form";
  jQuery(form).submit(function(event) {
    event.preventDefault();
    jQuery.ajax({
      url: ajaxurl + "?action=test_function",
      type: 'post',
      data: jQuery(form).serialize(),
      success: function(data) {
        console.log("SUCCESS!");
      },
      error: function(data) {
        console.log("FAILURE");
      }
    });
  });
});

Не уверен, что мне не хватает, потому что я очень новичок с Ajax. Я просто получаю «успех», но поле не обновляется. Я также попробовал вариант, показанный здесь https://www.youtube.com/watch?v=Z0Jw226QKAM с теми же результатами.

1 Ответ

0 голосов
/ 02 февраля 2020

Просто обновите ваш success обратный вызов, чтобы он был таким, и он будет работать: 

...
success: function(data) {
   console.log("SUCCESS!");
  $('name="input-test"').val(data)
},
...
...