dominoGuru.com

Your Development & Design Resource

Using AJAX, text/plain Content Type, and external resources to create dynamic in-line content!

Was chatting today with a good friend and fellow blogger Mike Smesler, when an interesting requirement came up for an application that he was working on: the need to populate a section of the current page with content from another source - and as dynamically as possible.

Now, an old-school solution to this problem would involve using an embedded iframe and walking said iframe to get the content. In the days of AJAX however, that's no longer a necessity! Here's the code that we'll use:

var xmlhttp=false;
/*@cc_on @*/
/*@if (@_jscript_version >= 5)
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
xmlhttp = false;
}
}
@end @*/
if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {
xmlhttp = new XMLHttpRequest();
}

function getcontent_innerHTML(url, targ) {
targ.innerHTML = '<p align=center><img src="ajax-loader.gif" /></p>';
xmlhttp.open("GET", url);
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
targ.innerHTML = xmlhttp.responseText;
}
return true;
}
xmlhttp.send(null);
}

Now, for it's usage:

<div id="container">&nbsp;</div>
<script>
getcontent_innerHTML('some_URL_here', document.getElementById('container'));
</script>

Now, for the Domino-slant on this: you can take a Page or Form (or View, or Agent, etc. etc. etc.) Design Element, set the Content Type to text/plain and generate your markup to be used with this approach. This means that you can run Database queries live and in-line (or -hint hint- use any web technology or client to create a conduit to querying or maintaining Domino applications)!

It's a very simple technique that can help expand the architecture and usage of your applications - even outside of Domino!

One thing that you might want to look at however, the line targ.innerHTML = '<p align=center><img src="ajax-loader.gif" /></p>'; is simply put in there to load a "Loading - please wait" type of icon which will tell your users that something is going on - especially if the response from the server/resource lags for whatever reason.

Updated

Thanks for the catch Tim - I'll approve your comment, which will explain this update, when I get back into the office!


About the author: Chris Toohey

Thought Leadership, Web & Mobile Application Development, Solutions Integration, Technical Writing & Mentoring

A published developer and webmaster of dominoGuru.com, Chris Toohey specializes in platform application development, solutions integration, and evangelism of platform capabilities and best practices.



More from dominoGuru.com


dominoGuru.com is powered by IBM Notes Domino XPages & hosted by Prominic.NET

Contact Us

Use our Contact / Feedback form or one of these email addresses:

Creative Commons License

Except where otherwise noted, dominoGuru.com by Chris Toohey is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.