wp-ajax is working fine but wp_ajax_nopriv is not working - Wordpress

FarasatBaig
December 1, 2022
214 views
0 votes
2 Answers

I am trying to create a search bar for a blog, which is working fine if i am logged in, but not when i am not logged out. As logged out user, it returns a empty array with succesed code 200. i shall really appreciated if someone can help me

here is my PHP file

function get_ajax_posts() {
    $posts_d =array();
    // Query Arguments
    $args = array(
        'post_type' => 'custom_posts',
        'post_status' => 'publish',
        'posts_per_page' => -1,
        'order' => 'DESC',
        'orderby' => 'date',
    );

    // The Query
    $ajaxposts = new WP_Query($args); // changed to get_posts from wp_query, because `get_posts` returns an array
    if($ajaxposts->have_posts(  )){
        while($ajaxposts->have_posts(  )){
            $ajaxposts->the_post();
            array_push($posts_d, array(
                'title' => get_the_title(),
                'url'   => get_permalink()
            ));
        }
    }
    echo json_encode( $posts_d );

    exit; // exit ajax call(or it will return useless information to the response)
}

// Fire AJAX action for both logged in and non-logged in users
// add_action('wp_ajax_nopriv_get_ajax_posts', 'get_ajax_posts');
add_action('wp_ajax_get_ajax_posts', 'get_ajax_posts');
add_action('wp_ajax_nopriv_get_ajax_posts', 'get_ajax_posts');

wp_localize_script( 'hello-elementor-child-js', 'script',
            array( 'ajax_url' => admin_url( 'admin-ajax.php' ) ) );

Here is my javascript code

jQuery('#s').on('keyup',function(){
  $ajaxurl = "<?php echo admin_url('admin-ajax.php'); ?>"
    jQuery.ajax({
      type: 'POST',
      dataType: "json", // add data type
      // url: script.ajax_url,
      url: $ajaxurl,
      data: { action : 'get_ajax_posts' },
      success: function( response ) {
          var jobs = '';
          var count = 0;
          var text = jQuery('#s').val().toLowerCase();
          if (!arr || arr.length === 0){
            var arr = jQuery(response.filter(function(value){
              text = text || null;
              return value.title.toLowerCase().includes(text);
            }))
          };
          jQuery.each( arr, function( key, value ) {
            if (count == 5){
              return false;
            } else {
              jobs += '<a href="' + value.url + '"><p>' + value.title + '</p></a>';
              count++;
            }
            } );
            jQuery('#livesearch').html(jobs);
      }
    });
    });

Edit:

I’ve solved the problem with wp_add_inline_script. But, Is there a way to get json object as private in a function?

Answers

To send ajax requests from theme files we can use wp_localize_script to globally declare our javascript variables.

You need to localize your script.

add_action( 'init', 'load_files' );
function load_files() {
    wp_enqueue_script( 'custom-js', PATH_OF_YOUR_FILE , array( 'jquery' ), '1.0.0', true );
    wp_localize_script( 'custom-js', 'myVar', array( 'ajax_url' => admin_url( 'admin-ajax.php' ) ) );
}

In your js file

jQuery("#s").on("keyup", function () {
  let url = myVar.ajax_url; //pass your localize variable for ajax url
  jQuery.ajax({
    type: "POST",
    dataType: "json", // add data type
    url: url,
    data: { action: "get_ajax_posts" },
    success: function (response) {
      var jobs = "";
      var count = 0;
      var text = jQuery("#s").val().toLowerCase();
      if (!arr || arr.length === 0) {
        var arr = jQuery(
          response.filter(function (value) {
            text = text || null;
            return value.title.toLowerCase().includes(text);
          })
        );
      }
      jQuery.each(arr, function (key, value) {
        if (count == 5) {
          return false;
        } else {
          jobs += '<a href="' + value.url + '"><p>' + value.title + "</p></a>";
          count++;
        }
      });
      jQuery("#livesearch").html(jobs);
    },
  });
});

Check and let me know whether the ajax call is working or not.

PHP code

function get_ajax_posts() {
    $posts_d =array();
    // Query Arguments
    $args = array(
        'post_type' => 'post', //change post_type with your custom post type
        'post_status' => 'publish',
        'posts_per_page' => -1,
        'order' => 'DESC',
        'orderby' => 'date',
    );

    // The Query
    $ajaxposts = new WP_Query($args); // changed to get_posts from wp_query, because `get_posts` returns an array
    if($ajaxposts->have_posts(  )){
        while($ajaxposts->have_posts(  )){
            $ajaxposts->the_post();
            array_push($posts_d, array(
                'title' => get_the_title(),
                'url'   => get_permalink()
            ));
        }
    }
    echo json_encode( $posts_d );

    exit; // exit ajax call(or it will return useless information to the response)
}

// Fire AJAX action for both logged in and non-logged in users
// add_action('wp_ajax_nopriv_get_ajax_posts', 'get_ajax_posts');
add_action('wp_ajax_get_ajax_posts', 'get_ajax_posts');
add_action('wp_ajax_nopriv_get_ajax_posts', 'get_ajax_posts');

add_action( 'wp_enqueue_scripts',  'custom_localize_script' );
function custom_localize_script(){
    wp_localize_script( 'hello-elementor-child-js', 'ajax_object', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );
}

Javascript code

<script type="text/javascript">
            jQuery('#s').on('keyup',function(){
                jQuery.ajax({
                    type: 'POST',
                    dataType: "json", // add data type
                    url: ajax_object.ajaxurl,
                    data: { action : 'get_ajax_posts' },
                    success: function( response ) {
                        console.log(response);
                        var jobs = '';
                        var count = 0;
                        var text = jQuery('#s').val().toLowerCase();
                        if (!arr || arr.length === 0){
                            var arr = jQuery(response.filter(function(value){
                                text = text || null;
                                return value.title.toLowerCase().includes(text);
                            }))
                        };
                        jQuery.each( arr, function( key, value ) {
                            if (count == 5){
                                return false;
                            } else {
                                jobs += '<a href="' + value.url + '"><p>' + value.title + '</p></a>';
                                count++;
                            }
                        });
                        jQuery('#livesearch').html(jobs);
                    }
                });
            });
        </script>

Also I have shared my working code attachment. Please check and let me know if you find any issue

Please signup or login to give your own answer.

Click here to cancel reply.

wp-ajax is working fine but wp_ajax_nopriv is not working – WordPress

Answers