Question

I’m developing an online application of tennis club management… (MVC 3, Entity Framework Code first,…)

I’ve an Interface that allows the user to consult the available tennis court :

In my “AvailableCourtController”, I’ve a function which return the tennis courts :

 [HttpPost]
 public JsonResult GetTennisCourt(DateTime date)
    {
        var reservations = db.Reservations.Include(c => c.Customer);

        foreach (var reservation in reservations)
        {

            //Verify that a court is available or not
            if (reservation.Date ==date)
            {
                if (date.Hour > reservation.FinishTime.Hour || date.Hour < reservation.StartTime.Hour)
                {
                    var id = reservation.TennisCourtID;

                    TennisCourt tennisCourt = (TennisCourt) db.TennisCourts.Where(t => t.ID == id);
                    tennisCourt.Available = true;
                    db.Entry(tennisCourt).State = EntityState.Modified;
                    db.SaveChanges();
                }
                else
                {
                    var id = reservation.TennisCourtID;
                    TennisCourt tennisCourt = (TennisCourt) db.TennisCourts.Where(s => s.ID == id);
                    tennisCourt.Available = false;
                    db.Entry(tennisCourt).State = EntityState.Modified;
                    db.SaveChanges();
                    break;
                }
            }
        }

        var courts = from c in db.TennisCourts
                     select c;
        courts = courts.OrderBy(c => c.ID);

        return Json(courts, JsonRequestBehavior.AllowGet );
    } 

So, I would like to change the color of my label if the tennis court is busy or free… For that I use “Ajax”:

“View” (What I’ve tried to make)

<input id="datePicker" type= "text" onchange="loadCourts"/>
<script type="text/javascript">
$('#datePicker').datetimepicker();
</script>           

<script type="text/javascript">
function loadCourts() {
var myDate = $('#datePicker').value();

$.ajax({
    url: ("/AvailableCourt/GetTennisCourt?date=myDate "),
    success: function (data) {
        alert('test');
        //change label's color                                    
    }
});
}
</script>

I never get the message “test”… So I have make something wrong with my Ajax function or my controller’s method… My goal is to get the tennis court, check if they’re free or not and change color in red if busy, and in green if free…

Can you help me to find what I’m doing wrong please? Sorry 🙁 But I’m a beginner with Ajax…

Answer 1

Your datetimepicker() call has to occur inside of a document.ready. Here is the corrected code:

<input id="datePicker" type= "text"/>

<script type="text/javascript">
    $(document).ready(function () {
        $('#datePicker').datetimepicker();
        $('#datePicker').change(loadCourts);
    });

    function loadCourts() {
        var myDate = $('#datePicker').val();

        $.post({
            data: "{ 'date' : " + myDate + " }",
            url: (@Url.Action("AvailableCourt", "GetTennisCourt"),
            success: function (data) {
                alert('test');
                //change label's color                                    
            }
        });
    }
</script>

}