How to call ajax function for each checkbox based on the checkbox state?

Question

Here is my jquery function below. If I check both check boxes, uncheck both, or check one and uncheck the other, it only enters in the method of the last checkbox that was edited. i.e. remove/add

Jquery

$('.delete-numbers').click(function () {
        $('.number-chkbox').each(function () {   
            if (this.checked) {
                $(this).attr('checked', true);
                alert($(this).val() + " " + this.checked + "I GOT INNNN ADDDDD");
                $.ajax({
                    url: '/PhoneBook/AddNumber',
                    data: {
                        Number: $(this).val(),
                        Name: name,
                        PhoneId: PhoneId
                    },
                    type: "POST",
                    dataType: "html",
                    cache: false
                });
            } else {
                $(this).removeAttr('checked');
                alert($(this).val() + " " + this.checked + "I GOT INNNN REMOVE");
                $.ajax({
                    url: '/PhoneBook/AddNumber',
                    data: {
                        Number: $(this).val(),
                        Name: name,
                        PhoneId: PhoneId
                    },
                    type: "POST",
                    dataType: "html",
                    cache: false
                });
            }
        })
        location.reload();
    });

Html

<div class="modal-body form-group">
                @foreach (var item in Model.PhoneBook.OrderBy(a => a.Number))
                {
                    if (Model.AvailableNumbers.Any())
                    {
                        if (Model.AvailableNumbers.Where(a => a.Number== item.Number).Count() != 0)
                        {
                            <input class="number-chkbox number" type="checkbox" checked="checked" name="@item.Number_Description" value="@item.Number">
                        }
                        else
                        {
                            <input class="number-chkbox number" type="checkbox" name="@item.Number_Description" value="@item.Number">
                        }
                        <label class="non-bold">@String.Format(" {0} - {1}", @item.Number, @item.Number_Description)</label>
                        <br />
                    }
                    else
                    {
                        <input class="number-chkbox number" type="checkbox" name="@item.Number_Description" value="@item.Number">
                        <label class="non-bold">@String.Format(" {0} - {1}", @item.Number, @item.Number_Description)</label>
                        <br />
                    }
                }
            </div>
<div class="modal-footer">
                    <button type="submit" class="btn btn-danger delete-numbers" data-dismiss="modal">Yes</button>
                    <button type="button" class="btn btn-default cancel-number">No</button>
                </div>

You're calling the same AJAX URL in both the `if` and `else` branches. Shouldn't else go to something like `/PhoneBook/DeleteNumber`? — Barmar, Jul 07 '16 at 20:21
You're not waiting for the AJAX calls to complete before you do `location.reload()`. — Barmar, Jul 07 '16 at 20:23
What is the purpose of the location.reload() ? Do you understand ajax calls are asynchronous? — Anthony Sherratt, Jul 07 '16 at 21:52
@AnthonySherratt I need to do a reload after because whatever is checked that data is being populated on a table below as new columns — cxwilson, Jul 08 '16 at 17:21

score 0 · Answer 1 · answered Jul 07 '16 at 22:19

You are reloading the page not waiting for all the actions in your for..each block to complete. As you have ajax calls which are async, you need to use a jquery promise so that it will trigger once right after all actions in the block are finished. Here is the modified version of your javascript.

$('.delete-numbers').click(function() {
  $('.number-chkbox').each(function() {
    if (this.checked) {
      $(this).attr('checked', true);
      alert($(this).val() + " " + this.checked + "I GOT INNNN ADDDDD");
      $.ajax({
        url: '/PhoneBook/AddNumber',
        data: {
          Number: $(this).val(),
          Name: name,
          PhoneId: PhoneId
        },
        type: "POST",
        dataType: "html",
        cache: false
      });
    } else {
      $(this).removeAttr('checked');
      alert($(this).val() + " " + this.checked + "I GOT INNNN REMOVE");
      $.ajax({
        url: '/PhoneBook/AddNumber',
        data: {
          Number: $(this).val(),
          Name: name,
          PhoneId: PhoneId
        },
        type: "POST",
        dataType: "html",
        cache: false
      });
    }
  }).promise().done(function() {
    location.reload();
  });
});

Depending on your scenario, you may be able to do a similar thing with [ajaxStart and ajaxStop and/or $.active](http://stackoverflow.com/questions/1822913/how-do-i-know-if-jquery-has-an-ajax-request-pending) — jmbmage, Jul 18 '16 at 13:50

score 0 · Accepted Answer · answered Jul 18 '16 at 13:45

0

I have tested your code here: example
You can display only one alert box at time. You should gather all messages.
No need to use:

.promise().done(function() {
   location.reload();
});

Look at console in example, all POSTs are sent correctly. Code is running for all chekcboxs but you thought different because you could see only one message in alert. Isn't it?

answered Jul 18 '16 at 13:45

Arek Kostrzeba

551
1
7
21

It isnt proper way to send data to server. I would recomand you serialazie and jsonify form data [example](http://jsfiddle.net/sxGtM/3/) and send it in one XHR on submit – Arek Kostrzeba Jul 20 '16 at 15:57

How to call ajax function for each checkbox based on the checkbox state?

2 Answers2