Jquery Integration of AJAX Calendar

[blisken]

HI Shawn or Chris

Great work on the jquery section!

I just want to ask if you got this to work with the updating of the calendar! It works and displays the calendar but i cant book dates! ( calendar losses its clicking functionality when i convert it to jquery!)

how does it work with the booking side of things?

Did i miss a step or does this not work? ( im referring to the admin section )

Thanks so much, look forward to your reply!

[chris]

Hi,
The jQuery code that I provided is only for the front-end version of the calendar which, by default, does not have any click capabilities.

Chris

[blisken]

Hi Chris

Thanks for the reply!

I am no guru in jquery but i know enough to do most of the changes!
I have already made the calendar click-able and updates the db and so on.

Im just busy fighting the animation and changes to classes when a state is changed.

The minute im done with that, ill upload a updateded version of the file here.

Once again, im no pro in it only in php, but i will have a working version on the admin section up here later today! Then maybe you can just tweet things iv missed.

Thanks, nice to contribute to your script that will be helping me in the future!

[Rokain]

Hi Blisken,

I have the same problem as you mentioned, could you please tell me what changes you made too make the "Admin Calendar" click-able again?

Thanks in advance.

[chris]

Hi,
I don't know what Blisken's code is like but here is my jQuery version of the admin js file:

Code: Select all

$(document).ready(function() {
   var totMonths=$('.load_cal').length;
   if ( totMonths>0 ){
      $('.load_cal').each(function(index){
         var el=$(this);
         var data=el.attr('id').split('_');
         load_calendar(el,data[0],data[1],index,totMonths);
      });
      //   once drawn, make calendars clickable
      activate_dates();
   }
   $('.cal_nav').css('cursor', 'pointer');
});
//   load calendar for month and year
function load_calendar(el,month,year,counter,totMonths){
   $(el).html('<img class="img_loading_month" src="'+img_loading_month+'">');
   $.ajax({
      url: url_ajax_cal,
      global   : true,
      type      : 'GET',
      cache      : false,
      data      : ({'id_item':id_item,'month':month,'year':year,'lang':lang}),
      dataType   : 'html',
      async      : true,
      success    : function(data){
         $(el).html(data);
         return false;
      },
      complete   : function(){
         if(counter==(totMonths-1)){
            calendar_nav();
         }
      }
   });
}

//   calendar navigation buttons
function calendar_nav(){
   // show buttons
   $('.cal_nav').show();
   
   // BACK button
   $('.cal_prev').unbind('click').click(function (event) {
      //prev_button();     
      event.stopPropagation();
      event.preventDefault();
      
      // hide nav buttons
      $('.cal_nav').hide();
      
      // get months to move
      var months_to_show=parseFloat($(this).parent().parent().attr('rel'));
      
      // loop through each month
      $(this).parent().parent().children('.the_months').children('.load_cal').each(function(index){
         
         // get first child element which now contains the "real" month and year
         var el=$(this).children(":first");
         var data=$(this).children(":first").attr('id').split('_');
          
         //   convert to numeric
         cur_month   = parseFloat(data[0]);
         new_year   = parseFloat(data[1]);
                
         // define new month and year
         new_month=(cur_month-months_to_show);
         if(new_month<1){
            //   reset month and add 1 year
            new_month=(new_month+12);
            new_year=(new_year-1);
         }
         load_calendar($(this),new_month,new_year,index,months_to_show);
      });
      return false;
   });
   
   // NEXT button
   $('.cal_next').unbind('click').click(function (event) {
      event.stopPropagation();
      event.preventDefault();
      
      // hide nav buttons
      $('.cal_nav').hide();
      
      // get months to move
      var months_to_show=parseFloat($(this).parent().parent().attr('rel'));
      
      // loop through each month
      $(this).parent().parent().children('.the_months').children('.load_cal').each(function(index){
         // get first child element which now contains the "real" month and year
         var data=$(this).children(":first").attr('id').split('_');
             //   convert to numeric
         cur_month   = parseFloat(data[0]);
         new_year   = parseFloat(data[1]);
           // define new month and year   
         new_month=(cur_month+months_to_show);
         if(new_month>12){
            //   reset month and add 1 year
            new_month=(new_month-12);
            new_year=(new_year+1);
         }
         load_calendar($(this),new_month,new_year,index,months_to_show);
      });
      //$('.cal_next').show();
      return false;
   });
   
   //   once drawn, make calendars clickable
   activate_dates();
}

//   make the dates clickable
function activate_dates(){
   //   define clickable (dates)
   var clickables=$('li.clickable').css('cursor', 'pointer');
   
   clickables.mouseover(function() {
       $(this).css({ 'opacity' : 0.7 });
   }).mouseout(function(){
      $(this).css({ 'opacity' : 1.0 });
   });

   
   clickables.unbind('click').click(function (event) {
      var elID=$(this).attr('id');
      var id_pre_state="";
      //   check for default new state if defined
      if($('#id_predefined_state')){
         id_pre_state=$('#id_predefined_state').val();
      }
      $.ajax({
          type: "GET",
         url: ""+url_ajax_update+"",
           data: {
              'id_item':id_item,
              'the_date':elID,
              'lang':lang,
              'id_state':id_pre_state
           },
            context: $(this),
           beforeSend:function(){
              // clean date of all classes
              $(this).removeClass();
              // show loading
              $(this).html('<img src="/calendar/ac-contents/themes/default/images/ajax-loader-day.gif">')
           },
           success: function(response){
            //   split response to get class,date and desc
            tmp=response.split('|');
            //   add returned class
            $(this).addClass(tmp[0]);         
            //   change title to reflect new state
            $(this).attr('title',''+tmp[1]+' - '+tmp[2]+'');
           },
           complete:function(){
              // put day number back
              $(this).html($(this).attr('rel'));
           }
      });
      
   });
}

Feel free to use the whole lot or extract from that what you need

Chris

[kuczora]

Hi Chris,

Just wanted to confirm that this Jquery admin code still doesn't completely remove the dependence on mootools.

For example - the drag-to-sort functionality on the other admin screens?

Can you provide any idea of what would be involved in getting a "pure" Jquery version of the code?

I'm happy to do some hacking about, but any pointers from you would be gratefully received.