Sending an ajax request on clicking a date

Help with installation and general calendar setttings

Sending an ajax request on clicking a date

Postby Chris_J » Mon May 20, 2013 3:53 pm

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
 
Posts: 5
Joined: Thu Oct 13, 2011 11:35 pm

Re: Sending an ajax request on clicking a date

Postby Chris_J » Tue May 21, 2013 1:13 pm

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
Chris_J
 
Posts: 5
Joined: Thu Oct 13, 2011 11:35 pm


Return to Support

Who is online

Users browsing this forum: No registered users and 5 guests

cron