401 Error with Stacked (Nested) Modal

In PHPMaker 2024, I’ve added the following code to “Client Scripts → Table Specific → Add Option Page → Client Script”

$(document).ready(function() {

        // Add the button next to the JacketID field dynamically
        $('#x_JacketID').parent().append(
            '<button type="button" class="btn btn-default ew-add-opt-btn" id="btnNestedModal" title="Add Jacket">Add Jacket</button>'
        ); 

        // Handle the button click event to open the nested modal
        $('#btnNestedModal').on('click', function() {
            ew.modalDialogShow({
                url: "<?= GetUrl('TblJacketAddopt') ?>", // URL of the page to load in nested modal
                caption: "Add Jacket" // Title for the nested modal
            });
        });

        // Manage z-index for stacked modals
        $(document).on('show.bs.modal', '.modal', function () {
            var zIndex = 1050 + (5 * $('.modal:visible').length);
            $(this).css('z-index', zIndex);
            setTimeout(function () {
                $('.modal-backdrop').not('.modal-stack').css('z-index', zIndex - 1).addClass('modal-stack');
            }, 0);
        });

        // Restore z-index of previous modal when top modal is closed
        $(document).on('hidden.bs.modal', '.modal', function () {
            if ($('.modal:visible').length > 0) {
                $(document.body).addClass('modal-open');
            }
        });
    });

I receive a POST 401 error when I try to save the new row from the resulting stacked modal. Unable to authenticate. I don’t know how to add the proper authentication to the script to allow for the stacked (nested) modal to POST

401 is “unauthorized”, make sure you set the form action correctly.

I removed the code and just added a custom button to open the add option page. The modals work fine with the custom button. The only issue is that parameters from the parent page such as foreign keys don’t work to fill in fields in the resulting modal but i can work around that for now. It would be nice if phpmaker supported nested modals. i understand that bootstrap doesn’t believe that to be efficient. Here is the code for now:

// Client script
    // Write your table-specific client script here, no need to add script tags.
    $(document).ready(function() {
            $('#x_VendorPOC').parent().append(
                '&nbsp <button type="button" class="btn btn-default ew-add-opt-btn" id="btnNestedModal" title="Add New Person to Master Name File">Add</button>'
            );

            // Handle the button click to open the nested modal with VendorID filter
            $('#btnNestedModal').on('click', function() {
                // Open the modal with the URL
                ew.modalDialogShow({
                    url: "<?= GetUrl("TblVendorContactsAddopt")?>",
                    caption: "Add",
                });
            });
        });

Since it is your custom code to add nested modal dialog, the original scripts cannot do what you expect automatically, you may pass the data in URL parameters and get them back yourself by server events such as Row_Rendered.