jQuery.post() Seemingly being skipped for one reason or another

Question

I am trying to figure out why a call to jQuery.post() either isn't fetching the data, or the function after the fetch isn't running altogether.

I have three files included; an HTML file, a JavaScript file, and a PHP file. The HTML contains the modal element I am wanting the eventually bring up with a "delete" button is pressed.

jQuery is seeing the click and running the function for $.on("click").

However, when I try to call $.post, according to my chrome developer debugging, it does a bunch of processing and actions with .post() but doesn't bring up my alert to tell me that the data I am retrieving from my delete_prep.php is ready to be used to populate the data inside of the confirmation modal.

I am pretty new to using any kind of ajax, and since .post() is shown on many of the other stack overflow questions I looked at as the recommended alternative to using $.ajax()

I thought that the code listed below would be enough to retrieve the data and then get an alert that says "JSON object" or "associative array" or whatever is applicable. Unfortunately the alert isn't even showing up.

Applicable html snippets

<button type="button" data-title="Delete" data-opid="<?php echo $operator['operator_id']; ?>" class="icon-btn delete">Delete</button>

<div class="modal-wrapper" id="delete_operator_modal">
        <section class="modal">
            <div class="modal-bar">
                <button id="close_modal_button" class="close-button">&times;</button>
            </div>
            <div class="modal-content">
                <h2>Delete Operator?</h2>
                <p id="delete_operator_name">Default Message</p>
                <p id="delete_operator_message">If this operator is deleted, their franchises will no longer have an
                    owner, and be marked 'For
                    Sale'.</p>
                <footer class="modal-footer">
                    <button onclick="closeModal()" id="confirm_delete_button" class="primary button">Delete Operator</button>
                    <button onclick="closeModal()" id="cancel_delete_button" class="secondary button">Cancel</button>
                </footer>
            </div>
        </section>
    </div>

in document script that WILL BE REWRITTEN FOR jQUERY

var deleteButton = document.querySelector('.icon-btn.delete');
        var closeButton = document.querySelector('.close-button');
        var cancelButton = document.querySelector('#cancelButton');
        Modal = document.querySelector('.modal-wrapper');

        function openModal() {
            Modal.classList.add('open');
        }

        function closeModal() {
            Modal.classList.remove('open');
        }

Script inside the applicable js file

jQuery(function () {

    // This will show the delete modal and populate it with the information from the record the last pressed button corresponds to
    function showDeleteModal(id) {

        // This is where the code that doesn't seem to be running begins

        $.post(
            'ajax_php/delete_prep.php', // Gets information for delete confirmation
            {
                id: id                  // Data that is used to run the SQL query
            },
            function (data) {
                var operator = JSON.parse(data);    // Converts to an object so that it can be used as an associative array
                top.alert(typeof(operator));            // DEVELOPMENT checking to make sure it is an object
            }
        )
        ;

        // END NON WORKING CODE

        // Show the modal once the data is changed
        $('#delete_operator_modal').addClass('open');
    }

    $('*[data-opid]').on("click", function () {
        showDeleteModal($(this).attr("data-opid"));
    });

    $('#close_modal_button').on("click", function () {
        // call function to close the modal that corresponds to the button that was clicked
    });
});

FINALLY the delete_prep.php

<?php
require_once('obsured_path/initialize.php');

$operator = find_operator_by_id($id);
echo json_encode($operator);

Answer 1

Summary from the chat discussion.

There were two issues found. First, Tyler found that he had a .htaccess file with some rule that was causing the request to return a 403 Forbidden when trying to access it. He removed that and the 403 was resolved.

Secondly, his script was referencing a variable that was undefined. After fixing it to point to the $_POST['id'] being provided from the script, it started working as he intended.