Member Avatar for rexmatthew

Can anyone help me? I'm trying to gat my reservation calendar working with jquery tabs. Everything else works exept for this reservation calendar.
When I remove the javascript from the header, the calendar works just fine but the tabs disappears... Can anyone please help...?

<div class="reservationbox">

                    <div class="reservation_calendar" id="reservation_calendars"></div>

                    <div class="clr clear"></div>

                    <div class="cal_buttons">

                        <img class="mousepointer" onclick="javascript:setPreviousCalDate();" src="<?php echo $this->krbaseurl; ?>/components/com_koparent/assets/images/calendar/cal_previous.png" title="<?php echo JText::_( 'COM_KOPARENT_PREVIOUS'); ?>" /> <img class="mousepointer" onclick="javascript:setNextCalDate();" src="<?php echo $this->krbaseurl; ?>/components/com_koparent/assets/images/calendar/cal_next.png" title="<?php echo JText::_( 'COM_KOPARENT_NEXT'); ?>" />

                    </div>

                </div>
  • 2 Contributors
  • 1 Reply
  • 252 Views
  • 6 Hours Discussion Span
  • Latest Post Latest Post by annaharris

Dani AI

Generated

Likely causes for the behaviour described by (calendar shows only when the header script is removed, but the tabs then disappear) are script-order or library conflicts and the calendar being initialised while its tab is hidden. Both are common with Joomla pages (MooTools/jQuery conflicts) and with calendar widgets that need visible dimensions to render.

Quick debug checklist (do these first):

  • Check the browser console for JS errors. Missing plugin or "undefined" errors point to load-order or duplicate-library problems.
  • Inspect the page source for multiple jQuery copies. jQuery must be loaded only once, before jQuery UI and the calendar plugin.
  • Confirm jQuery UI / calendar CSS files are present and loaded.
  • Make sure the tabs initialization script is still present after moving header scripts—removing the header JS may have removed the tabs init.
  • Test the calendar outside the tabs container to confirm the plugin itself is working.

A reliable fix is to initialise or refresh the calendar when its tab becomes visible. In Joomla pages it also helps to use jQuery.noConflict() to avoid MooTools collisions. A common pattern:

jQuery.noConflict();
jQuery(function($){
  $("#tabs").tabs({
    activate: function(event, ui){
      var $cal = $("#reservation_calendars");
      try {
        if ($.fn.fullCalendar) { $cal.fullCalendar('render'); }       // FullCalendar
      } catch(e){}
      try {
        if ($.fn.datepicker && $cal.hasClass('hasDatepicker')) { $cal.datepicker('refresh'); } // jQuery UI datepicker
      } catch(e){}
      // For other calendar plugins: call their refresh/render method here.
    }
  });
});

Notes and cautions:

  • The exact refresh call depends on the calendar plugin (FullCalendar, jQuery UI datepicker, CLNDR, etc.). Use the plugin's documented redraw/refresh method.
  • If moving/removing header scripts changes behaviour, script ordering or duplicate includes are almost certainly involved—fixing those usually resolves both missing tabs and missing calendar.
  • Post the console errors and the <head> script order if the problem persists; those details identify the precise conflict.
Member Avatar for annaharris

Does the tabs appear again after placing the javascript into the header section ?

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.