So for my AJAX tabs I have the following script:
<script> jQuery(document).ready(function() { jQuery('.royal_private_menu a').click(function(e) { e.preventDefault(); var tab_id = jQuery('this').attr('id'); jQuery.ajax({ type: "GET", url: "wp-admin/admin-ajax.php", dataType: 'html', data: ({ action: 'my_tab_menu', id: tab_id}), success: function(data){ jQuery('#private_menu_'+tab_id).html(data); }, error: function(data) { alert("Error!"); return false; } }); }); }); </script>
I got following error with url: "wp-admin/admin-ajax.php"
and the error is example.com/wp-admin/admin-ajax.php?action=my_tab_menu 404 Not found
.
Then I changed it to the following and got the same error: url: "admin_url('admin-ajax.php')"
then, example.com/admin_url('admin-ajax.php');?action=my_tab_menu 404 Not found
.
What is going on and what am I doing wrong?
Thanks
EDIT
Here is my files:
So I feel like I am really close to getting Ajax working but I am getting an error:
Here is php:
<div class="royal_private_menu"> <a href="#private_menu" id="items_id">Items</a> <a href="#private_menu_received_order_id" id="received_order_id">Received Order</a> <a href="#private_menu_my_orders_id" id="my_orders_id">My orders</a> <a href="#private_menu_points_id" id="points_id">Points</a> <a href="#private_menu_setting_id" id="setting_id">Setting</a> </div> <div id="private_menu"> <!--Default page --> <?php get_template_part('page-parts/03_private_items'); ?> </div> <div id="private_menu_received_order_id"> </div> <div id="private_menu_my_orders_id"> </div> <div id="private_menu_points_id"> </div> <div id="private_menu_setting_id"> </div> <script> jQuery(document).ready(function() { jQuery('.royal_private_menu a').click(function(e) { e.preventDefault(); var tab_id = jQuery('this').attr('id'); jQuery.ajax({ type: "GET", url: "<?php echo admin_url('admin-ajax.php'); ?>", dataType: 'html', data: ({ action: 'my_tab_menu', id: tab_id}), success: function(data){ jQuery('#private_menu_'+tab_id).html(data); }, error: function(data) { alert("Error!"); return false; } }); }); }); </script>
And in my function.php:
function my_tab_menu() { $template_part_path = 'page-parts/03_private_' . $_GET['id']; get_template_part($template_part_path); } add_action('wp_ajax_my_tab_menu', 'my_tab_menu'); add_action('wp_ajax_nopriv_my_tab_menu', 'my_tab_menu');
And here is my file names:
03_private_items.php 03_private_my_orders.php 03_private_points_id.php 03_private_received_order_id.php 03_private_setting_id.php
EDIT 2
I changed the success
to alert("Success!");
and I got the Success
alert. So everything is working except it is not fetching any data from other php files. What am I missing?
EDIT 3
With console.log(data);
, this is the script that I see in the console:
jQuery(document).ready(function() { jQuery('.royal_private_menu a').click(function(e) { e.preventDefault(); var tab_id = jQuery('this').attr('id'); jQuery.ajax({ type: "GET", url: "http://example.com/wp-admin/admin-ajax.php", dataType: 'html', data: ({ action: 'royal_private_tab', id: tab_id}), success: function(data){ jQuery('#private_menu_'+tab_id).html(data); console.log(data); }, error: function(data) { alert("Error!"); return false; } }); }); });
Advertisement
Answer
Then I changed it to the following and got the same error:
url: "admin_url('admin-ajax.php')"
then,example.com/admin_url('admin-ajax.php');?action=my_tab_menu
404 Not found.
If the URL contains the literal string admin_url('admin-ajax.php');
then that means you PHP isn’t being parsed.
Try:
url: "<?php echo admin_url('admin-ajax.php'); ?>",
You can also use wp_localize_script
to set the ajax URL when you enqueue a script:
wp_enqueue_script( 'ajax-script', plugins_url( '/js/my_query.js', __FILE__ ), array('jquery') ); // in JavaScript, object properties are accessed as ajax_object.ajax_url, ajax_object.we_value wp_localize_script( 'ajax-script', 'ajax_object', array( 'ajax_url' => admin_url( 'admin-ajax.php' ), 'we_value' => 1234 ) );
https://codex.wordpress.org/AJAX_in_Plugins#Separate_Javascript_File
In this case you would set the URL like this:
url: ajax_object.ajax_url,
The advantage of doing it this way is that you don’t have to inline your javascript; you can just enqueue a JS file like you normally would.
From the comments:
So, when I went to example.com/wp-admin/admin-ajax.php I get “0” on a blank page. And that is exactly what is shown on the console on the ajax tab page. Is it normal?
Getting a 0
result either means your hook is not attached to the action or your hook generates no output and fails to exit.
In your JS, you’re setting your action like this:
action: 'royal_private_tab'
In your PHP your declaring your hooks like this:
add_action('wp_ajax_my_tab_menu', 'my_tab_menu'); add_action('wp_ajax_nopriv_my_tab_menu', 'my_tab_menu');
You need to either use royal_private_tab
or my_tab_menu
in both places, ex:
add_action('wp_ajax_royal_private_tab', 'my_tab_menu'); add_action('wp_ajax_nopriv_royal_private_tab', 'my_tab_menu');
Also, you should exit
at the end of your hook:
function my_tab_menu() { $template_part_path = 'page-parts/03_private_' . $_GET['id']; get_template_part($template_part_path); exit; }