Web page content is usually generated and assembled on the server side and then sent to user browser. Server side content processing allows enforcing various rules such as validation, authorization, personalization, etc. It is, however, possible to add dynamics to the content on the client side by acquiring additional or modifying existing content and re-integrating results with the page without server round trip. Below we show how this can be achieved.
To implement dynamic content on a web page, the page should include a content container HTML element, which is usually a div element. For example:
<div id="DynamicContent"> </div>
When this HTML element is rendered by the browser, this container element does not display anything - content is empty. This is usually initial state of the container element. If more than one similar container elements are placed on a web page, each should have a unique value of the id attribute.
To populate a container element with content derived from external sources (for example report output, HTML form content, list of links, etc.), there should be an event, which executes a java script code:
var oContent = document.getElementById('DynamicContent');
var cURL = 'http://www.servername.com/path/servicename.aspx'
oContent.innerHTML = aaSubmitURI(cURI, "@GET", "");
In this example, the first line establishes object reference to the HTML container element which we created above, the second line provides URL of the web service which generates dynamic content to be placed into the container element, and finally the third line executes the web service, gets the content and updates the inner HTML of the container element to present the derived content.
Function aaSubmitURI is part of Arnica Software web platform shared components library, written in javascript. Any event could trigger content update described above, e.g. page load, mouse click, mouse over, timer event, etc.
An example of dynamic content could be explored on the Arnica demo site: http://www.arnicasoftware.com/demo/arnica-webreport-report-with-dimension-items-presented-on-the-left-hand-side/1517/index.aspx
In this example, dynamic content presents a list of dimension items links on the left from the report data table. The dynamic content area is marked with the orange box in the screenshot below. In this case, click on the the icon specified by the red arrow is the event, which triggers refreshing the dynamic content . When trying this example, note that the dynamic content changes while the main page stays intact.
More examples with dynamic content are available on Arnica demo site: