Dropdown trigger change function to fetch dates to disable in datetimepicker

Question

I have a dropdown of staff names and StaffId. This is wired to an appointment business logic. I am trying to trigger a select change so that setting dates stored in database will be made unavailable in the connected jquery datetimepicker. I have assembled the code below which seems not working. Could anyone point me to the right direction. Thanks

<script type="text/javascript">
        $(document).ready(function () {
            getdates();
        });

        var unavailableDates;
        $(document).ready( function getdates() {

            $("#StaffId").change(function (e) {
                $this = $(e.target);
                    $.ajax({
                        type: "POST",
                        url: "/Appointment/GetOffdays",
                        data: { StaffId: $this.val()  },
                        //contentType: "application/json"
                        success: function (data) {
                            debugger;
                            unavailableDates = data;

                            $(".jqueryui-marker-datepicker").datepicker({
                                dateFormat: "dd/M/yy",
                                changeMonth: true,
                                changeYear: false,
                                yearRange: "-1:+0",
                                //beforeShowDay: $.datepicker.noWeekends,
                                minDate: new Date(@(ViewBag.year+","+ViewBag.month+","+ViewBag.day)),
                                maxDate: new Date(@(ViewBag.eyear+","+ViewBag.emonth+","+ViewBag.eday)),

                                beforeShowDay: function (date) {
                                    var dmy = date.getDate() + "-" + (date.getMonth() + 1) + "-" + date.getFullYear();
                                    debugger;
                                    if ($.inArray(dmy, unavailableDates) == -1) {
                                        return [true, ""];
                                    } else {
                                        return [false, "myclass", "Unavailable"];
                                    }
                                }
                                });
                            },
                             dataType: "json",
                            traditional: true,
                            })


                }

           )
            $('#StaffId').trigger('change');
        });
        </script>

score 0 · Answer 1 · answered Jun 07 '17 at 21:46

0

Perhaps because you aren't definibg a value for the dropdown first. Try this:

$('#StaffId').val('12345');
$('#StaffId').trigger('change');

Other remark: why the 2 document ready's ?

answered Jun 07 '17 at 21:46

Marnix Harderwijk

1,313
9
14

slackOverflow · Accepted Answer · 2017-06-07T22:13:51.330

To reduce the complexity of your code I stripped out the content of getdates and replaced it with a simple log(), which I will put below. If I execute this page as is, the anonymous function sent to $(document.ready() is invoked first, before the function getdates is even mentioned, causing the console to throw

jQuery.Deferred exception: getdates is not defined ReferenceError: getdates is not defined

According to this question

jQuery - multiple $(document).ready ...?

When multiple consecutive calls to $(document).ready are made, upon DOM ready each function will be called in the order they were set. Even if you reverse the order of the calls to ready, since the named function getDates is only named during the function call, it isn't callable by that name anywhere else. Edit: Also note that if the first function queued for documentready throws an exception, jquery will not invoke the next one. So if the anonymous function fails, the named one will be skipped entirely.

Bear with me as I have really not answered many questions on this site, and its possible I've gravely misunderstood your code. But I think what you're trying to do is define a function getDates and invoke it when the value of an HTML element called '#StaffId' is changed. To accomplish this, you only need one call to $(document).ready(), which either calls the function getdates, which has to be defined in its scope, or you could get rid of getdates entirely and call its contents anonymously.

<script type="text/javascript">
    $(document).ready(function () {
        getdates();
    });

    var unavailableDates;
    //this function might as well be anonymous since getdates is not available anywhere else by that name.
    //The function it refers to is passed and executed on document ready, but the alias getdates goes away.
    $(document).ready( function getdates() {

        console.log("getting dates");
    });
</script>

should be

<script type="text/javascript">
    //if unavailableDates is not used outside this function, it probably shouldn't be in the global scope.
    var unavailableDates;
    function getDates(){
        //now getDates is available everywhere, by its name
        console.log("getting dates");
    };

    //or $(document).ready(getDates);
    $(getDates);
</script>

or just

<script type="text/javascript">
        $(function (){
            //no need for named getdates polluting global namespace if you only intend to call it once.

            //do whatever you want here
    });
</script>

Dropdown trigger change function to fetch dates to disable in datetimepicker

2 Answers2