Member Avatar for emit_flesti

This is the weirdest problem I've seen so far. But upfront this is my first javascript development. I've mostly programmed in Actionscript and PHP.

I have quite a bit of javascript running on my PHP page. I had just gotten everything to work well (looking at you IE7!) and I moved one function to another place because out of the blue I was getting "function is not defined."

From there everything went wrong. Soon the page wouldn't register any functions. I moved it all to an external .js file and that solved nothing.

So I went back to where it all went wrong. One by one as I used the page I would get an undefined function error. So I moved these one by one to a different part of the page. Soon I was able to get all the code working but I had my leftover <script> tags.

<link href="css/main.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/jsTrace-uc.js"/>
<script type="text/javascript" src="js/dom-drag.js"/>
[B]<script type="text/javascript">
</script>[/B]
<script type="text/javascript">
  function listHide(boxid){
    document.getElementById(boxid).style.visibility = "hidden";
    document.getElementById(boxid).style.display = "none";
  }
...

So I deleted this and lo and behold, the page stopped working completely again. So I put it back in and it worked!

As I said I haven't done any real Javascript before so I don't really know the nuances of the page structure concerning the scripting environment. But this seems like a very very odd issue.

But it's one of those "how the hell did I ever figure that out."

In case someone is bored and wants to figure this out I've attached the code. I wouldn't mind knowing (for future reference) why in the world this is happening.

<?php
	include("include/database.php");
	$link = db_connect();
	$title_default = "-- Enter page title --";
	$desc_default = "Enter page description here";
	$content ="Here's some content";
	$projects = getProjects($link);
	
	function str_clean($str) {
		$order   = array("\r\n", "\n");
		$replace = '&#92n';
		$newstr = htmlentities($str);
		$newstr = str_replace($order, $replace, $newstr);
		return $newstr;    
	}
	
	$list = "<div id='listID' value=''>";
	foreach($projects as $row) {
		$desc = str_clean($row['as_title']);
		$list .= "<a href=\"#\" id=\"option".$i."\" onClick=\"listSelect(this.innerHTML,'".$row['as_id']."','".str_clean($row['as_desc'])."')\">".$row['as_title']."</a><br />";
	}
	$list .= "</div>";
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' lang='en' xml:lang='en:us'>
  <head>
  <title>Add and Remove Elements</title>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
	<link href="css/main.css" rel="stylesheet" type="text/css">
	<script type="text/javascript" src="js/jsTrace-uc.js"/>
	<script type="text/javascript" src="js/dom-drag.js"/>
	<script type="text/javascript">
	</script>
	<script type="text/javascript">
	  function listHide(boxid){
			 document.getElementById(boxid).style.visibility = "hidden";
			 document.getElementById(boxid).style.display = "none";
		}
	  function listSelect(title,id,desc) {
		  var node = document.getElementById('listID').getAttribute("value");
		  var selectList = "proj_desc" + node;
		  var titleDiv = "title" + node;
		  var projDiv = "project" + node;
		  //trace('TITLE: '+title);
		  //trace('ID: '+id);
		  //trace('NODE: '+node);
		  //trace('selectList: '+selectList);
		  //trace('projDiv: '+projDiv);
			document.getElementById(selectList).value = desc;
			document.getElementById(projDiv).setAttribute('value',id);
			//trace("get: "+get);
			listHide('divList');
		}
		function processbtnclk(objBtn,id){
			objDiv=document.getElementById('divList');
			objDiv.style.top = findPosY(objBtn)+'px';
			idDiv = document.getElementById('listID').setAttribute('value',id);

			if(objDiv.style.visibility == 'hidden'){
				objDiv.style.display = 'block';
				objDiv.style.visibility = 'visible';
			} else {
				objDiv.style.display = 'none';
				objDiv.style.visibility = 'hidden';			
			}
		}
		function findPosY(obj){
			var curtop = 0;
			if (obj.offsetParent){
				while (obj.offsetParent){
					curtop += obj.offsetTop;
					obj = obj.offsetParent;
				}
			}	else if (obj.y){
			curtop += obj.y;
		}
			return curtop;
		}
		function listElements(){
			var names = getElementsByClassName('project');
			var tmpNameID = new Array();
			var nameID = new Array();
			for(i = 0; i < names.length; i++) {
				//trace('names: '+names[i].getAttribute('value'));
				if(names[i].getAttribute('value') != "") {
					tmpNameID[i] = names[i].getAttribute('value');
					//trace('tmpNameID array: '+tmpNameID[i]);
				}
			}
			for(x = 0; x < tmpNameID.length; x++) {
				if(tmpNameID[x] != null && tmpNameID[x] != "") {
					nameID.push(tmpNameID[x]);
				}
			}
			var nameString_arr = nameID.toString();
			trace('nameString_arr: '+nameString_arr);
			document.getElementById('nameString_arr').setAttribute('value',nameString_arr);
		}
		function getElementsByClassName(classname){
			var rl = new Array();
			var re = new RegExp('(^| )'+classname+'( |$)');
			var ael = document.getElementsByTagName('*');
			var op = (navigator.userAgent.indexOf("Opera") != -1) ? true : false;
			if (document.all && !op) ael = document.all;
			for(i=0, j=0 ; i<ael.length ; i++) {
				if(re.test(ael[i].className)) {
					rl[j]=ael[i];
					j++;
				}
			}
			return rl;
		}
		function value_clear( el ) {
			//trace(el.name);
			if(el.value == el.defaultValue) {
				el.value = '';
				el.focus();
				el.style.color = "black";
			}
		}
		function value_test( el ) {
			//trace(el.name+' value: '+el.value);
			if(el.value == "") {
				el.value = el.defaultValue;
				el.style.color = "#9f9f9f";
			}
		}
		function validate_form() {
		  listElements();
		  var names2 = getElementsByClassName('project');
			var nameID2 = new Array();
			//trace('nameID2[0]: '+typeof(nameID2[0]));
			valid = true;
			var title = document.getElementById('OS_TITLE');
			var desc = document.getElementById('OS_DESC');
			
			var empty = false;
			var arrTest = new Array();
			for(i = 0; i < names2.length; i++) {
				nameID2[i] = names2[i].getAttribute('value');
				trace('nameID2[i]: '+nameID2[i]);
				if(i == (names2.length - 1)) {
				  trace('i == names2.length');
				  trace('nameID2.length: '+nameID2.length);
				  for(x = 0; x < nameID2.length; x++) {
				    if(nameID2[x] != "") {
				      trace('nameID2 element '+nameID2[x]+' is a '+typeof(nameID2[x]));
				    	arrTest.push(nameID2[x]);
				    }
					}
					trace('arrTest[0]: '+arrTest[0]);
					trace('arrTest.length: '+arrTest.length);
					
				}
			}
			if(title.value == title.defaultValue) {
			  title.focus();
			  alert('Page title is empty');
			  valid = false;
			} else if(desc.value == desc.defaultValue) {
				alert('Page description is empty');
				desc.focus();
				valid = false;
			} else if(arrTest.length == 0) {
				  alert('Select at least one project');
				  valid = false;
			}
			trace('valid: '+valid);
			return valid;
		}
	</script>
	<script type="text/javascript">
		var pr_id = 1;
		function addElement() {
			var ni = document.getElementById("content");
			var el = document.createElement("div");
			var elIdName = "project" + ++pr_id;
			el.className = "project";
			el.id = elIdName;
			el.value = "";
			el.innerHTML = "<div id='proj_id' value='" + pr_id + "'><div class='pick'>" + pr_id + "<a href='#' onClick='processbtnclk(this," + pr_id + ")'><img src='images/pick.png'></a></div><div id='remove'><a href='#' onClick='removeProj(this.parentNode.parentNode.parentNode);'><img src='images/remove_proj.png'></a></div><div id='descBk'><textarea class='proj_desc' id='proj_desc" + pr_id + "' name='OS_CONTENT' rows='6' style=''></textarea></div></div>";
			//trace("elIdName: "+elIdName);
			//trace("id: "+el.className);
			//trace("content: "+ni);
			document.getElementById("content").appendChild(el);
		}
		function getID(el) {
			if (typeof el === 'string') {
				return document.getElementById(el);
			} else {
				return el;
			}
		}
		function removeProj(el) {
			var el = this.getID(el);
			el.parentNode.removeChild(el);
		}

	</script>
  </head>
  <body bgcolor="#1f394a">
    <div id="page">
      <form action="process_build.php" name="form1" method="post" enctype="multipart/form-data" onSubmit="return validate_form()">
        
        <!-- PAGE TITLE -->
        <textarea name="OS_TITLE" id="OS_TITLE" rows="1" style="width:330px; height: 45px; float:right; font-size:1.9em; margin-top:70px; margin-right:14px; margin-bottom:42px; color: #9f9f9f; " onFocus="value_clear(this);" onBlur="value_test(this);" value="<?= $title_default ?>" >Enter page title</textarea>
        
        <!-- PAGE DESCRIPTION -->
        <textarea name="OS_DESC" id="OS_DESC" rows="4" style="font-size:.85em; font-weight: bold; width:100%; margin-top:39px; margin:auto; border-width: 0px; color: #9f9f9f; " onFocus="value_clear(this);" onBlur="value_test(this);" value="<?= $desc_default ?>">Enter page description here</textarea>
      
      <!-- PROJECT SELECTORS -->
      <div class="project" id="project1" value="">
        <div id="proj_id" value="1">
 					<div class="pick">1<a href="#" onClick="processbtnclk(this,1)"><img src="images/pick.png"></a></div>
					<div id="descBk">
						<textarea class="proj_desc" id="proj_desc1" name="OS_CONTENT" rows="6" style=""></textarea>
						<div id="proj_bkgd"></div>
					</div>
				</div>
      </div>
      <div id="content"></div>
			<div id="add-element">
				<a href="#" onClick="addElement()"><img src="images/add_new_clip.png"></a>
				<input id="submit_next" type="image" src="images/next.png" name="submit_next" value="Submit"/>
			</div>
			<input name="nameString_arr" id="nameString_arr" type="hidden" value=""/>
			<a href="#" onClick="listElements()" style="font-family: Helvetica; font-size: .8em;">List Order</a>
      </form>
      <div id="divList" style="visibility: hidden; display: none;"><?= $list ?></div>
    </div>
  </body>
</html>
  • 2 Contributors
  • 2 Replies
  • 93 Views
  • 15 Hours Discussion Span
  • Latest Post Latest Post by emit_flesti
Member Avatar for ShawnCplus

It doesn't work because script tags can never be short-tags i.e., <tagname />, they must be explicitly closed i.e., <tagname></tagname>

Member Avatar for emit_flesti

Thanks! I was just thinking about that this morning. I've been looking at the JS for the problem I just looked it right over.

But those tags have been like that since I put them in and only in the past two days did I get the 'function is not defined' error.

But thanks again. I knew it was something stupidly simple.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.