0

Before I use it DateTimePicker everything was working fine, but after adding some javascript code for datetimepicker I am getting ArgumentNullException for @Html.DropDownListFor(x => x.LeagueId, new SelectList(ViewBag.Leagues, "Id", "LeagueType"), "", new { @class = "form-control", id="liga" }), first player is added successfully but when I want to one more, my application crashes.

Input for date

<div class="form-group">
                        <label asp-for="Player.Birth" class="control-label">@DbResHtml.T("Датум на раѓање","Resources")</label>
                        <input asp-for="Player.Birth" type="text" class="form-control datepicker" required id="birth" />
                        <span asp-validation-for="Player.Birth" class="text-danger"></span>
                    </div>

After adding this lines of code my app crashes

<script>
        $(document).ready(function() {
            $.datetimepicker.setDateFormatter('moment');
            $(".datepicker").datetimepicker({
                timepicker: false,
                format: 'DD/MM/YYYY',
            });
        })
    </script>

Other scripts for Create page

<script>
        $(document).ready(function() {
            $('#select2-3').find('option').not(':selected').remove();
            var count = 0;

            $('#liga').on('change', function() {
                var selectedText = $(this).find('option:selected').text();
                var selectedVal = $(this).val();

                var leagueAjax = $.ajax({
                    type: "POST",
                    url: "@Url.Action("GetClubsForLeague", "Player")",
                    data: {
                        id: selectedVal
                    },
                    success: function(data) {
                        if (count == 0) {
                            var s = '<option value="-1"></option>';
                        }
                        count++;
                        $('#select2-3').find('option').not(':selected').remove();


                        for (var i = 0; i < data.length; i++) {
                            s += '<option value="' + data[i].id + '">' + data[i].name + '</option>';
                        }
                        $('#select2-3').append(s);

                        var mycode = {};
                        $("select[id='select2-3'] > option").each(function() {
                            if (mycode[this.text]) {
                                $(this).remove();
                            } else {
                                mycode[this.text] = this.value;
                            }
                        });
                    },
                    error: function(req, status, error) {
                        ajaxErrorHandlingAlert("error", req.status);
                    }
                })
            })
        })
    </script>
    <script>
        $(document).ready(function() {
            $('#select2-3').change(function() {
                var cc = $('#select2-3').val();
                var ids = [];
                for (let i = 0; i < cc.length; i++) {
                    ids.push(cc[i]);
                }
                $.ajax({
                    type: "POST",
                    url: "@Url.Action("GetClubsById","Player")",
                    data: { "ids": ids },
                    success: function(data) {
                        console.log(data);
                        $('#clubsTBody tr').remove();
                        var counter = 1;
                        for (let i = 0; i < data.length; i++) {
                            $("#clubsTBody").append("<tr><td>" + counter + "</td>"
                                + "<td>" + data[i].name + "</td>"
                                + "<td>" + data[i].league.leagueType + "</td>"
                                + "<td>" + '<button  class="mb-1 btn bg-danger fas fa-trash-alt deleteBtn"  title=@DbResHtml.T("Delete", "Resources")></button>' + "</td>"
                                + "</tr >");
                            counter++;
                        }
                    },
                    error: function(req, status, error) {
                        console.log(msg);
                    }
                });
            })
            $('#clubs').on('click', '.deleteBtn', function() {
                $(this).parents('tr').remove();
                var value = $(this).closest('tr').children('td:eq(1)').text();
                $(`#select2-3 option:selected:contains("${value}")`).prop("selected", false).parent().trigger("change");
            });
        })
    </script>

I am debugging for 3 days, but still nothing.

norman
  • 9
  • 5
  • Are you using any plugins for date-time functionality other than jQuery? – Khalil Jul 05 '22 at 11:04
  • @Khalil nothing only `Moment.js` and `jQuery-datetimepicker` – norman Jul 05 '22 at 11:10
  • Given that your error appears to be server-side, what happens if you remove the "newly added datetimepicker" code? – freedomn-m Jul 05 '22 at 11:11
  • @freedomn-m everything works fine :) – norman Jul 05 '22 at 11:12
  • Looks like your new date format is not passing to the back-end as a date, so it's giving null. You should be able to debug via browser network tab to determine *exactly* what's been sent (with/without the date code) and debug the server-side to see exactly what's being received in both cases. The code you've provided doesn't seem to pass any date inputs (just and id and a select/option). – freedomn-m Jul 05 '22 at 11:16
  • @freedomn-m yes but when I am using `HTML5` date everything is okay, but crash with `datetimepicker` – norman Jul 05 '22 at 11:19
  • As you stated - so what's the difference in the network transfer? – freedomn-m Jul 05 '22 at 11:21
  • @freedomn-m on `POST` getting status `500` when I am using `datetimepicker` but when using `html5` everything is fine with post and get – norman Jul 05 '22 at 11:30
  • Have you pressed F12 in your browser, located the network tab and examined the request details/payload with/without the datepicker? The model binder is not able to bind your date type on the action as it's not in the expected format. – freedomn-m Jul 05 '22 at 11:32
  • 1
    @freedomn-m When using `datetimepicker` I am getting `22/07/2022` for `Player.Birth`, but when using `html5` getting `2022-07-22` – norman Jul 05 '22 at 11:49
  • Good. So you need to either get the version with the datetimepicker to send as 2002-07-22 *or* you need to change your model binder to accept dd/mm/yyyy as a date *or* you need to change your Action parameter from a date to a string then parse the date server-side. – freedomn-m Jul 05 '22 at 12:21
  • @freedomn-m how to send it as yyyy-mm-dd using `datetimepicker` ? – norman Jul 06 '22 at 10:22

0 Answers0