Automatically Reloading a Portlet
- Laura McCord
An approach to causing a page to reload the next time it is viewed after an action in a separate browser window using a custom jQuery plugin.
On the page to be reloaded
Include jQuery and the pageReload script. Call $.autoReload.reloadOnChange with a cookie name specific to your application. This registers the window focus listener that checks the cookie for timestamp changes and triggers the reload. The second argument to reloadOnChange is an options hash. If a url key is specified the window will be redirected to that location instead of simply refreshed. The other option is cookieOpts where you can specific additional cookie configuration such as path, domain, secure, and expires.
<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="jquery-pageReload-1.0.js" type="text/javascript"></script>
<script type="text/javascript">
/*
* Run in noConflict mode, this is VERY important for content in the portal
* since multiple jQuery instances may be loaded on a single page.
* See http://www.ja-sig.org/wiki/display/PLT/JavaScript+Best+Practices
*/
var appName = appName || {};
jQuery.noConflict(true);
jQuery(function($) {
var refreshTarget = $('.myPortletContainerDiv .refreshUrl').attr('href');
$.autoReload.reloadOnChange('MY_APP_COOKIE', {
url: refreshTarget,
cookieOpts: {
domain: 'wisc.edu',
secure: true
}
});
$('.myPortletContainerDiv .portletContent .timestamp').text(new Date().getTime());
});
</script>
<!--
In a portlet this URL should be created by the <portlet:renderURL> tag.
For WebProxy content it should be a URL to reload the current view
-->
<a class="refreshUrl" href="http://www.google.com" style="display: none"></a>
On the page that causes the reload
When you want to trigger the reload call $.autoReload.markChanged with the cookie name for your application. The options hash only takes the cookieOpts setting in this case.
<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="jquery-pageReload-1.0.js" type="text/javascript"></script>
<script type="text/javascript">
/*
* Run in noConflict mode, this is VERY important for content in the portal
* since multiple jQuery instances may be loaded on a single page.
* See http://www.ja-sig.org/wiki/display/PLT/JavaScript+Best+Practices
*/
var appName = appName || {};
jQuery.noConflict(true);
jQuery(function($) {
$('.myPortletContainerDiv .portletContent .refreshUrl').click(function() {
$.autoReload.markChanged('MY_APP_COOKIE', {
cookieOpts: {
domain: 'wisc.edu',
secure: true
}
});
return false;
});
});
</script>
<div class="portletContent">
<a class="refreshUrl" href="#">Cause Reload</a>
</div>