Can you reload an jquery loaded content without reloading the whole page?

Question

So I use a piece of the availability calenders from phpjabbers.com. Here is a link to the information page:https://www.phpjabbers.com/free-availability-calendar-script/

This works perfectly but now i was wondering if it was possible to reload the calenders whitout reloading the whole page. The following code is the code I use to load the calenders when the page is refreshed or loaded for the first time.

$(document).ready(function(){    
  $('#basic').calendar({
      adapter: 'server/adapter.php',
      num_next_month: 2,
      num_prev_month: 0,  
      day_first: 1,
      onSelectDate: function(date, month, year){
          if (month < 10) {
              month = "0" + month;
          } 
          if (date < 10) {
              date = "0" + date;
          }
        var datum = [year, month, date].join("-");
        //alert(datum);
            if (window.XMLHttpRequest) {
                // code for IE7+, Firefox, Chrome, Opera, Safari
                xmlhttp = new XMLHttpRequest();
            } else {
                // code for IE6, IE5
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange = function() {
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                    document.getElementById("dagoverzicht").innerHTML = xmlhttp.responseText;
                }
            };
            xmlhttp.open("GET","tabel.php?q="+datum,true);
            xmlhttp.send();
        },
  });
})

Thanks in advance

You could simply remove the eleemnt to which this calendar is applied, add a new one and add calendar to it again. — Beri, May 23 '16 at 07:22
I used the jquery.empty function and that works but when i copy the code above it doesn't reload the calenders and I don't know why? — Robbe Dillen, May 23 '16 at 07:37

Milanzor · Answer 1 · 2016-05-23T08:03:55.553

0

It seems that this script is fairly limited in its uses. Many other calendar libraries provide "destroy" and "reload" functions or allowing you to put in new unavailable dates.

I think an inline jQuery UI Datepicker (https://jqueryui.com/datepicker/) can set you up with what you want, because it allows you to 'refresh' the datepicker.

When it comes to styling, you will have to style it yourself to make it look the way you want (jQuery UI, to me, looks ugly).

ADDITION

Also, about your code, why don't you use Ajax functions provided by jQuery instead of doing Ajax the hard way. You are already using jQuery in your code. $.ajax(); for example.

edited May 23 '16 at 08:03

answered May 23 '16 at 07:31

Milanzor

1,920
14
22

No i can't use this becaus this hasn't got the possibility to set unavailable dates – Robbe Dillen May 23 '16 at 07:42
Yeah but i meant that it needs to be clickable but just show an other color or something like that to indicate that there is already an reservation but you can make multiple reservations at a day – Robbe Dillen May 23 '16 at 07:46
jQuery UI Calendar also allows you to do that. A quick Google: http://www.spiceforms.com/blog/highlight-particular-dates-jquery-ui-datepicker/ – Milanzor May 23 '16 at 07:57

Can you reload an jquery loaded content without reloading the whole page?

1 Answers1