How to bind javascript to checkboxes and datetimepicker inside table created in MVC5 view

Question

Basically,

I have a table created in MVC view.

Each row has a checkbox and a datetime HTML input control associated with the part order. I'd like to automatically set datetime picker to today's date if checkbox is selected. I know how to do it if my checkbox and datetime have a predefined IDs (see jquery script below), but in this case, I don't know ahead of time how many rows I will have ahead of time. I'm somewhat stuck on trying to figure an easiest way to setup unique IDs and subsequently read them from the javascript.

Here is the snippet of my code from the MVC View:

<tbody>
@foreach (var partOrder in Model.PartOrders)
 {
  <tr>
   <td>@Html.DisplayFor(m => partOrder.Part.Description, new { htmlAttributes = new { @class = "form-control" } })</td>
   <td class="text-center">@Html.EditorFor(m => partOrder.IsPartReceived, new {htmlAttributes = new { @class = "checkbox isPartReceived" } })</td>
   <td class="text-center">@Html.DisplayFor(m => partOrder.OrderedOn, new { htmlAttributes = new { @class = "form-control" } })</td>
   <td>@Html.EditorFor(m => partOrder.ReceivedOn, new { htmlAttributes = new { @class = "form-control partReceivedOn"} })</td>
 </tr>
}
</tbody>

The first @Html.EditorFor is generating the checkbox, and the second one is the datetime picker.

Here is the example of jquery that I use elsewhere on the page to do something similar:

            $("#IsBoxRequested").click(function () {
                var checkBox = $("#IsBoxRequested");
                var timeBox = $("#BoxRequestedOn");
                setTime(checkBox, timeBox);
            });


    function setTime(checkbox, timebox) {
        if (checkbox.prop('checked') == true) {
            timebox.val(getToday());
        }
        else {
            timebox.val(null);
        }
    }
    function getToday() {
        var now = new Date();
        var day = ("0" + now.getDate()).slice(-2);
        var month = ("0" + (now.getMonth() + 1)).slice(-2);
        return today = now.getFullYear() + "-" + (month) + "-" + (day);
    }

Any tips on how I can this trick on dynamically created checkbox inputs are greatly appreciated.

First, using a `foreach` loop will not work (refer [this answer](http://stackoverflow.com/questions/30094047/html-table-to-ado-net-datatable/30094943#30094943) to understand how to bind to collections). Second, do not use `id` attributes - you use class names and relative selectors to find the associated elements within the same container (your `` element) — , Mar 06 '18 at 00:08
`$('.isPartReceived').click(function() { var dateInput = $(this).closest('tr').find('.partReceivedOn') .... })` will get the associated element. — , Mar 06 '18 at 00:11
@StephenMuecke Thank you much! this makes complete sense. both foreach part and the javascript. I was definitely overthinking. Thanks a lot for your help! — D Monk, Mar 06 '18 at 00:28

score 0 · Answer 1 · answered Mar 06 '18 at 01:12

Many thanks again to @StephenMuecke I have solved my issue.

First, I switched to for loop as shown below:

            <tbody>
                @for (int i = 0; i < Model.PartOrders.Count(); i++)
                {
                    @Html.HiddenFor(m=>m.OrderedPartIDs[i])
                    <tr>
                        <td>@Html.DisplayFor(m => m.PartOrders[i].Part.Description, new { htmlAttributes = new { @class = "form-control" } })</td>
                        <td class="text-center"><label style="display:block">@Html.EditorFor(m => m.PartOrders[i].IsPartReceived, new { htmlAttributes = new { @class = "checkbox isPartReceived" } })</label></td>
                        <td class="text-center">@Html.DisplayFor(m => m.PartOrders[i].OrderedOn, new { htmlAttributes = new { @class = "form-control" } })</td>
                        <td>@Html.EditorFor(m => m.PartOrders[i].ReceivedOn, new { htmlAttributes = new { @class = "form-control partReceivedOn" } })</td>
                    </tr>
                }
            </tbody>

Second, I've updated javascript to simple:

            $(".isPartReceived").click(function () {
                var timeBox = $(this).closest('tr').find('.partReceivedOn');
                setTime($(this), timeBox);

            });

Everything works like a charm now!

How to bind javascript to checkboxes and datetimepicker inside table created in MVC5 view

1 Answers1