Highlighting MySql dates on jQuery Datepicker

Question

I am using jQuery Datepicker and i am trying to highlights dates coming from mysql through ajax. This is my code.

 var appendDate = '';    
 var days_custom = '';
 $( "#datepicker").datepicker({ 
        dateFormat: 'yy-mm-dd',
        beforeShowDay: function(date) {        
            $.ajax({
                type: "GET",           
                url: URL,
                success: function(data)
                {                 
                    var data1 = jQuery.parseJSON(data);
                    days_custom = '[';      
                    for(i=0;i<data1.length;i++)
                    {                           
                        days_custom = days_custom + '"'+data1[i].mddate+'",';
                    }
                    days_custom.slice(0,-1)+']';

                    appendDate = days_custom;

                }
            });

            var m = date.getMonth(), d = date.getDate(), y = date.getFullYear();               
            for (i = 0; i < appendDate.length; i++) {      

                if($.inArray(y + '-' + (m+1) + '-' + d,appendDate) != -1) {                        
                    return [true, 'free-day', 'no to-do items due'];
                }
            }
            return [true];
        }
    });

    $('.free-day').find('a').css("color","yellow");
    $('.free-day').find('a').css("background","rgba(0, 0, 0, 0.74)");
});

Now from ajax success i am returning dates in this format which is JSON

[{"status":"3","mddate":"2016-06-07"},{"status":"3","mddate":"2016-06-14"},{"status":"3","mddate":"2016-06-09"},{"status":"3","mddate":"2016-06-10"}]

And the appendDate format should be like this

["2016-8-21","2016-8-24","2016-8-27","2016-8-28"];

I am not able to highlight dates on datepicker coming from mysql. how to resolve this

$.ajax is asynchronous. See http://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call — charlietfl, Aug 02 '16 at 13:11

Dekel · Accepted Answer · 2016-08-02T13:25:00.310

Your problem is that the success function will run once the data is returned from the request to the server (asynchronously), so the for loop that you have over appendDate will do nothing (since the variable is still an empty string when that code is executed).

You can set async:false in the $.ajax request, to make sure the request is done synchronously. This way the execution of the javascript code will wait for the request to return and only then will run the for loop that you have there.

However - I really think your code should not work like this.

Currently, for every day that the datepicker is rendering, you send a new request to your server. That means ~30 requests to the server for each month you want the datepicker to display.

Instead - once the page is loaded - send the request to the server, and only once the request is done - create the datepicker.

One more change I really think you should do - keep the Array. I really don't understand why you convert the returned data from your request to string.

Here is a schematic solution. I'm not sure what exactly the response from your server looks like, so you might wanna change some things there:

var days_custom = [];
$.ajax({
    type: "GET",           
    url: URL,
    dataType: 'json',
    success: function(data) {                 
        for (var t in data) {
            days_custom[days_custom.length] = data[t].mddate
        }
        $( "#datepicker").datepicker({
            dateFormat: 'yy-mm-dd',
            beforeShowDay: function(date) {       
                t_date = $.datepicker.formatDate('yyyy-m-dd', date);
                if (days_custom.indexOf(t_date) > -1) {
                    return [true, 'free-day', 'no to-do items due'];
                }
                return [true];
            }
        });
    }
});

Thank you for explaining the ajax and datepicker flow. Yes you are right, i was giving ~30 requests to the server.. In my code i was putting ajax inside datepicker, so the requests were dependent on the number of days in a month for beforeShowDay.. thanks for your time. cheers — Matarishvan, Aug 03 '16 at 06:31

Highlighting MySql dates on jQuery Datepicker

1 Answers1