Use ajax without a plugin?

Question

What I'm trying to do:
Make an ajax-powered search button that gets the text from an input and give a list of post id's that match that search.

Note: I must probably sound very stupid to 90% of you, but I'm rather new to ajax and wordpress, so if I'm doing it all wrong, it would be great if someone could point me out what I'm doing wrong or if he knows a better guide than the ones I used. (The problems I think I'm having with the script are written all the way down below.)

To start I thought of just making a button that uses ajax to get the title of a post-id.
I read these pages:

• https://www.smashingmagazine.com/2011/10/how-to-use-ajax-in-wordpress/
• https://developer.wordpress.org/plugins/javascript/summary/

I've tried out all this code on both these pages, however, I'm always stuck because I need to create a plugin. I'm not trying to create a plugin so I was wondering if I could just write all the code on my search page.

I'm sad however that it doesn't work, and I cannot find out why... (i get redirected to the homepage)

I'm just curious if I have to research how to create plugins etc. or is there a much simpler way that just allows me to get e.g. the post title of a certain ID through an AJAX call without using a plugin?

This is the code I tried:

The Ajax call:

<script>    
jQuery(document).ready(function($) {           //wrapper
    $("body").on("click",".ajax",function() {             //event
        var s_str = this.value;
        console.log(s_str);
        console.log(admin_ajax_url.ajax_url);
        var this2 = this;                      //use in callback
        $.post(admin_ajax_url.ajaxurl, {         //POST request
           _ajax_nonce: get_title_nonce.nonce,     //nonce
            action: "get_title",            //action
            id: s_str,                  //data
            success: function(response) {
                if(response.type == "success") {
                    alert("success")
                }
                else {
                    alert("failed")
                }
            }
        }, function(data) {                    //callback
            $("#tt").html(data);              //insert server response
        });
    });
});
</script>

The search form:

$the_title = '';
 $s_str = 18694;
 $nonce = wp_create_nonce("get_title_nonce");
  $link = admin_url('http://jtc.ae/pre/wp/wp-admin/admin-ajax.php?action=get_title&post_id='.$s_str.'&nonce='.$nonce);
        echo '<a class="ajax" data-nonce="' . $nonce . '" data-post_id="' . $s_str . '" href="' . $link . '">'.$s_str.'</a> Title: <span id="tt">'.$the_title."</span>";

The rest of the code I added as written in the guides:

<?php

add_action( 'init', 'my_script_enqueuer' );
function my_script_enqueuer() {
    wp_register_script('ajax_search',TEMPLATEPATH.'/new/js/ajax_search.js', array('jquery'));
    wp_localize_script('ajax_search', 'admin_ajax_url', array( 'ajaxurl' => admin_url( 'admin-ajax.php' )));

   wp_enqueue_script( 'jquery' );
   wp_enqueue_script( 'ajax_search' );
}



add_action("wp_ajax_get_title", "get_title");
add_action("wp_ajax_nopriv_get_title", "get_title_must_login");

function get_title() {
   if ( !wp_verify_nonce( $_REQUEST['nonce'], "get_title")) {
      exit("No naughty business please");
   }   
   $the_title = get_the_title($_REQUEST["post_id"]);

   if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
      $result = json_encode($result);
      echo $result;
   }
   else {
      header("Location: ".$_SERVER["HTTP_REFERER"]);
   }

   die();
}
function get_title_must_login() {
   echo "You must log in to get title";
   die();
}
?>

Probably the problems lie here:
I'm not sure about these add_action parts... I don't think I need it if I add the link to admin-ajax.php directly like I did just here above: http://jtc.ae/pre/wp/wp-admin/admin-ajax.php? So could I just scrap this first add_action?

Also I think that the bottom add_actions are probably not properly excecuted on my search_page.php. But this is just the thing: I'm not planning on creating any plugins, so I don't know where to put them...

Answer 1

Plugin code is just... code, it can go in a themes functions.php, or a plugin file, there's no magical or special difference other than the order they're loaded in, and the API calls are identical, work the same way etc because they're the same. It's just how the code is packaged

For example, if you ever want to do something without using a plugin, take a plugin, remove the comment at the top of the main file, and hey presto you've got your answer.

The problem you're facing is that you've tried to put your logic inside the search page. But that's not how the AJAX API works. When the browser makes a request to the AJAX endpoint, no templates are loaded, so your search template is never loaded, and your code to handle the request is never loaded.

Instead, the code needs to be in functions.php which is always loaded.

You can see this here:

add_action( 'init', 'my_script_enqueuer' );

Here, you're saying "When the init event happens, run this function", but if you're in the search page template, then that event has already happened. Remember, templates are loaded after everything else, not before

Answer 2

After a lot of tinkering I finally got the answer:

First of all you don't need this: Delete it

add_action( 'init', 'my_script_enqueuer' );
function my_script_enqueuer() {
    wp_register_script('ajax_search',TEMPLATEPATH.'/new/js/ajax_search.js', array('jquery'));
    wp_localize_script('ajax_search', 'admin_ajax_url', array( 'ajaxurl' => admin_url( 'admin-ajax.php' )));

   wp_enqueue_script( 'jquery' );
   wp_enqueue_script( 'ajax_search' );
}

Second, I was messing up GET and POST data. Use this to create an ajax search form:

<form method="post" id="searchbox">
    <input value="18694" name="post_id" class="ajax">
    <input type="button" class="ajaxgo" value="Submmmittt" name="submit">
</form>
Title: <span id="tt"></span> //to test the output

And make the ajax call with a script below this like this:

<script>
jQuery(document).ready(function($) {
    $("body").on("click",".ajaxgo",function(){
        console.log("fire");
        var s_str = $(".ajax").val();
        var ajax_url = "<?php echo admin_url( 'admin-ajax.php' ); ?>";
        var get_title_nonce = "<? echo $get_title_nonce; ?>";
        var data = {
            nonce: get_title_nonce,
            action: "get_title",
            post_id: s_str, 
        };
        $.post(
            ajax_url,
            data,
            function(data) {                    //callback
                $("#tt").html(data);              //insert server response
            }
        );
    });
});
</script>

Finally use this code in your template's functions.php file:

function get_title() {

   if ( !wp_verify_nonce( $_POST['nonce'], "get_title_nonce")) {
      exit("No naughty business please");
   }   
   $result = get_the_title($_POST["post_id"]);

   if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
      //$result = json_encode($result);
      echo $result;
   } else {
      header("Location: ".$_SERVER["HTTP_REFERER"]);
   }

   die();
}
function get_title_must_login() {
   echo "You must log in to get title";
   die();
}

Answer 3

You may not want to post the ID via ajax for security reasons becuase your users can manipulate the ajax request. Here is a server side way to get the post id:

<script>
jQuery(document).ready(function($) {
    $("body").on("click",".ajaxgo",function(){
        console.log("fire");
        var s_str = $(".ajax").val();
        var ajax_url = "<?php echo admin_url( 'admin-ajax.php' ); ?>";
        var get_title_nonce = "<? echo $get_title_nonce; ?>";
        var data = {
            nonce: get_title_nonce,
            action: "get_title",
        };
        $.post(
            ajax_url,
            data,
            function(data) {                    //callback
                $("#tt").html(data);              //insert server response
            }
        );
    });
});
</script>

And

function get_title() {

  if ( !wp_verify_nonce( $_POST['nonce'], "get_title_nonce" ) ) {
    exit( "No naughty business please" );
  }

  $url      = wp_get_referer();
  $post_id  = url_to_postid( $url )
  $result   = get_the_title( $post_id );

  if ( !empty( $_SERVER['HTTP_X_REQUESTED_WITH'] ) && strtolower( $_SERVER['HTTP_X_REQUESTED_WITH'] ) == 'xmlhttprequest' ) {
    //$result = json_encode( $result );
    echo $result;
  } else {
    header( "Location: ".$_SERVER["HTTP_REFERER"] );
  }

  die();
}

function get_title_must_login() {
  echo "You must log in to get title";
  die();
}