How can I set an entires status via ajax from a front-end form?

Question

I am trying to set an entires status to disabled from a front-end form.

Here is the click event listener I am using:

$(document).on('click', '.delete', function (event) {
    let $this = $(event.currentTarget);
    let verify = confirm("Are you sure you want to remove this?");

    if (verify) {
        let params = {
            'entryId': $this.data('id'),
            'sectionId': $this.data('section'),
            'enabled': 0
        };

        // append CSRF token.
        params[window.csrfTokenName] = window.csrfTokenValue;

        onSetEntryStatus(params, function (res) {
            console.log(res);
        });
    } else {
        console.log('do nothing');
    }

    event.preventDefault();
});

Here is my ajax method:

function onSetEntryStatus(data, callback) {
    $.ajax({
        type: 'post',
        contentType: 'application/json; charset=UTF-8',
        cache: false,
        data: data,
        url: '/actions/entries/save-entry',
        processData: false,
        dataType: 'json',
        timeout: 50000
    }).done(function (response) {
        console.log('response', response);
    }).fail(function (error) {
        // Total fail.
    });
}

(also tried posting to actions/entries/save-entry)

Request payload is coming across as: [object Object] so clearly I'm having a brain-fart moment there.

Everything I have commented out, are things that i've seen in the console when setting the status from the CP. Currently, I am getting a 403 error back. I am able to verify that I am passing in the csrf token, so I am guessing it is because of the (incorrect) way I am sending data.

Grateful for any suggestions!

EDIT

When logging out what params I'm sending to the ajax method:

enabled: 0
entryId: 1465
sectionId: 5
_token: 'really-long-string'

Answer 1

My best guess, based on what you want to do, is that you don't have the correct permissions to change the entry's status. The requirePermission method kicks in and will send a 403 if you don't have permission to enable an entry.

I think the only way to change this, is to make sure that the logged in user has the correct permission(s).

Answer 2

Thank you for all of the time spent Paul - I very much appreciate it. Instead of using ajax, I went with a more "traditional" approach. This is what my template looks like now:

<form method="post" accept-charset="UTF-8">
    {% set redirect = 'my-custom-route' %}
    {{ csrfInput() }}
    <input type="hidden" name="action" value="entries/save-entry">
    {{ redirectInput(redirect) }}
    <input type="hidden" name="sectionId" value="{{ entry.section.id }}">
    <input type="hidden" name="entryId" value="{{ entry.id }}">
    <input type="hidden" name="enabled" value="0">
    <button type="button" class="btn-danger btn-sm btn-delete">
        <i class="far fa-trash-alt"></i>
    </button>
</form>

I have some js that is listening to the .btn-delete event that will display a confirmation dialog:

$(document).on('click', '.btn-delete', function (event) {
    return confirm('Are you sure you want to remove this?');
});