CODEWITHSUNDEEP
jqueryajaxwordpress
Multi Pass
Multi Pass

Reputation: 3

Wordpress Ajax POST Error 403 admin-ajax.php

I have trouble to get my Ajax Call working when changing a <select> option.

JS:

function sendAjax() {
    console.log('function launched');
    jQuery.ajax({
      type: "POST", // use $_POST request to submit data
      url: john_cena_ajax_data.url, // URL to "wp-admin/admin-ajax.php"
      data: {
        action: 'john_cena', // wp_ajax_*, wp_ajax_nopriv_*
        nonce_ajax: john_cena_ajax_data.nonce,
        nonce_data: jQuery('#john-cena').data('nonce'),
        first_name: 'John', // PHP: $_POST['first_name']
        last_name: 'Cena'     // PHP: $_POST['last_name']
      },
      success: function (data) {
        jQuery('#john-cena').html(data);
      },
      error: function () {
        console.log(errorThrown); // error
      }
    });
  }

PHP:

add_action( 'wp_ajax_john_cena',        'acn_john_cena_ajax_callback' );
add_action( 'wp_ajax_nopriv_john_cena', 'acn_john_cena_ajax_callback' );  

function acn_john_cena_ajax_callback(){

    /* Check DOM nonce */
    check_ajax_referer( 'john-cena-shortcode', 'nonce_data' );

    /* Check Localize Script Nonce */
    check_ajax_referer( 'john-cena-script-nonce', 'nonce_ajax' );

    /* Get request */
    $first_name = isset( $_POST['first_name'] ) ? $_POST['first_name'] : 'N/A';
    $last_name = isset( $_POST['last_name'] ) ? $_POST['last_name'] : 'N/A';
        
    ?>
    <p>Hello. Your first name is <?php echo strip_tags( $first_name ); ?>.</p>
    <p>And your last name is <?php echo strip_tags( $last_name ); ?>.</p>
    <?php
    wp_die(); // required. to end AJAX request.
}

Form gets delivered by this PHP:

function acn_john_cena_shortcode_callback(){

    /* Enqueue JS only if this shortcode loaded. */
    wp_enqueue_script( 'my-john-cena-script' );

    /* Create Nonce */
    $nonce = wp_create_nonce( 'john-cena-shortcode' );

        $content = "<div id=\"john-cena\" data-nonce=\"' . esc_attr( $nonce ) . '\"></div>";

        $content .= "<label for=\"cfg\">Configuration</label>";
        $content .= "<select id=\"cfg\" name=\"cfg\" onchange=\"sendAjax()\">";
        $content .= "<option selected>1</option>";
        $content .= "<option>2</option>";
        $content .= "<option>3</option>";
        $content .= "<option>4</option>";
        $content .= "<option>5</option>";
        $content .= "<option>6</option>";
        $content .= "<option>7</option>";
        $content .= "<option>8</option>";
        $content .= "<option>9</option>";
        $content .= "<option>10</option>";
        $content .= "</select>";

        $content .= "<button id=\"btn\" onclick=\"javascript:sendAjax();\">Send Data</button>";

    return $content;
}

When i view the page in my Browser, the console says "function launched" as it should, but then i get a XHR Error 403 Forbidden response.

POST https://devphp.de/wordpress/wp-admin/admin-ajax.php [HTTP/2 403 Forbidden 452ms]

I tried to Google and check for a .htaccess, but there is none in my wordpress folders. I also disabled Cache Plugins and all other plugins. Even if it's the only running plugin I get the error.

I derived it from this tutorial: https://shellcreeper.com/how-to-secure-wordpress-ajax-using-nonce/ Github: https://github.com/turtlepod/wp-ajax-noob/tree/p2-security-nonce

I only changed the ajax call to a onchange function, and some function names, but I get this 403 Error.

I don't know what to do, can you help?

Upvotes: 0

Views: 4682

Answers (1)

gtamborero
gtamborero

Reputation: 3212

You should try to simplify your question. Use your javascript console and check whether the requests is running and what's the answer. Refer to official documentation: https://codex.wordpress.org/AJAX_in_Plugins Also on udemy are good courses of WordPress - Ajax.

Upvotes: 0

Related Questions