Creating an ajax request in Wordpress programmatically

Here's a simple example of a WordPress ajax call from a plugin.

We have a simple search text input with an auto-suggest functionality using ajax and jQuery.

This plugin has a form with a text input and a button, JavaScript file for making the ajax call and a php function to do the searching. I'm using this on the back end, but front-end use is very similar.

My html code is simple, just a form and uses a bootstrap CSS. This is my html code:

Next, I must load my JavaScript file. File is called "ajax.js" and it's loaded in WP admin using 'admin_enqueue_scripts' hook.

function my_css_js($hook) {

     wp_enqueue_script( 'my_js_file', plugins_url('/ajax/ajax.js', __FILE__), array('jquery'), 1);

     wp_localize_script( 'my_js_file', 'ajax_details', array( 'ajax_url' => admin_url( 'admin-ajax.php' ) ) );

}

add_action( 'admin_enqueue_scripts', my_css_js);

 

And this is the JS file with the code:

jQuery(document).ready(function(){

     jQuery("input.get_results").keyup(function() {

          var search = jQuery(this).val();                   

          if(search.length>=3){

               jQuery.ajax({

               type: "post",

               url: ajax_details.ajax_url, //this is wordpress ajax file which is already avaiable in wordpress

               data: {

                    action:'get_data', //this value is first parameter of add_action

                    search:search

               },

               success: function(response){

                    console.log(response);

                    jQuery(".show_search ul").html(response);

                    jQuery(".show_search").show();

               }

               });

          }

     });          

});

This code fires on keyup event when user's typing in the text input. If the search term has 3 or more characters, then ajax fires. Using 3 or more characters helps in reducing potential number of search results and speeds up the search. After getting a response in html format I'm attaching in to the ul element in div with show search class and showing that div.

Now the PHP function. This will do the actual searching. Ajax is requesting function called "get_data":

function get_data(){

     global $wpdb;

     global $table_name;

     $html="";

     $search = $_POST['search'];

     $sql="Select * from $table_name where name like '$search%' order by search asc limit 30";

     $r2 = $wpdb->get_results($sql, ARRAY_A);

     foreach($r2 as $r){

          $html.='

• '.$r['name'].'
• ';

   

       }

       die($html);

  }

  add_action( 'wp_ajax_nopriv_get_data', 'get_data' );

  add_action( 'wp_ajax_get_data', 'get_data' );

   

  We must hook it to ajax calls so I'm adding two add_action lines. First one loads the function for all not logged in users and second line is calling the get_data function for all logged in users. Since I'm doing this in admin first line isn't necessary, but I'm adding it here in case someone wants to do this in the front end. My "get_data" function does the searching.

  Next, function is fetching the search term ($_POST['search']), executing a SQL command and fetching the data from the database. This is just a simple example, getting something from the database and loading it html string and then exiting the function and returning the html string back to JavaScript for showing it to the user.

   

  Last part, simple example of to select the text when user clicks on suggested search result:

  jQuery(document).on("click", ".search_term", function() {

       var text = jQuery(this).text();

       jQuery("input.get_results").val(text);       // replace search input value with clicked element text

       jQuery(".show_search ul").html('');          // clear the ul content

       jQuery(".show_search").hide();               // hide suggested results

  });          

  I'm using this document on click because search results are loaded with ajax and directly referencing click event on element class won't work on this dynamic content (example, jQuery(".search_term").click()). When an element with "search_term" class is clicked then value of the search text input is replaced with that search term. After that search results are cleared and search results div is hidden again.

  Again, this is very simple example, you can do much more with javascript and css, like hiding the search result div when clicking outside the element, checking also click event for text search input to see if there's text in it and doing the search if there's any text in the input longer than 2 characters, etc.

   

  I hope this works for you!

   

  If you need a professional help in developing web sites, web apps, Wordpress, Wordpress themes or plugins send us a message!

---

Comment & share

Kategorije: wordpress, ajax, plugin

Ključne riječi: wordpress, ajax, ajax call in wordpress, wordpress ajax plugin