0

I can't find words to explain without code, so here's what I got so far:

View: (bootstrap switch)

[...]
    @foreach (var item in Model)
                {
                    <tr>
                        <td>
                            <input class="my-checkbox" type="checkbox" name="my-checkbox" id="@(item.Id)" data-handle-width="100" data-on-text="Activer" data-off-text="Désactiver" data-size="small" data-on-color="success">
                        </td>
                    </tr>
                }
[...]
    <script type="text/javascript">
        var isEnableUrl = '@Url.Action("IsEnabledMaterial", "MaterialType")';
        $("[name='my-checkbox']").bootstrapSwitch();
    </script>

Javascript:

$(document).ready(function () {
    $('.my-checkbox').each(function (index) {
        $.ajax({
            type: 'POST',
            url: isEnableUrl,
            data: { 'id': index },
            success: function (result) {
                $('.my-checkbox').prop('checked', result);
            },
            error: function (e) {
                swal("Error", "Can't modify that element. ", "error");
            }
        });
    });
});

Then my controller:

[HttpPost]
public virtual bool IsEnabledMaterial(int id)
{
     var materialType = materialTypeRepository.GetById(id);
     return materialType.Enable;
}

So basically, what I'm trying to do, is on the load of the page, when all my "switch" are created, I want to go look in my database, to see which switch must be true or false and set them to the right value...

But when I'm trying to do that I get a NullReferenceException when the id = 0. Which is normal, I guess, 'cause in my database, the id's are 1, 2, 3 and 4. But if I increment by one the id, I get the same error when the id = 4. In every case, none of them get switch to true (they are all true in the DB). It will only work (for ids 1-2-3) if I do it manually (without .each), id: 0-4 are still failing to do what I want.

May it be with the foreach? 'Cause I tried passing the id "@(item.Id + 1)" and still got a 0 once...

Thanks very much for help!

anthomaxcool
  • 339
  • 2
  • 19
  • If you do it this way you will have a performance issue. You have multiple ajax calls inside foreach. Instead of doing it this way, you can construct a dictionary type object inside the foreach loop and then post it once to your controller and get true/false for each id. – Kosala W Nov 12 '15 at 04:47

1 Answers1

1

I see at least three problems:

  1. Your id to the input start with a number. Technically, the id should not start with a number. Try to change it to

<input class="my-checkbox" type="checkbox" name="my-checkbox" id="@("chkBox" + item.Id)" data-handle-width="100" data-on-text="Activer" data-off-text="Désactiver" data-size="small" data-on-color="success">

  1. Your main issue should be

$('.my-checkbox').prop('checked', result);

This will change all the input with class="my-checkbox" to the last result from the ajax call. You might want to change it to

$('#chkBox' + index).prop('checked', result);
  1. You will have performance issues as there are way too many ajax calls in this implementation
Bill Cheng
  • 926
  • 7
  • 9
  • You're right it makes much more sense! I'm still getting an error in the EfEntityRepositery class on the GetById, which I won't get if I do it manually... You may have a better solution for what I'm trying to do without using too many ajax calls? – anthomaxcool Nov 12 '15 at 12:54
  • Actually I'm thinking I could just call a function which will return a list of "activated" elements and than in success method just check them – anthomaxcool Nov 12 '15 at 13:36
  • You may return a JSON array of the id to indicate the checked state and use javascript array.forEach(function(id){ $("#chkBox" + id).prop("checked", true) }) – Bill Cheng Nov 12 '15 at 13:55
  • Ya that worked perfectly! Tanks for giving me that hint haha – anthomaxcool Nov 12 '15 at 14:06