Hi friends, hope you are doing good. In today tutorial, I will explain how to post data using ajax in WordPress without using any plugin and also without creating a new plugin.
In this tutorial, I will show you how to get data from database by using the ajax in WordPress with the help of functions.php without using any plugin, so keep your close attention in this post. Please make sure you have already included the latest version jQuery. You can download the latest version of jQuery from here: http://code.jquery.com/jquery-latest.js
Open your functions.php file from your current activated WordPress theme folder and add the below code at the end the file and save. This function will include the autocomplete JS and autocomplete CSS in your site.
1 2 3 4 5 6 7 8 9 | /** * Function for get data from database using ajax. */ function myscripts() { wp_enqueue_script('customjs', get_stylesheet_directory_uri().'/js/jquery.custom.js', array('jquery')); wp_enqueue_script('autocomplete', get_stylesheet_directory_uri().'/js/jquery.auto-complete.js', array('jquery')); wp_enqueue_style('autocomplete.css', get_stylesheet_directory_uri().'/js/jquery.auto-complete.css'); } add_action('wp_enqueue_scripts', 'myscripts'); |
Now create a jquery.custom.js file in your JS folder and add below code snippet. The below code will post the user input data from search textbox to fwm_autocomplete function which is written in functions.php file.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | $(document).ready(function ($) { $(".search-box").autoComplete({ source: function (user_input, response) { $.ajax({ type: 'POST', dataType: 'json', url: admin_ajax_url, data: 'action=fwm_autocomplete&user_input=' + user_input, success: function (data) { response(data); } }); }, }); }); |
Now again go to the functions.php file and copy paste below code at the end of the file and save. Below code will fetch the data from the database table based on the user_input data and return in JSON format. You can use that data where you want.
1 2 3 4 5 6 7 8 9 10 11 12 13 | //Function to fetch data from database table function fwm_autocomplete(){ global $wpdb; $user_input = $_POST['user_input']; $qry= 'SELECT DISTINCT(meta_value) FROM df_postmeta WHERE meta_value LIKE "%'.$user_input.'%" AND meta_key="freewebmentor"'; $results = $wpdb->get_results($qry, ARRAY_A); echo json_encode($$results); exit(); //stop "0" from being output } add_action('wp_ajax_nopriv_fwm_autocomplete', 'fwm_autocomplete'); add_action('wp_ajax_fwm_autocomplete', 'fwm_autocomplete'); |
Hope this tutorial help you more, do you like & share this article with your friends, and don’t forget to follow us on Facebook and Twitter to learn cool WordPress tutorials.
If you like FreeWebMentor and you would like to contribute, you can write an article and mail your article to [email protected] Your article will appear on the FreeWebMentor main page and help other developers.
Article Tags: ajax with wordpress, wordpress admin ajax, wordpress ajax, wordpress ajax example, wordpress ajax load, wordpress tutorial, wordpress tutorial for beginner, wordpress tutorial for beginners, wordpress tutorials, wordpress tutorials for beginners
