Sending an ajax request on clicking a date

[Chris_J]

Hi all,

I'm not sure if this has been covered before so I'll explain.

With the help of some of the posts on this forum, I was able to create a calendar that could be used to book single days.

Now I am looking to book several days at a time. In practice the user would choose their start date (by clicking the appropriate day). After this I'd like to show a dropdown menu based on the number of days they can book (according to what's available on the calendar).

This would be achieved by querying the database using ajax when the user clicks a date.

To boil it all down - is it possible to send an ajax request on clicking one of the dates and for the value of that date (e.g. 2013-05-20) to be sent in the request?

I've tried to add in various lines in the code below but to no avail.

mootools-cal-public.js

Code: Select all

//   make the dates clickable
function activate_dates(){
  var date=document.getElementById('date');
  $$('li.clickable').each(function(el){
    if(el.hasClass('available')){
      el.addEvent('click',function(){
         alert('clicked!');
           // Set the date in the date input (hidden)
          date.set('value',this.id);
         
          // Test alert (returns nothing)
          alert('Clicked!');

          //Animate the background colour and show the booking button
          $(this).animate({ backgroundColor: "#BAE39F" }, "500").animate({backgroundColor:"green" }, 500);
          $('#booking_submit').fadeOut(500).fadeIn(300);
          //Hide the unavailable button if it is showing
          $('.date-booked').hide();
      }).setStyle('cursor','pointer');
    } else if (el.hasClass('booked')){
      el.addEvent('click',function(){
        $('#booking_submit').hide();
        $('.date-booked').show();
        $('.date-booked').animate({ backgroundColor: "#ffae00 " }, "500").animate({backgroundColor:"#f00" }, 500);

      }).setStyle('cursor','pointer');
    }
  })
}

Thanks,

Chris

[Chris_J]

Hi all,

So I was working on this issue last night and (since I'm a novice with javascript and mootools) worked out a solution in jQuery. I expect it's very long-winded and someone with more knowledge could do a much better job.

I added this to the calendar index.php

Code: Select all

$(document).ready(function() {

    $('.available').click(function () {

      var id = $(this).attr('id');
     
      $.ajax({
        type:"GET",
        cache:false,
        url:"server.php",
        data: "input="+ id,
        success: function (html) {

          $('#content').html(html);
        }
      });
      return false;
    });
   
  });


It grabs the id (which is the date) and sends that in an ajax request to server.php to query the database. This works out how many consecutive days can be booked before encountering a date that is already booked. It then returns a dropdown menu with the options available (eg: 3, 4, 5, 6, 7, 14 days).

I haven't finished the whole process yet, but I thought I'd post to let people know I wasn't looking for an answer any more.

Cheers,

Chris