Take the 2-minute tour ×
SharePoint Stack Exchange is a question and answer site for SharePoint enthusiasts. It's 100% free, no registration required.

How to reload calendar without refreshing whole page ?

share|improve this question
    
Can you explain in more detail, the calender webpart is ajax enabled so moving through month views shouldn't refresh the page unless this is disabled from the webpart options. –  Hugh Wood Feb 13 '13 at 12:50
    
i want to reload the calendar on button click event . –  Rajesh Joshi Feb 13 '13 at 13:07
    
Is this a custom button? Please add more information to your answer in as much detail as you can. What you will find is that you will just need to fire one of the already built in functions. Using a profiler in IE or Chrome will tell you what is run on the page, Chrome will tell you when where and in more detail. –  Hugh Wood Feb 13 '13 at 14:32
    
i added one filter webpart on calendar. so when user filter some detail on calendar , calendar view is modified but untill we refresh the page, calendar not changed. so we have to refresh the page, thats why i want to refresh only calendar on filter button –  Rajesh Joshi Feb 14 '13 at 4:04
    
The back forward buttons on the calender are javascript functions that do that, you could inspect those and hook into them as they call ajax. –  Hugh Wood Feb 14 '13 at 9:24
show 2 more comments

1 Answer 1

The following script by Marc in his article Refreshing a Web Part Without a Postback Using jQuery’s AJAX Function does just that, update the content of a web part without the full postback. Just hook up the jQuery script to your refresh calendar button, and you could stop making full page refresh.

/*
Refreshes an element's contents on a user action, showing a modal dialog during the refresh
elementId  The id of the container element
qs         The Query String to append to the current URL
title      The title to show for the dialog
msg        The message to show in the dialog
*/

function refreshElement(elementId, qs, title, msg) {

  var elementObj = $("#" + elementId);
  var infoDialog = $("<div><div>" + msg + "</div><div class='aaa-please-wait'></div></div>").dialog({
    open: function(event, ui) {
      $(".ui-dialog-titlebar-close").hide();  // Hide the close X
      $(this).css("overflow-y", "visible");   // Fix for the scrollbar in IE
    },
    autoOpen: false,
    title: title,
    modal: true
  });
  infoDialog.dialog("open");

  elementObj.fadeOut("slow", function() {
    $.ajax({
      async: false,
      url: window.location.pathname + qs,
      complete: function (xData) {
        newHtml = $(xData.responseText).find("#" + elementId).html();
        elementObj.html(newHtml);
      }
    });
  }).fadeIn("slow", function() {
    infoDialog.dialog("close");
  });
}
share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.