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 function refreshWidgetContent 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 by widgetAjaxMarkup 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