Programming : DIM : Making A Discreet Introduction

AJAX. Everyone on the web is talking about the marriage of JavaScript and XML. On the face it, AJAX is super cool. I use GMail daily and wonder at its sophistication. A while back Internet browsers had their pants dropped for all manner of data to come from any source piped through JavaScript. It was a cross-site-scripting (XSS) bonanza. Then, the security was shored up so that (theoretically) XSS vulnerabilities were gone. But there was a torrent of XML out there. All of this neato data that you see via your browser, but you couldn't do anything with it. So the belt buckle was undone and web browsers bent over to accept XML from anywhere via AJAX. I thought that was swell, but I've got an egg timer set to time how long before there a scandal from an AJAX delivered exploit.

The difference between AJAX and external data inclusion is that AJAX can use data from any location. External data inclusion is made to ignore requests for data from alien domains (e.g. from http://mike.dewolfe.bc.ca/test.html you can ask for data from http://mike.dewolfe.bc.ca/fodder.html but http://www.dewolfe.bc.ca/fodder.html will be ignored because it looks like a XSS exploit.) As long as you stay home for the data--looking only on your own domain-- you can do some funky stuff using a process I have dubbed, "discrete introduction mechanism." (or DIM). At the core of the process, you interactively rebuild a web page without refreshing the page. How many times have you seen a survey cluttered with options you won't use if you follow a tree of answers? Or, you have a table of links and these links refer to sub-tables of data. You could deliver all of the data and create commensurate server load.

Or, have introduction points in the main table and introduce the data as required.


Four core requirements make up DIM: DIV tags to create accessible objects, the innerHTML of those DIV tags, iframes to act as a waypoint for remote data, and JavaScript to orchestrate the move, show, hide and remove of introduced HTML and sense events. While four elements are required, a fifth element is server side processing. Why is server-side processing not required? Done right, most of the work can occur on the client side, so you could run a DIM app on a server that bars you from server-side app building (e.g. Geocities or Shaw).

How this works: an event on the main page in question spawns a call for either new HTML, to hide HTML or to show hidden, existing HTML. A call for new HTML loads the new HTML into an iframe. JavaScript takes the innerHTML from that iframe and moves it to the appropriate part of the main page.

How is this useful? If you insert form elements, they become part of the overall form: add questions as they become appropriate. Also, they don't appear in the original HTML source code which could aide code dependency or hide some sensitive answers. You can insert content as its required. You can swap out content as it's required. This is more than what an iframe would give you: this forces a client side redraw of the page. For that matter, the innerHTML introduced could be an iframe or a group of iframes. The two big advantages: a) your site will look good and generate fewer page refreshes; b) by generating fewer refreshes, less server load and less bandwidth are generated. That's a win-win.

How do you do it? Line up the elements and this is how they play out.


Main Page

The "main" page-the page where the data is displayed. The page that uses the DIM material. The main page needs to hold a <DIV></DIV> where DIM material is intended. There can be multiple inclusion points on a page so long as they all have individual references. DIV tags need an id reference (e.g. <div id="details10"></div> for one inclusion point and <div id="details11"></div> for another).

To land new content onto the page, there has to be an event. In the example below, a hyperlink carries an onClick event that calls a function "PullHTML()" with an argument to reference the div tag that we will want to populate.












<tr>
<td>Line item 10</td>
<td align="right">  <a href="#a_details10" onclick="PullHTML('10');">View</a></td>
</tr>
<tr>
<td colspan="2"><a name="a_details10"></a><div id="details10"><img src="" width=1 height=1></div></td>
</tr>
<tr>
<td>Line item 11</td>
<td align="right">  <a href="#a_details10" onclick="PullHTML('11');">View</a></td>
</tr>
<tr>
<td colspan="2"><a name="a_details11"></a><div id="details11"><img src="" width=1 height=1></div></td>
</tr>





The PushMe-PullYou

In the above example, the click event calls "PullHTML()". That is an okay way to call the data, but there is a problem with that as the sole means of data introduction. When you call the pulled data it may not be present yet. You could use some tools to see if the content in the waypoint iframe has been loaded, but why not let the iframe speak for itself? If there is any chance that the material in the iframe may be delayed, instead use an onload event to push the data up to the main page.

For example, in the iframe, the loaded page can call a PushHTML function that passes its own content up to the parent page. The PushHTML is loaded by a body OnLoad event.







function PushHTML(ref_id)
    {
    parent.document.getElementById('details' + ref_id.toString()).innerHTML =
document.getElementById('view').innerHTML; }



To get the reference ID, you need to do one of two things: a) use server side processing to get the reference ID from the query string and then pass that into the outputted page; or b) use JavaScript to read the window location.

This code can go into the JavaScript to read and gain the querystring. When the body loads PushHTML will pass back a value to the parent. In this case, the query string is used to name where the material in this iframe should be passed.





var qsParm = new Array();
function showqs()
	{
	var query = window.location.search.substring(1);
	var parms = query.split('&');
	for (var i=0; i<parms.length; i++) {
	   var pos = parms[i].indexOf('=');
	   if (pos > 0) {
		  var key = parms[i].substring(0,pos);
		  var val = parms[i].substring(pos+1);
		  qsParm[key] = val;
		  }
	   }
	return qsParm['RefID'];
	}

<body onLoad="PushHTML(showqs());">



Use an iframe as the workhorse.

<iframe src="testblank.htm" width="1" height="1" border="0" name="workframe"></iframe>



You can call this iframe to do the work for you. You can either submit a form to this "workframe" target. You can have a hyperlink call this iframe. Or, you can call to change the contents of this iframe through Javascript. When the page gets loaded, the PushHTML event can pass items to the parent page.

In the iframe, you can throw anything into span area and give that segment and id



<span id="view">HTML code</span>



Everything inside of the iframe will get passed back to the parent page.



How can you use this?

Add form elements as you need them. For example, if you're doing a movie listings form and you run out of showtime fields, click a button and you have additional showtime fields available.

Name the working iframe as the target for a form. When the form processes and displays the results, you can pass those results back to the Main Page to the waiting DIV tags.

The frame can be set to do a periodic refresh. Each time it refreshes, it can add its HTML to the parent page and lengthen the list of current results. This is a big selling feature of AJAX that you can pull off the same with DIM.

For an example of this stuff in action, click here

For all of these pages in a zip file click here



Pay The Monkey To Dance

Do you need programming help? I can offer help in two speeds: when I can; and when you want. If you want a free tidbit of advice in one of my areas of knowledge, feel free to ask. As time allows (I have a full time day job and a preschooler), I can reply to questions to the best of my ability. If need an answer now, you can pay the monkey to dance-- pay me to get a priority answer and/or code to suits your needs. My rates are available upon request and I usually factor in complexity and project size. Expect a little back and forth in speccing the project. I've found that the time savings from proper planning to be incredible.









Social And Stats

My Brand Yourself-- no wait, that doesn't make sense!

 
eXTReMe Tracker