ajax div template

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Migrated to Confluence 4.0
Note

The Ajax theme is experimental. Feedback is appreciated.

The ajax div template provides a much more interesting div rendering option that the other themes do. Rather than simply rendering a <div> tag, this template relies on advanced AJAX features provided by the Dojo Toolkit. While the div tag could be used outside of the ajax theme, it is usually not very useful. See the div tag for more information on what features are provided.

...

To start refreshing use the javascript:

Code Block
remotediv1.startstartTimer();

To stop refreshing use the javascript:

Code Block
remotediv1.stopstopTimer();

To refresh the content use the javascript:

Code Block
remotediv1.bindrefresh();

JavaScript Examples:

To further illustrate these concepts here is an example. Say you want to change the url of a div at runtime via javascript. Here is what you need to do:
What you will need to do is add a JS function that listens to a JS event that publishes the id from the select box that was selected. It will modify the URL for the div (adding the id so the correct data is obtained) and then bind() the AJAX div so it refreshes.

Code Block
<saf:head theme="ajax" />

<script type="text/javascript">
    function updateReports(id) {
       var reportDiv= window['reportDivId'];
       reportDiv.href = '/../reportListRemote.action?selectedId='+id;
       reportDiv.bindrefresh();
    }
    dojo.event.topic.getTopic("updateReportsListTopic").subscribe(null, "updateReports");
</script>

<form ... >
<saf:select .... onchange="javascript: dojo.event.topic.publish("updateReportsListTopic", this.value); " />

<saf:div id="reportDivId" theme="ajax" href="/.../reportListRemote.action" >
  Loading reports...
</saf:div>
</form>