$A.enqueueAction is hit, but not executed until another event fires in page (SweetAlerts)

Question

Im trying to use SweetAlerts to confirm the deletion of a record. https://limonte.github.io/sweetalert2/

1. Im extremely green when it comes to javascript/jquery.
2. Everything works fine without the Alert. (button click -> Client Controller -> Helper -> Server Controller -> UI Updated after record deleted)

I have a button that calls a client side controller to display the alert. Then on confirmation, the helper method is called to delete the record.

deleteDoc: function(component, event, helper) {

    var docId = event.currentTarget.dataset.ctid;
    console.debug(">>> DocID: " + docId );
    swal({
        title: 'Are you sure?',
        text: "You won't be able to revert this!",
        type: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#3085d6',
        cancelButtonColor: '#d33',
        confirmButtonText: 'Yes, delete it!'
    }).then(function() {

        helper.deleteDoc(component, docId );

    });
},

Then the helper:

deleteDoc: function(component, docId ) {

    var action = component.get("c.cDeleteDocument");

    action.setParams({
        docID: docId 
    });

    action.setCallback(this, function(response) {
        var state = response.getState();
        var wasDeleted = response.getReturnValue();
        console.debug("From server Return Value: " + response.getReturnValue());

        if (wasDeleted == true) {

        }

    });
    console.debug(">>> setCallback: ");
    $A.enqueueAction(action);
},

So, I confirm that I want to delete the file, and then the page just hangs. I can see the debug statements run in helper.deleteDoc, but the record still exists, so the Client Side controller has not actually run yet.

But if I click any other button in the page, or even just resize the window, then the Client side controller runs, and the setCallback debug statements show up.

What am I missing?

---

<< Solution - Small tweak to Caspars code >>

Thank you Casper! I just needed to add the parenthesis at the end.

$A.getCallback(function() {
    if (component.isValid()) {
        helper.deleteDoc(component, docId );
    }
})();

Alternatively, I could do this in the helper.

    $A.getCallback(function() {
        $A.enqueueAction(action);
    })();

But I went ahead and used Caspars suggestion though, in case I wanted to use the Helper function within Aura's normal rendering cycle.

Answer 1

I think this is happening because you are calling the method from outside Aura's normal rendering cycle -hence it works once you force something else to render. Try putting your callback inside this:

$A.getCallback(function() {
    if (component.isValid()) {
        helper.deleteDoc(component, docId );
    }
});

Answer 2

This sorted it for me:

$A.getCallback(function() {
     $A.enqueueAction(action);
})();

Note the () on the end before the ;