Wednesday, February 20, 2008 5:45 PM
by
nairdo
Elegance vs Practicality
I yearn for and typically choose only elegant solutions, but in times of desperation it's not beyond me to use a hack to accomplish something. I'm not proud of it, but I do see it as sign of my practical side. I also don't enjoy javascript, but I don't know where I'd be without it in my toolbox.
A while back I talked about editing your ChMS application, but today I went a bit further and threw in a little javascript hack to help deal with a process problem (having to do with how people should be added to existing families) that has another corresponding family syncronization issue between Arena and ShelbyV5.
I wanted different custom content to appear above the Family Wizard based on what tab or content might be in a tab. When you're on the "Record/Member Status" you will see our applicable message, but when you're on the Address tab and if there is a duplicate family warning I wanted to have a different message. When on the other tabs you see no message.
Status tab...

Address tab...

Address tab with the notice...

Since the Family Wizard sits on one single page, you have to get creative to make this one happen.
To accomplish this hack I just gave each of my Advanced Html Text div content blocks a unique ID and a style of display:none. Then I added a new Advanced Html Text block below the Family Wizard module that has some javascript which examines the querystring, and if a particular tab found, it looks for certain content (NOTICE: Multiple...Same Address) in the page. Based on the condition, it will set the display style to block.
<div id="addressNote" style="display: none; margin-left: 5px; margin-bottom: 5px; background-color: #FFFF99; font-size: 12px; width: 600px; border: black 1px solid; color: red; display: none; padding: 5px 5px 5px 5px"><b>STOP!!!</b><br>If the person you are adding is related to the family shown below <b>DO NOT PROCEED</b> - contact Julie Ballentyne. You may continue only if the family listed below is NOT related and you <b>DO NOT check any checkboxes</b>.</div>
link to this javascript file:
<script type="text/javascript">
// from http://www.netlobo.com/url_query_string_javascript.html
function gup( name )
{
name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
var regexS = "[\\?&]"+name+"=([^&#]*)";
var regex = new RegExp( regexS );
var results = regex.exec( window.location.href );
if( results == null )
return "";
else
return results[1];
}
// Look for the NOTICE text inside a DIV with a class name of "heading2"
function checkForDupNotice()
{
var pageContent = document.getElementById('pageContent');
if ( pageContent )
{
var allDivs = pageContent.getElementsByTagName('div');
for(i = 0; i < allDivs.length; i++)
{
if (allDivs[i].className == 'heading2' && allDivs[i].innerHTML == 'NOTICE: Multiple Families at Same Address' )
return true;
}
}
return false;
}
var tabParam = gup( 'tab' );
if ( tabParam == "Address" && checkForDupNotice() == true )
{
var addressNote = document.getElementById('addressNote');
addressNote.style.visibility='visible';
addressNote.style.display='block';
}
else if ( tabParam == "Status" )
{
var note = document.getElementById('memberStatusNote');
note.style.visibility='visible';
note.style.display='block';
}
</script>
The IE Developer Toolbar is a must have for investigating the DOM on pages where you don't actually have the source.