1

I have a simple click function that gets the data of a radio button in a form and passes it to a function in my functions.php file. The problem is the Ajax never calls my action in my functions.php file. I always get "nothing found" as set in my ajax function.

Here is my code below, if anyone can spot the problem would be greatly appreciated.

JS:

$(".faq-category-select").on("click",function() {

var faqCategory = $(this).attr('value');
var str = '&faq_category=' + faqCategory + '&action=load_faqs_by_category';

$.ajax({
    type: "POST",
    dataType: "html",
    url: ajax_params.ajaxurl,
    data: str,
    success: function(data) {
        var $data = $(data);
        if($data.length){
            $("#faq-archive-content-wrap").append($data);
        } else{
            $("#faq-archive-content-wrap").append('<p>nothing found</p>');
        }
    },
    error : function(jqXHR, textStatus, errorThrown) {
        $loader.html(jqXHR + " :: " + textStatus + " :: " + errorThrown);
    }

});
return false;

});

HTML:

<form action="" id="faq-filter-form" method="post">

<h3>Heading 1</h3>

<input type="radio" name="faq-category-select" class="faq-category-select" value="value 1"><label>Value 1</label>
<input type="radio" name="faq-category-select" class="faq-category-select" value="Value 2"><label>Value 2</label>

<h3>Heading 2</h3>

<input type="radio" name="faq-category-select" class="faq-category-select" value="value 3"><label>Value 3</label>
<input type="radio" name="faq-category-select" class="faq-category-select" value="value 4"><label>value 4</label>

</form>

functions.php

 add_action ( 'wp_ajax_load_faqs_by_category', 'load_faqs_by_category' );
add_action ( 'wp_ajax_nopriv_load_faqs_by_category', 'load_faqs_by_category' );

function load_faqs_by_category() {

  $faq_category = (isset($_POST['faq_category'])) ? $_POST['faq_category'] : '';

  header("Content-Type: text/html");

    $output = '';
    $output .= 'you selected the'.$faq_category.'category';

  die($output);

}

wp_register_script( 'faq-ajax', get_template_directory_uri() . '/js/faq-ajax.js', '','',true );
wp_localize_script( 'faq-ajax', 'ajax_params', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );
wp_enqueue_script( 'faq-ajax' );
6
  • What do you get if you console.log($data) in your success callback?
    – mikerojas
    Commented Mar 29, 2020 at 22:13
  • I see you're using the legacy admin AJAX, it's quite difficult to debug when things go wrong, is there a reason you chose this API instead of the modern REST API? A REST API endpoint would have responded with an error message that would state the problem in plain english. Also, is some of your AJAX handler missing? If all it does is print out a parameter from POST then you don't need AJAX to do that
    – Tom J Nowell
    Commented Mar 29, 2020 at 22:37
  • @mikerojas I just get '0' Commented Mar 29, 2020 at 22:37
  • @TomJNowell Yes some of the handler is missing / incomplete. This is just to test that the function is being called so far which it is not. Just to add, the reason I am using this method is just because I have done it this way before. I will look into the other method you mentioned at a later stage. Commented Mar 29, 2020 at 22:39
  • The other method works 95% of the same, but has easier debugging, and also does a lot of the handling of things for you. If this were my problem I would find it easier to convert it than to fix it. Otherwise I suspect the problem is in your javascript. I'm also unsure why die() is used here or why the header call is necessary
    – Tom J Nowell
    Commented Mar 29, 2020 at 22:44

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.