async Javascript functions not running-CodePudding

I have 2 async functions in Javascript. One calls a MVC controller to load a table of "placements", the other deletes an individual placement. The idea is a button is clicked to load the placements in to a modal popup, then each row has a delete button that delete an individual placement, then the same editPlacementHeader function is called after the delete function to re-open the modal and show the table again.

The problem is when I click the button to show the placements, in the console I get the following error -

Uncaught SyntaxError: await is only valid in async functions, async generators and modules

As far as I can tell, the function is async.

If I remove all async and awaits from the JS code, the modal loads, a day is deleted but the modal isnt closed and re-opened, unless i put a breakpoint on the C# code that loads the data to "pause" then it would work.

JS Code -

async function editPlacementHeader(id) {
    let e = $.Event();

    e.preventDefault();

     $("#EditPlacementHeaderPopup").modal("hide");
     $("#EditPlacementPopup").modal("hide");

      await $.ajax({
          url: '/WeeklyPlacement/EditPlacementHeader?bookingId='   id,
          type: 'POST',
          dataType: 'html',
           contentType: "application/json; charset=utf-8",
           success: function(response) {
                $("#dvEditPlacementHeaderPartial").html(response);
                $("#EditPlacementHeaderPopup").modal("show");
             }
         });
};

async function deleteDay(id, bookingId) {
    let e = $.Event();

    e.preventDefault();

    $.ajax({
        url: '/WeeklyPlacement/DeletePlacementDay?id='   id,
        type: 'POST',
        dataType: 'html',
        contentType: "application/json; charset=utf-8",
        success: function(response) {
            $("#EditPlacementHeaderPopup").modal("hide");
            $("#EditPlacementPopup").modal("hide");

            toastNotifySuccess("Day deleted successfully", 1000);

            await editPlacementHeader(bookingId);
        }
    });
};

HTML to open the placement -

@mon.Name

CodePudding user response：

You have an anonymous function in your success callback that isn't async, but using await inside of it. Either remove the "await" before calling editPlacementHeader or make your success callback async, and it should work.