Load widget using ajax
In widget framework a mechanism has been provided by which a widget can be updated without refreshing the whole page. Necessary steps to do that are as follows
A core tag is provided with widget framework named
widgetAjaxMarkup
. This tag will render a link element and will keep it hidden. You have to invoke this tag inside widget code. An example of the tag's output is<a href="http://test.escenic.com/widgetContentId=1234&widgetName=stories&elementwidth=620" rel="refresh" id="widgetURL-1234" style="display:none">Reload</a>
Then on any element's (that is inside the widget)
onclick
or on other event you should call the javascript utility functionrefreshWidgetContent
provided with widget framework. This function takes two parameter. One is any DOM element inside the widget and another one is a javascript map. This utility function basically sends an ajax GET request with the url rendered bywidgetAjaxMarkup
tag. If you want to pass any other parameter with url to the widget than you have to pass through the javascript map. In response HTML of the widget will be returned and widget will be updated.
Here a sample code snippet is given
<div class="${stories.wrapperStyleClass}"> <div class="header"> <h5> <c:out value="${stories.widgetName}" escapeXml="false"/> </h5> <wf-core:widgetAjaxMarkup/> </div> <img src="reload.png" alt="Reload Widget" onclick="refreshWidgetContent(this)"/> <div class="content"> .............. </div> </div>
Utility function widgetAjaxMarkup
basically find closest div having CSS class widget
from the element it is fired on.
So, if you remove widget
class from widget markup then widget will not be updated