Retrieving Variable Values with AJAX

I want to create a feature on a specific section of my custom template’s category page that allows users to sort the displayed cards in any order they prefer.

To achieve this, I’ve started by placing the following simple HTML code on the category.php page:

   <select id="bodyBTN_select_sort">
     <option id="Newest_mode_sort" value="selectNewest">Newest</option>
     <option id="Oldest_mode_sort" value="selectOldest">Oldest</option>
     <option id="MostViewed_mode_sort" value="selectMostViewed">Most Viewed</option>
     <option id="LeastViewed_mode_sort" value="selectLeastViewed">Least Viewed</option>
     <option id="Random_mode_sort" value="selectRandom">Random!</option>
   </select>

Now, I want the following paths to load on the page whenever a user selects one of the options:

<?php get_template_part('templates/archive-category-tag/sort-by_card/newest_theme'); ?>;

<?php get_template_part('templates/archive-category-tag/sort-by_card/oldest_theme'); ?>;

<?php get_template_part('templates/archive-category-tag/sort-by_card/most-viewed_theme'); ?>;

<?php get_template_part('templates/archive-category-tag/sort-by_card/least-viewed_theme'); ?>;

<?php get_template_part('templates/archive-category-tag/sort-by_card/random_theme'); ?>;

The only thing left to do is to use jQuery to get the user’s selected options and insert the corresponding path into the page.
Since my paths are in PHP and follow WordPress functions, I can’t directly insert them into the page using JavaScript. Therefore, I need to send the selected items to the server and a specific file for processing using AJAX.

For this purpose, I wrote the following jQuery code in a separate file:

$(document).ready(function() {
  let value_result = "selectNewest"; // The default value

  // Function to send data to PHP file
  function sendDataToPHP(value) {
    console.log('Request sent : ' + value);
      $.ajax({
          url: '/site/wp-content/themes/theme-pro/templates/functions/template/category_functions.php',
          type: 'POST',
          data: { sort_by: value },
          success: function(response) {
            // Check the content of the answer
            console.log('Server response :', response);

            // Replace element content with response
            $('#card_path_category').html(response);

             // Check for errors
            // if ($('#HNSC_card_path_category').html() === '') {
            //     console.error('The content of the element was not updated.');
            // }
          }
      });
  }

  // Change event function
  $('#bodyBTN_select_sort').change(function() {
      value_result = $(this).val();
      sendDataToPHP(value_result);
      console.log('Selected value :' + value_result);
  });

  // Send initial data
  sendDataToPHP(value_result);

  // Set the default option
  $('#Newest_mode_sort').prop('selected', true);
});

Now, I need to create a file named category_functions.php in the specified path (this file is essentially the separated codes from the functions.php file); and then receive the value sent from AJAX and insert the appropriate path into the page based on the user’s selection.

For this purpose, I placed the following code inside the category_functions.php file:

  function get_template_part_by_sort() {

    // Get the value sent via AJAX
      $sort_by = isset($_POST['sort_by']) ? $_POST['sort_by'] : 'selectNewest';
    
     // Check and display the received value for debugging
      var_dump($sort_by);
    
    
         // Check the value and determine the address
         switch ($sort_by) {
          case 'selectNewest':
              get_template_part('templates/archive-category-tag/sort-by_card/newest_theme');
              break;
          case 'selectOldest':
              get_template_part('templates/archive-category-tag/sort-by_card/oldest_theme');
              break;
          case 'selectMostViewed':
              get_template_part('templates/archive-category-tag/sort-by_card/most-viewed_theme');
              break;
          case 'selectLeastViewed':
              get_template_part('templates/archive-category-tag/sort-by_card/least-viewed_theme');
              break;
          case 'selectRandom':
              get_template_part('templates/archive-category-tag/sort_by_card/random_theme');
              break;
          default:
              // If the value passed is invalid, the default path is inserted.
              get_template_part('templates/archive-category-tag/sort-by_card/newest_theme');
      }
    }

After completing all the above steps, it’s time to get the output.

In the output, I can successfully receive the default value and the path that should be received in case of missing or problematic input, and the cards are sorted accordingly.

However, when I select other options, I still receive the same default path!

To find the error, I first printed the output values of the script file in the browser console as follows:

When selecting the Random! option:

Selected value :selectRandom
Request sent : selectRandom
Server response : <empty string>

By displaying the above output, I realized that the PHP processing file is not sending anything!

To do this, I used var_dump($sort_by); to get an output from my PHP codes and it printed the following text on the page for me:

string(12) "selectNewest"

The above value is the default value and remains constant when changing the select box and does not react to the output at all!?

I don’t have much control over AJAX and this is the first time I’ve written such an AJAX code.

My main goal is just to put the specified paths on the page based on the user’s selection and I couldn’t think of any other solution except AJAX.

Please help me complete the code and get the correct response from the server if my solution to this problem is correct.
And if my solution is not good, please guide me on what I should do to achieve my goal.

Thank you in advance for any help.