Home > Enterprise >  How to get ACF Field Value with AJAX
How to get ACF Field Value with AJAX

Time:11-07

little help please, it is WP site,

I have hidden section on page, and when user scroll to it popup shows asking for password, and when user enter password I must compare it with password from ACF field.

I tried several examples getting this done but i cant get anything... I could not find any clear examples of that on stackowerflow, or step by step examples, there are few of them that are not clear to me, I am kinda beginer

EDIT:

    function.php

function my_enqueue() {
    wp_enqueue_script( 'ajax-script', get_template_directory_uri() . '/js/global.js', array('jquery') );
    wp_localize_script( 'ajax-script', 'my_ajax_object', array( 'ajax_url' => admin_url( 'admin-ajax.php' ) ) );
}
add_action( 'wp_enqueue_scripts', 'my_enqueue' );



add_action('wp_ajax_nopriv_get_acf_field_ajax', 'my_action');
add_action('wp_ajax_get_acf_field_ajax', 'my_action');
function my_action() {

    $result = get_field('password', 'option');
    echo json_encode($result);

    // wp_send_json($result);
}

global.js

  $.ajax({
        type: "post",
        dataType: "json",
        url: my_ajax_object.ajax_url,
        data: { action: 'my_action' },
        success: function (data) {
          console.log(data);
        }
      });

i got POST http://my-local-website.com/wp-admin/admin-ajax.php error 400 bad request

CodePudding user response:

You have to register and localize a script file in your theme function.php.

function my_enqueue() {
      wp_enqueue_script( 'ajax-script', get_template_directory_uri() . '/js/my-ajax-script.js', array('jquery') );
      wp_localize_script( 'ajax-script', 'my_ajax_object', array( 'ajax_url' => admin_url( 'admin-ajax.php' ) ) );
 }
 add_action( 'wp_enqueue_scripts', 'my_enqueue' );

After localizing your JS file, you can use my_ajax_object object in your JS file:

var form_data = new FormData();
form_data.append('action', 'get_acf_field_ajax');
form_data.append('pass', password);
form_data.append('user_id', 141);
jQuery.ajax({
   type: "post",
   dataType: "json",
   url: my_ajax_object.ajax_url,
   data: form_data,
   success: function(response){
       console.log(response.success);
   }
});

then you have to write your ajax callback function.

<?php
add_action('wp_ajax_nopriv_get_acf_field_ajax', 'my_action');
add_action('wp_ajax_get_acf_field_ajax', 'my_action');
function my_action() {
    
    $response = array();

    $user_id = $_POST['user_id'];
    $user_pass = $_POST['pass'];
    $acf_pass = get_field('acf_pass', 'user_'. $user_id );
    if($user_pass == $acf_pass ){
        $response['success'] = true;
    }else{
        $response['success'] = false;
    }

    wp_send_json($response);
}
?>

try out this rough code and modify as per your need.

CodePudding user response:

This is how I manage to do it:

JS File:

$('.pwd').on('click', function () {
      var pwd = prompt('Please enter your password:', '');
      if (pwd != null && pwd != '') {
        var password = pwd;

        $.ajax({
          url: example_ajax_obj.ajaxurl,
          data: {
            'action': 'example_ajax_request',
            'password': password,
          },
          success: function (data) {
            console.log(data);
          },
          error: function (errorThrown) {
            console.log(errorThrown);
          }
        });
      }
      return false;
    });


function example_ajax_enqueue() {

    // Enqueue javascript on the frontend.
    wp_enqueue_script(
        'example-ajax-script',
        get_template_directory_uri() . '/js/global.js',
        array( 'jquery' )
    );

    // The wp_localize_script allows us to output the ajax_url path for our script to use.
    wp_localize_script(
        'example-ajax-script',
        'example_ajax_obj',
        array(
            'ajaxurl' => admin_url( 'admin-ajax.php' ),
        )
    );

}
add_action( 'wp_enqueue_scripts', 'example_ajax_enqueue' );



function example_ajax_request() {
    $acf_pass = get_field('password', 'option');

 
    // The $_REQUEST contains all the data sent via ajax
    if ( isset( $_REQUEST ) ) {
     
        $password = $_REQUEST['password'];         
        if ( $password == $acf_pass ) {
            $password = 'YESSSSSSS';
        }else{
            $password = 'NOOOOOO';
        }

        echo $password;
    }
     
   die();
}
 
add_action( 'wp_ajax_example_ajax_request', 'example_ajax_request' ); 
add_action( 'wp_ajax_nopriv_example_ajax_request', 'example_ajax_request' );
  • Related