AJAX Event Handlers - beforeSend, fail and done

Question

I am trying to attach an "on begin" handler to an AJAX call but I am getting

TypeError: request.beforeSend is not a function

As far as what I read on the JQuery docs site, the following should work, but alas, something is amuck. Thanks for looking

(Using JQuery 1.10.2)

  //Init the AJAX request and send
            var request = $.ajax({
                type: "POST",
                traditional: true,
                dataType: "html",
                url: "/NewClubOpeningTool/DeleteSelectedEmails/",
                data: { delete : checkedValues,clubId:"@Model.NewClub_Id" },
                cache: true
            });

            request.beforeSend(function() {

                $("#loading-area").show();

            });


            request.done(function (payload) {

            $("#loading-area").hide();
                //Do stuff ...

            });


            request.fail(function (jqXHR, textStatus) {

                 $("#loading-area").hide();
                //Do stuff...
            });

Answer 1

Try

var request = $.ajax({
                type: "POST",
                traditional: true,
                dataType: "html",
                url: "/NewClubOpeningTool/DeleteSelectedEmails/",
                data: { delete : checkedValues,clubId:"@Model.NewClub_Id" },
                cache: true,
                beforeSend : function() {
                              $("#loading-area").show()
                             }
                });