asked on

Why Am I Getting A JavaScript Error When Attempting Show-Hide Elements?

I have recently upgraded fro DW8 to CS3, and I am getting the following error in Dreamweaver when I attempt to add a "Show-Hide Element" from the "Behaviors" panel:

While executing onLoad in Show-Hide Layers.htm, the following Javascript error(s) occurred:

At line 145 of file "C:\Program Files\Adobe\Adobe Dreamweaver CS3\Configuration\Behaviors\Actions\Show-Hide Layers.js": TypeError: elem.tagName has no properties

A few notes:

(1) The error only happens on pages on which I already have many show-hide elements events going on; the behavior works fine if I am adding the first show-hide or if the existing page only has a limited number of show-hides. The problem is I don;t want to have to re-do my pages with many show-hides from scratch; that's way, way too much work and would like to avoid if all possible
(2) I have to click "OK" a couple of dozen times to get out of the error message above
(3) I am very very good at Dreamweaver but not so great at Javascript which is why I list my knowledge level as "intermediate"

Here is the code for the .htm file referenced in the error message. Below that is the code for the .js file. I thank everyone in advance for any help.

.htm:
 
<!DOCTYPE HTML SYSTEM "-//Macromedia//DWExtension layout-engine 5.0//dialog">
<!-- SAFE-IN-TEMPLATES -->
<HTML>
<HEAD>
<SCRIPT SRC="Show-Hide Layers.js"></SCRIPT>
<SCRIPT SRC="../../Shared/Common/Scripts/dwscripts.js"></SCRIPT>
<SCRIPT SRC="../../Shared/MM/Scripts/CMN/DOM.js"></SCRIPT>
<SCRIPT SRC="../../Shared/MM/Scripts/CMN/menuItem.js"></SCRIPT>
<!-- Remove the following SCRIPT tag if you are modifying this file for your own use. -->
<SCRIPT SRC="../../Shared/MM/Scripts/CMN/displayHelp.js"></SCRIPT>
<!-- End removal area. -->
<SCRIPT LANGUAGE="javascript">
// Copyright 2000-2006 Adobe Macromedia Software LLC and its licensors. All rights reserved.
 
//--------------- LOCALIZEABLE GLOBALS---------------
 
var MSG_ElemenNotFound = 'The element "%s" that was set to %s could not be found.';
var MSG_ElementNoId = "Please select an element or click Cancel.";
var LABEL_SHOW = "show";
var LABEL_HIDE = "hide";
var LABEL_DEFAULT = "default";
//--------------- END LOCALIZEABLE   ---------------
//---------------    END JAVASCRIPT    ---------------
</SCRIPT>
<TITLE>Show-Hide Elements</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html">
<link href="../../fields.css" rel="stylesheet" type="text/css">
</HEAD>
<BODY onLoad="initializeUI()">
  <FORM NAME="theForm" ACTION="">
    <DIV ALIGN="center">
      
    <TABLE BORDER=0 cellpadding="4" cellspacing="2">
        <TR>
          
          <TD ALIGN="right" VALIGN="top" NOWRAP>
            Elements:</TD>
          <TD VALIGN="top" NOWRAP>
            <SELECT NAME="menu" SIZE=4 class="namedObjectsList">
              
            <OPTION SELECTED>**** no elements with ids found ********
            </select></TD>
        </TR><TR>
        </TR><TR>
          <TD></TD>
          <TD ALIGN="left" NOWRAP>
            <INPUT TYPE="button" VALUE="Show" onClick="storeVis(LABEL_SHOW);focus(this)">
            <INPUT TYPE="button" VALUE="Hide" onClick="storeVis(LABEL_HIDE);focus(this)">
            <INPUT TYPE="button" VALUE="Default" onClick="storeVis(LABEL_DEFAULT);focus(this)"></TD>
        </TR><TR>
          
        <TD NOWRAP>
        </TR>
      </TABLE>
    </DIV>
 
  </FORM>
</BODY>
</HTML>
 
 
And here is the .js:
 
// Copyright 1998-2006 Adobe Macromedia Software LLC and its licensors. All rights reserved.
 
//*************** GLOBAL VARS  *****************
 
var helpDoc = MM.HELP_behShowHideLayers;
 
//******************* BEHAVIOR FUNCTION **********************
 
// Shows and/or hides one or more elements at the same time.
// Accepts a variable number of argument pairs as follows:
//  objId    - the id of the element, such as "apDiv1". 
//  x        - ignored (for backward compatibility)
//  visStr   - 'visible', 'hidden', or 'inherit'.
//
// This function uses getElementById() to locate the element in the
// user's document.
 
function MM_showHideLayers() { //v9.0
  var i,p,v,obj,args=MM_showHideLayers.arguments;
  for (i=0; i<(args.length-2); i+=3) 
  with (document) if (getElementById && ((obj=getElementById(args[i]))!=null)) { v=args[i+2];
    if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
    obj.visibility=v; }
}
 
MM.VERSION_MM_showHideLayers = 9.0; //define latest version number for behavior inspector
 
//******************* API **********************
 
 
// Checks for the existence of elements with an id attribute.
// If none exist, returns false so this Action is grayed out.
function canAcceptBehavior(){
  var retVal = false;
  var idArray = new Array();
  var dom = dw.getDocumentDOM();
  if (dom){
    idArray = dom.getElementsByAttributeName("id");
    if (idArray && idArray.length > 0)
      retVal = true;
  }
  return retVal;
}
 
 
// Returns a Javascript function to be inserted in HTML head
// with script tags.
function behaviorFunction(){
  return "MM_showHideLayers";
}
 
 
// Returns the function call to insert in HTML tag 
// <tag... onEvent='thisFn(arg)'>.
// Gets the list of elements with ids and their visibilities
// from a property set on the document object.
function applyBehavior() {
  // Get the global list of visibilities
  var visArray = document.MM_visArray;
  // Initialize the argument list and return value
  var argList = "", retVal = "";
 
  // Declare local variables
  var theVis, elemId;
 
  for (var i=0; i < visArray.length; i++){
    theVis = visArray[i];
    if (theVis){
      theVis = (theVis == LABEL_DEFAULT)? "inherit" : ((theVis == LABEL_SHOW) ? "show" : "hide");
 
      // Get the corresponding element's id
      elemId = document.ELEMENT_REFS[i].getAttribute("id");
 
      // If the argList is not empty, append a comma.
      if (argList) argList += ",";
 
      // Second argument is empty string (for backwards
      // compatibility).
      argList += "'" + elemId + "','','" + theVis + "'";
    }
  }
  if (argList) {
    updateBehaviorFns("MM_showHideLayers");
    retVal = "MM_showHideLayers(" + argList + ")";
  } else {
    retVal = MSG_ElementNoId;
  }
  return retVal;
}
 
// Given the original function call, this parses out the arguments and 
// updates the UI. First it gets new element,vis pairs.
// If the element already exists in the menu, put the vis value in visArray.
// If the element doesn't exist, add it to the menu and extend visArray.
function inspectBehavior(upStr){
  // Extract the arguments from the function call.
  var argArray = dwscripts.extractArgs(upStr);
 
  // Get the previous list of elements and their visibility settings.
  var visArray = document.MM_visArray; 
 
  // The number of elements with ids
  var numElements = document.ELEMENT_REFS.length;
 
  // Declare loop variables
  var elementId, theVis, found;
 
  // The first element in the argArray is the function name,
  // so scan elements starting at 1.
  for (var i=1; i < (argArray.length-2); i+=3){
    elementId = argArray[i];
    theVis = argArray[i+2];
    theVis = (theVis == "inherit")? LABEL_DEFAULT : ((theVis == "show") ? LABEL_SHOW : LABEL_HIDE);
    
    // Now check whether the element is already in the list
    found = false;
    for (var j = 0; j < numElements; j++){
      if (elementId == document.ELEMENT_REFS[j].getAttribute("id")){
        visArray[j] = theVis;
        addValueToMenuItem(document.theForm.menu,j,theVis);
        found = true;
        break;
      }
    }
    if (!found) alert(errMsg(MSG_ElementNotFound,elementId,theVis));
  }
  document.MM_visArray = visArray; //save updated layer list
}
 
 
 
//***************** LOCAL FUNCTIONS  ******************
 
 
// Load the select menu with element ids.
// Also sets the global property MM_visArray to the right num of items.
 
function initializeUI(){
  var dom = dw.getDocumentDOM();
  var elementArray = dom.getElementsByAttributeName("id");
  var displayNames = new Array();
  
  for (var i=0; i < elementArray.length; i++){
    var elem = elementArray[i];
    displayNames.push(elem.tagName.toLowerCase() + ' "' + elem.getAttribute("id") + '"');
  }
 
  visArray = new Array(); 
  for (var i=0; i < displayNames.length; i++) {
    document.theForm.menu.options[i] = new Option(displayNames[i]); //load menu
    visArray[i] = "";
  }
  //set globals
  document.MM_visArray = visArray;
  document.ELEMENT_REFS = elementArray;
}
 
 
// Stores the new visibility for the selected element in 
// in the global document property "MM_visArray" when the
// user clicks one of the visibility buttons in the UI.
function storeVis(newVis){
  // Get the existing visibilities.
  var visArray = document.MM_visArray; 
  
  if (visArray){
    // Get the position of the selected element
    var currElement = document.theForm.menu.selectedIndex;
    
    // Get the old visibility of the selected element
    var oldVis = visArray[currElement];
    
    // If the visibility is changing, store the new visibility
    // in the global MM_visArray and update the list/menu.
    if (oldVis != newVis) {
      visArray[currElement] = newVis;
      document.MM_visArray = visArray;
      addValueToMenuItem(document.theForm.menu, currElement, newVis);
 
      // Reset the selection after updating.
      document.theForm.menu.selectedIndex = currElement;
 
    }
    // If the new visibility is the same as the old, toggle it
    // (i.e., remove any visibility setting).
    else { 
      visArray[currElement] = ""; 
      document.MM_visArray = visArray;
      addValueToMenuItem(document.theForm.menu, currElement, ""); 
      document.theForm.menu.selectedIndex = currElement;
    }
  }
}

Open in new window

James Rodgers

cant test properly as i dont have tehse scripts
<SCRIPT SRC="Show-Hide Layers.js"></SCRIPT>
<SCRIPT SRC="../../Shared/Common/Scripts/dwscripts.js"></SCRIPT>
<SCRIPT SRC="../../Shared/MM/Scripts/CMN/DOM.js"></SCRIPT>
<SCRIPT SRC="../../Shared/MM/Scripts/CMN/menuItem.js"></SCRIPT>

<SCRIPT SRC="../../Shared/MM/Scripts/CMN/displayHelp.js"></SCRIPT>

can you provide a site link, absolute path

B_Dorsey

no chance you have two attributes with the same id name on the page? regenerated the same data twice?

Just trying to weed out the possbilities

Jason C. Levine

Hi tomstraw,

If the errors in CS3 occur on pages that originally used the DW 8 show-hide behavior then you are running into a compatibility error between the old javascript file and the new one CS3 expects to see/use. You might have to reapply the effect to resolve it.

tomstraw

ASKER

Thanks for the responses. I'll take them one at a time:

Jester 48, I'm somewhat embarrassed to admit that I don't know quite where DW is putting those files on my web server; I can definitely say it's not anywhere I can see after I FTP in. The address of my website is http://www.commuteinfo.org, and I imagine that the path after that would be along the lines of \configuration\Shared\Common\Scripts as it is locally, but I am pretty sure DW is probably creating a server-side directory with a name I am just not aware of, and I can't FTP at a dir level high enough (it appears) to see. Any suggestions? Or, if you want me to just copy-paste the local versions I have of those files, I will.

B Dorsey, I am pretty sure I don't duplicate IDs, but I will triple-check after sending this.

jason1178, I definitely HOPE that that isn't the case, because it would be a huge amount of work for me! Even so, if I knew with absolute certainty there were no other way to do it, I would bite the bullet and just re-do everything from scratch, but I would hate to "do the re-do" and find out a day later that all I needed to do was swap a .js file or something!

tomstraw

ASKER

Thanks, b0lsc0tt. My bad on that. I will definitely use the windows in subsequent messages

ASKER CERTIFIED SOLUTION

Jason C. Levine

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

James Rodgers

in the js function
function initializeUI()

add an alert to the process to see what is being generated

in this block
for (var i=0; i < elementArray.length; i++){
var elem = elementArray[i];
displayNames.push(elem.tagName.toLowerCase() + ' "' + elem.getAttribute("id") + '"');
}

add the alert just after the second line

for (var i=0; i < elementArray.length; i++){
var elem = elementArray[i];
if(i <=1){
alert(elem);
}
displayNames.push(elem.tagName.toLowerCase() + ' "' + elem.getAttribute("id") + '"');
}

the alert should say [object]

tomstraw

ASKER

hmmm . . . I think I (we) figured it out . . . jason1178 got me thinking just about versions and it does appear that DW was trying to insert all-new code for the behavior into the head tag. The code for the latest version is indeed different from that for DW8. It's commented below as "Version 6" but I had been using this code in versions 7 & 8 as well. The old code is below, followed by the new code. It does appear that simply swapping these out in the head tag solves the problem, without having to do anything else.

One small--and not very important, for practical purposes--mystery remains, however: I don't know why DW refused to swap out this code automatically on some pages while doing it just fine on others (especially those with not a lot of existing show-hide behaviors). But, being more of a designer than a programmer, I am just happy when things work and don't try to rock the boat too much beyond that!

function MM_showHideLayers() { //v6.0
 
  var i,p,v,obj,args=MM_showHideLayers.arguments;
 
  for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
 
    if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
 
    obj.visibility=v; }
 
}
 
 
 
function MM_showHideLayers() { //v9.0
  var i,p,v,obj,args=MM_showHideLayers.arguments;
  for (i=0; i<(args.length-2); i+=3) 
  with (document) if (getElementById && ((obj=getElementById(args[i]))!=null)) { v=args[i+2];
    if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
    obj.visibility=v; }
}

Open in new window

Jason C. Levine

Adobe has been terrible about supporting the older versions of coding in Dreamweaver. Going from MX to 8 and then from 8 to CS3 caused a week or two of figuring out what got changed and didn't get changed and applying fixes.

Glad I got you going in the right direction...

tomstraw

ASKER

I hope I don't run into too many other glitches like this! And even as far as that goes, a more comprehensible error mesage from the program would have done the trick. "Can't insert code into head tag" or something along those lines would have tipped me off to this a lot quicker . . . but oh well. That's exactly why I use Experts Exchange! Thanks again for the help!