data-loading-text not working for form

Question

                    <div class="tab-pane fade active in" id="actorDiv">
                        <form role="form" id="addActorForm" action="http://localhost:5000/SearchActor" method="post" onsubmit="loading()">
                            <div class="form-group">
                                <label for="actor">Actor Name</label>
                                <input name="actor" class="form-control"
                                       id="actor" placeholder="Enter actor name"/>
                            </div>
                            <input type="reset" class="btn btn-default">
                            <button type="submit" class="btn btn-default" data-loading-text="Sending...">Submit</button>
                        </form>
                    </div>

So, when I sumbit this form, an ajax call is made.

<script type="text/javascript">
    var frm = $('#addActorForm');
    frm.submit(function (e) {
        e.preventDefault();
        $.ajax({
            type: frm.attr('method'),
            url: frm.attr('action'),
            data: frm.serialize(),
            success: function (data) {
                console.log('Submission was successful.');
                document.getElementById("actorDiv").innerHTML += "<div class=\"alert alert-dismissible alert-success\">\n" +
                    "  <button type=\"button\" class=\"close\" data-dismiss=\"alert\">&times;</button>\n" +
                    "  <strong>Well done!</strong> You successfully read <a href=\"#\" class=\"alert-link\">this important alert message</a>.\n" +
                    "</div>";
            },
            error: function (data) {
                console.log('An error occurred.');
                // document.getElementById("actorDiv").innerHTML = "<div class=\"alert alert-dismissible alert-danger\">\n" +
                //     "  <button type=\"button\" class=\"close\" data-dismiss=\"alert\">&times;</button>\n" +
                //     "  <strong>Oh snap!</strong> <a href=\"#\" class=\"alert-link\">Change a few things up</a> and try submitting again.\n" +
                //     "</div>";
                console.log(data);
            },
        });
    });
</script>

Now, this call takes a long time to return. I want the submit button to be changed to the data-loading-text during this time. Is this how the data-loading-text works? If so, why would it not be working? The ajax call itself works and returns just fine. Just don't know why data-loading-text is not working.

Answer 1

You can use beforeSend and complete:

<script type="text/javascript">
var frm = $('#addActorForm');
frm.submit(function (e) {
    e.preventDefault();
    $.ajax({
        beforeSend: function(){
            button = $("#addActorForm button[type=submit]");
            button.html(button.attr("data-loading-text"));
        },
        complete: function(){
            $("#addActorForm button[type=submit]").html("Submit");
        },
        type: frm.attr('method'),
        url: frm.attr('action'),
        data: frm.serialize(),
        success: function (data) {
            console.log('Submission was successful.');
            document.getElementById("actorDiv").innerHTML += "<div class=\"alert alert-dismissible alert-success\">\n" +
                "  <button type=\"button\" class=\"close\" data-dismiss=\"alert\">&times;</button>\n" +
                "  <strong>Well done!</strong> You successfully read <a href=\"#\" class=\"alert-link\">this important alert message</a>.\n" +
                "</div>";
        },
        error: function (data) {
            console.log('An error occurred.');
            // document.getElementById("actorDiv").innerHTML = "<div class=\"alert alert-dismissible alert-danger\">\n" +
            //     "  <button type=\"button\" class=\"close\" data-dismiss=\"alert\">&times;</button>\n" +
            //     "  <strong>Oh snap!</strong> <a href=\"#\" class=\"alert-link\">Change a few things up</a> and try submitting again.\n" +
            //     "</div>";
            console.log(data);
        },
    });
});

Answer 2

$.ajax() has a property called beforeSend where you can define a function of some code to run at the start. You could use this function to update the text of the button to 'loading' then when the ajax call completes, you can update the button text again.

http://api.jquery.com/jquery.ajax/