jQuery datepicker calendar - call to function updates database

Question

So I'm using the datepicker plugin to make an availability calendar. Here is my javascript: http://pastebin.com/H7D9PcAg

When dpSetSelected() is called it is also calling dateSelected() which triggers the AJAX call to my PHP script. I need a way to only update the database if the date is clicked on and not pre-loaded. When I pre-load the dates they are sent to the PHP page and subsequently removed.

Answer 1

Why don't you bind the AJAX call to the change function instead of dateSelected? This way when the date is pre-loaded nothing will happen but if you change the date by clicking on it, it will fire. This seems to work fine on the date pickers that I have implemented:

$("#startDate, #endDate")
    .datepicker({
        showOn: 'button',
        buttonImage: '/images/icon_calendar.png',
        duration: 0 })
    .change(function() {
        //do stuff
    });

So with your code change the following:

.bind(  'dateSelected', function(e, selectedDate, $td, state) {
    $("#info").load("test1.php?date="+encodeURIComponent(selectedDate)+"&land-id="+<? =$_GET['eid'];?>);
  });

to:

.change(function() {
    $("#info").load("test1.php?date="+$(this).val()+"&land-id="+<?=$_GET['eid'];?>);
  });

Answer 2

I talked with the author of the script and used his advice:

$(function()
    {
    var passedDates = $('#passed-dates').val().split(','); // works okay


    var dp = $('.date-pick')
        .datePicker(
            {
                createButton:false,
                closeOnSelect:false,
                selectMultiple:true,
                inline:true
            }
        );

        for (var i = 0; i < passedDates.length - 1; i++) 
        {
            dp.dpSetSelected(passedDates[i]);
        }

        dp.bind(
            'click',
            function()
            {
                $(this).dpDisplay();
                this.blur();
                return false;
            }
        )
        .bind(
            'dateSelected',
            function(e, selectedDate, $td, state)
            {
                $("#info").load("test1.php?date="+encodeURIComponent(selectedDate)+"&land-id="+<?=$_GET['eid'];?>);
            }
        );
});

This will update the selected dates before any binds are fired keeping the script from unintentionally updating.