Thursday, 8 October 2020

Resume default behavior with callback

Before the form can submit, a few checks needs to be made in Javascript. These checks will validate if all the applicable data is captured for this specific section before proceeding (if button is selected as yes and there are no claims submitted, as well as if the client submitted duplicate claims).

The part where the check is done for duplicate claims comes back with an array of data returned from an Ajax function. If there are any data for this, the form must be prevented from proceeding and a popup is shown - this is working. The part where I'm stuck is that when there is no data (count = 0), I need to trigger a button and the form must proceed (calls Post method of MVC). However, the form is not proceeding to the Post event (resume with default behavior).

This is what I've done:

    $("#btnNext").on("click", function (e) {
    isNextClick = true;
    if ($("input[name='Claims']:checked").val() === "Yes" && claimCount === 0 && !isClaimFilled()) {
        $('#btnAddClaim').trigger("click");
        return false;
    } else if ($("input[name='Claims']:checked").val() === "Yes" && isClaimFilled()) {
        $("#dialog-claim-error").modal("show");
        return false;
    } else {
        //Lets first check for duplicates
        e.preventDefault();

        var result = clientClaimDuplicationCheck(function (isContinue) {
            var claimCount = isContinue.length;

            if (claimCount === undefined || claimCount.length == 0) {
                // array empty or does not exist when callback is done. 0 will be passed to resume default behaviour
                claimCount = isContinue;
            }

            if (claimCount != undefined || claimCount != null) {
                if (claimCount > 0) {

                    $.each(isContinue, function (index, item) {
                        addClaimDuplicateList(claimIndex, item.Desc, item.Year, item.Month);
                    });
                    e.preventDefault();
                    $("#claimDuplicateList").show();
                    $("#dialog-nav-driver-duplicateClaims").modal("show");
                }
                else {
                    // Prevent infinite loop
                    $(this).unbind("click");
                    
                    //Now submit form, all validation passed - resume default behavior
                    //  $("#btnNextValidated").submit();
                    $('#btnNextValidated').trigger("click");
                }
            }
        });
    }
});

$("#btnNextValidated").on("click", function (e) {
    $('#ClaimYear').removeClass("input-validation-error");
    var span = $("div").find("[data-valmsg-for='ClaimYear']");
    span.removeClass("field-validation-error").text("");

    setTimeout(ss.isValidPage, 100);
    return true;
});

function clientClaimDuplicationCheck(callback) {
   // var isContinue;
    //post data to the server
    $.ajax({
        url: "/Service/ClientClaimDuplicationCheck",
        type: 'POST',
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (data) {
            callback(data);
        },
        error: function (a, b, c) {
            var error = a;
        }
    });
 }

     function addClaimDuplicateList(id, name, year, month) {
    $('#showClaimDuplicateList').append('<div id="claimDuplicateItem' + id + '" data-claim-key="0" class="control-label label-heading-3 label-input-claimSubTitle">' +
        '<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"><ul class="claimUl"><li>' + name + ' ' + month + '/' + year + '</li></ul></div>' +
        '</div>');
}

The method that needs to be called when resuming behavior:

    [HttpPost]
    public ActionResult DriverInformation(DriverInformationViewModel model)
    { //some methods}

Is there a way to resume default behavior and call the Post Method of the button?



from Resume default behavior with callback

No comments:

Post a Comment