AJAX (admin_url('admin-ajax.php');?action=) Not Found

Question

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;
        }  

        }); 

 }); 
 });

Answer 1

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;
}