how to refresh only div with id=calender?

Question

$(document).ready(function() {
    $("#client-list").on("change", function() {
    var selectedValue = $(this).val();
        location.reload();
  });
});

how to refresh only div with id='calender', instead of refreshing complete page, onchange dropdown list option? Complete source i have created a fiddle or how to keep slected option in drop down which was selected and refresh rest of the page?

Answer 1

You cannot reload only a part of your page unless you use IFRAMES.

Instead, you'll have to use AJAX. Here is a quick example:

<script>
  function refreshCalendar()
  {
     $.ajax({
       type: "GET",
       url: 'http://yourdomain/api/whatever',
       data: "", // You can send some data to the servers
       success: function(data) {
            $('#calendar').html(data);
       }
     });
  }
</script>

Answer 2

You can refresh fullCalender as like this.

Put you calendar code in a function LoadCalendar then call it once on document ready and once on change of dropdown.

function LoadCalendar() {
   $('#calendar').fullCalendar({
      //your options
   });
}
$(function(){
   LoadCalendar();
   $("#client-list").on("change", function() {
      var selectedValue = $(this).val();
      LoadCalendar();
   });
});