Only one alert for multiple execution in Ajax

Question

I am working rails application.i need to get status of the each selected device.I am able to achieve this but after executing i am putting alert "Successfully created execution record".For every mac selection it is showing alert message.I need to give one alert in end of execution.I am calling display_result in call_endpoint method.Since it is an Ajax call,it is giving alert for every execution.i don't how to limit to single alert for this.

function display_result() {

$('#http_status').html("");
$('#http_status').append(result["response"].status);

if (result["response"].status == "404") {

    console.log("HTTP 404");
    $('#response_div').addClass("bs-callout-warning");
} else if (result["response"].status == "520") {
    console.log("HTTP 502");
    $('#response_div').addClass("bs-callout-danger");

} else {
    console.log("HTTP 200");

    $('#response_div').addClass("bs-callout-success");



if (result["response"].status == "200") {

    // $('.loader').show();
    $('#cover-spin').show();
    $.ajax({
        method: "GET",
        dataType: "text",
        url: "create_execution",
        data: {
            http_status: result["response"].status,
            mac_address: mac,
        },
        success: function (execution_record_id) {
            $('#cover-spin').hide();
           alert('Successfully created execution record");
        }

    });
 }
function call_endpoint() {


    var values = new Array();

    webpa = $('#Device-PA').is(":visible");
    rpil = $('#Device-SN').is(":visible");
    groupselect = $('#Group-Select').is(":visible");
    parameter_name = $('#tr_object').val();
    if (webpa) {

        $.each($("input[name='checkBox[]']:checked").closest("td").next("td"), function () {
            values.push($(this).text().trim())

        });
        m = values.length

    } else {
        $.each($("input[name='checkBox[]']:checked").closest("td").next("td"), function () {
            values.push($(this).text().trim())
        });
        m = values.length


    }

    serialnumber = $('#pa_serialnumber').val();
    oid = $('#sn_serialnumber').val();


    protocol = {
        pa: pa,
        sn: sn,
    }

    if (pa) {
        for (var i = 0; i < m; i++) {
            (function () {

                var macAdd = values[i];

                $.ajax({
                    method: "GET",
                    url: "get_object",
                    dataType: "json",
                    data: {
                        parameter: parameter_name,
                        mac: macAdd,
                        protocol: protocol,
                        serialnumber: serialnumber,
                    },

                    success: function (result) {
                        console.log(result);
                        NProgress.done();
                        console.log("result for webpa");

                        display_result();
                    },

                    statusCode: {
                        404: function () {
                            console.log("Call failed");
                        }
                    }
                });
                                  })();

        }
   }

Answer 1

Below is changed code..

Copy below code as it is.

function display_result(total,current) {

$('#http_status').html("");
$('#http_status').append(result["response"].status);

if (result["response"].status == "404") {

    console.log("HTTP 404");
    $('#response_div').addClass("bs-callout-warning");
} else if (result["response"].status == "520") {
    console.log("HTTP 502");
    $('#response_div').addClass("bs-callout-danger");

} else {
    console.log("HTTP 200");

    $('#response_div').addClass("bs-callout-success");



    if (result["response"].status == "200") {

        // $('.loader').show();
        $('#cover-spin').show();
        $.ajax({
            method: "GET",
            dataType: "text",
            url: "create_execution",
            data: {
                http_status: result["response"].status,
                mac_address: mac,
            },
            success: function (execution_record_id) {
                $('#cover-spin').hide();
                if(total == current)
                {
                    alert('Successfully created execution record");
                }
            }

        });
     }

    }

}


function call_endpoint() {


    var values = new Array();

    webpa = $('#Device-PA').is(":visible");
    rpil = $('#Device-SN').is(":visible");
    groupselect = $('#Group-Select').is(":visible");
    parameter_name = $('#tr_object').val();
    if (webpa) {

        $.each($("input[name='checkBox[]']:checked").closest("td").next("td"), function () {
            values.push($(this).text().trim())

        });
        m = values.length

    } else {
        $.each($("input[name='checkBox[]']:checked").closest("td").next("td"), function () {
            values.push($(this).text().trim())
        });
        m = values.length


    }

    serialnumber = $('#pa_serialnumber').val();
    oid = $('#sn_serialnumber').val();


    protocol = {
        pa: pa,
        sn: sn,
    }

    if (pa) {
        for (var i = 1; i <= m; i++) {
            (function () {

                var macAdd = values[i];

                $.ajax({
                        method: "GET",
                        url: "get_object",
                        dataType: "json",
                        data: {
                            parameter: parameter_name,
                            mac: macAdd,
                            protocol: protocol,
                            serialnumber: serialnumber,
                        },

                    success: function (result) {
                        console.log(result);
                        NProgress.done();
                        console.log("result for webpa");

                        display_result(m,i);
                    },

                    statusCode: {
                        404: function () {
                            console.log("Call failed");
                        }
                    }
                });
                })();

        }
   }
}

Answer 2

result and mac is not defined in display_result function. result appears intended to be the resulting value of jQuery promise object returned from $.ajax(). Am not certain what mac is indented to be.

You can substitute $.when() and $.map() for for loop, return a jQuery promise object from call_endpoint(), include error handling, chain .then() to call_endpoint() call to execute alert() once.

function call_endpoint() {
  return $.when.apply($, $.map(values, function(macAdd) {
           return $.ajax().then(display_result)
         }))
}    

callEnpoint()
.then(function() {
  alert('Successfully created execution record');
}, function(jqxhr, textStatus, errorThrown) {
  console.error(errorThrown)
});

function display_result(reuslt) {
  ..
  if (if (result["response"].status == "200")) {
    return $.ajax() // remove `alert()` from `success`
  }
  return;
}