Going crazy with something simple...

aeroswat · September 3, 2010

Here is the code from the page. When the textbox "sName" is filled with the value "Vinny J" and I click the search button firebug is saying that sName is not defined... it clearly is. It doesn't work in FF but does work in internet exploder... any help would be appreciated. Here is the code for the page

<?php
require_once('../src/auth.php');
require_once('../src/config.php');
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Student Lookup Form</title>
<link href="../src/loginmodule.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../src/jquery-1.2.1.pack.js"></script>
<h1>Student Lookup</h1>
<script type='text/javascript' src='../src/menu<?php echo ($_SESSION['SESS_AC_TYPE'] != '0' ? $_SESSION['SESS_AC_TYPE'] : ''); ?>.js'></script>
<script type="text/javascript">
function lookup(inputString) {
	if(inputString.length == 0) {
		// Hide the suggestion box.
		$('#suggestions').hide();
	} else {
		$.post("../functions/studentlookup-exec.php", {sName: ""+inputString+""}, function(data){
			if(data.length >0) {
				$('#suggestions').show();
				$('#autoSuggestionsList').html(data);
			}
		});
	}
} // lookup

function fill(thisValue) {
	$('#sName').val(thisValue);
	setTimeout("$('#suggestions').hide();", 200);
}

function fillStudents(str){
	$('#suggestions').hide();
	if(str.length == 0) {
		// Hide the suggestion box.
		$('#students').show();
		$('#studentList').html("Please select a student!");
	} else {
		alert("Negro");
		$.post("../functions/studentlookupentries-exec.php", {sName: ""+str+""}, function(data){
			if(data.length >0) {
				$('#students').show();
				$('#studentList').html(data);
			}
		});
	}	
}

</script>
</head>
<body>
<br />
<div>
<div>
	Student Name:
	<input size="30" id="sName" onkeyup="lookup(this.value);" type="text" />
	<input type="button" onclick="fillStudents(sName.value);" value="Search" />
</div>
<div class="suggestionsBox" id="suggestions" style="display: none;">
	<img src="../images/upArrow.png" style="position: relative; top: -12px; left: 50px" alt="upArrow" />
	<div class="suggestionList" id="autoSuggestionsList">
	</div>
</div>
</div>
<br><br>
<div id="students" style="display:none;">
<div id="studentList">
</div>
</div>
</body>
</html>

KevinM1 · September 3, 2010

There's a difference between '#sName' and sName. Your onclick won't automatically connect the two. Since you're using jQuery, why are you even bothering with inline JavaScript function calls? Give your button an id and use jQuery to handle the event.

$('#button').click(function(){
   var studentInfo = $('#sName').val();
   fillStudents(studentInfo);
});

Don't fight against the flow of the tools given. If you're using jQuery, try to code in a way that uses it to your advantage.

Also, be sure to use $(document).ready() where necessary.

aeroswat · September 3, 2010

There's a difference between '#sName' and sName. Your onclick won't automatically connect the two. Since you're using jQuery, why are you even bothering with inline JavaScript function calls? Give your button an id and use jQuery to handle the event.
$('#button').click(function(){
   var studentInfo = $('#sName').val();
   fillStudents(studentInfo);
});
Don't fight against the flow of the tools given. If you're using jQuery, try to code in a way that uses it to your advantage.

Also, be sure to use $(document).ready() where necessary.

Thanks for the answer. I'm still trying to get through this. I am sort of new to jQuery so I'm trying to understand how it all works. My reference to sName works as I intend it to in my other page

<?php
require_once('../src/auth.php');
?>
<html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Order Lookup Form</title>
<link href="../src/loginmodule.css" rel="stylesheet" type="text/css" />
<h1>Student Lookup</h1>
<script type='text/javascript' src='../src/menu<?php echo ($_SESSION['SESS_AC_TYPE'] != '0' ? $_SESSION['SESS_AC_TYPE'] : ''); ?>.js'></script>
<script type="text/javascript" src="../src/jquery-1.2.1.pack.js"></script>
<script type="text/javascript">
function lookup(inputString) {
	if(inputString.length == 0) {
		// Hide the suggestion box.
		$('#students').hide();
	} else {
		$.post("../functions/studentlookupall-exec.php", {sName: ""+inputString+"", fun: "Stu"}, function(data){
			if(data.length >0) {
				$('#students').show();
				$('#studentsList').html(data);
			}
		});
	}
} // lookup

function fillStu(thisValue) {
	$('#sName').val(thisValue);
	setTimeout("$('#students').hide();", 200);
}

function fillOrders(str){
	$('#suggestions').hide();
	if(str.length == 0) {
		// Hide the suggestion box.
		$('#orders').show();
		$('#orderList').html("Please select a student!");
	} else {
		alert("Negro");
		$.post("../functions/orderlookupentries-exec.php", {sName: ""+str+""}, function(data){
			if(data.length >0) {
				$('#orders').show();
				$('#orderList').html(data);
			}
		});
	}	
}

function fillBook(sNum,bTitle)
{
	$.post("../functions/orderlookupbook-exec.php", {SN: ""+sNum+"", BT: ""+bTitle+""}, function(data){
			if(data.length >0) {
				$('#orders').show();
				$('#orderList').html(quoteReplace(data));
			}
		});
}

function quoteReplace(str)
{
	var exp = /'/g;
	return String(str).replace(exp, "''");
}

</script>
</head>
<body>
<br />
<div>

       <div>
Student Name:
<input size="30" id="sName" onkeyup="lookup(this.value);" type="text" />
<input type="button" onclick="fillOrders(sName.value);" value="Search" />

    </div>      <div class="suggestionsBox" id="suggestions" style="display: none;">

      <img src="../images/upArrow.png" style="position: relative; top: -12px; left: 50px" alt="upArrow" />

      <div class="suggestionList" id="autoSuggestionsList">

</div>

    </div>
<div class='suggestionsBox' id='students' style='display: none;z-index:200;position:absolute;top:110;left:80'>
    <img src='../images/upArrow.png' style='position: relative; top: -12px; left: 80px' alt='upArrow' />
<div class='suggestionList' id='studentsList'>" .
</div>
</div>
</div>
<br><br>
<div id="orders" style="display:none;">
<div id="orderList">
</div>
</div>
</body>
</html>

Which seems to do the exact same thing. Anyhow I tried replacing it with the jQuery click handler and now firebug is not recognizing anything happening at all.

<?php
require_once('../src/auth.php');
require_once('../src/config.php');
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Student Lookup Form</title>
<link href="../src/loginmodule.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../src/jquery-1.2.1.pack.js"></script>
<h1>Student Lookup</h1>
<script type='text/javascript' src='../src/menu<?php echo ($_SESSION['SESS_AC_TYPE'] != '0' ? $_SESSION['SESS_AC_TYPE'] : ''); ?>.js'></script>
<script type="text/javascript">
function lookup(inputString) {
	if(inputString.length == 0) {
		// Hide the suggestion box.
		$('#suggestions').hide();
	} else {
		$.post("../functions/studentlookup-exec.php", {sName: ""+inputString+""}, function(data){
			if(data.length >0) {
				$('#suggestions').show();
				$('#autoSuggestionsList').html(data);
			}
		});
	}
} // lookup

function fill(thisValue) {
	$('#sName').val(thisValue);
	setTimeout("$('#suggestions').hide();", 200);
}

function fillStudents(str){
	$('#suggestions').hide();
	if(str.length == 0) {
		// Hide the suggestion box.
		$('#students').show();
		$('#studentList').html("Please select a student!");
	} else {
		alert("Negro");
		$.post("../functions/studentlookupentries-exec.php", {sName: ""+str+""}, function(data){
			if(data.length >0) {
				$('#students').show();
				$('#studentList').html(data);
			}
		});
	}	
}

$('#searchit').click(function(){
   var studentInfo = $('#sName').val();
   fillStudents(studentInfo);
});

</script>
</head>
<body>
<br />
<div>
<div>
	Student Name:
	<input size="30" id="sName" onkeyup="lookup(this.value);" type="text" />
	<input type="button" id="searchit" value="Search" />
</div>
<div class="suggestionsBox" id="suggestions" style="display: none;">
	<img src="../images/upArrow.png" style="position: relative; top: -12px; left: 50px" alt="upArrow" />
	<div class="suggestionList" id="autoSuggestionsList">
	</div>
</div>
</div>
<br><br>
<div id="students" style="display:none;">
<div id="studentList">
</div>
</div>
</body>
</html>

KevinM1 · September 3, 2010

Remember what I said about $(document).ready()? You've gotta use it here:

<!doctype html>
<html lang="en-us">
   <head>
      <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
      <script type="text/javascript">
         // function DEFINITIONS go here (things like fill(), fillStudent(), etc.)

         $(document).ready(function(){
            $('#searchit').click(function(){
               var studentInfo = $('#sName').val();
               fillStudent(studentInfo);
            });
         });
      </script>
   </head>

   <body>
   </body>

</html>

Why do you need to use $(document).ready()? It's due to the one problem that all beginning JavaScript developers run into: runtime errors.

JavaScript is fast. It attempts to obtain HTML element references before the page is fully loaded. This causes errors, as you can't attach, say, a click event to a non-existent element. This, in turn, causes scripts to break and newbie developers to hate JavaScript because it's "temperamental" and "doesn't work right."

For JavaScript to have a chance to work properly, you need to wait for the HTML document to fully load before having JS attempt to manipulate it. There are several ways to do this: using the window.onload() event, using a framework's ready() function (like jQuery's $(document).ready()), or by simply putting the JavaScript that actually executes logic (calls functions, manipulates elements, etc.) at the bottom of your code (I like putting it after the closing </body> tag but before the closing </html> tag).

It doesn't really matter how you do it. Just be aware that it's a first necessary step when writing any JavaScript.

---

In general, it's considered bad practice to write inline code (your original button code, for instance). The reason being it marries your logic to your presentation, making it hard to debug, edit, maintain, and build on both. I strongly suggest writing in an unobtrusive (read: no JavaScript within non-script tags in your HTML) style. It will make your life so much easier in the long run. Just a suggestion.

aeroswat · September 3, 2010

Remember what I said about $(document).ready()? You've gotta use it here:
<!doctype html><html lang="en-us">   <head>      <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>      <script type="text/javascript">         // function DEFINITIONS go here (things like fill(), fillStudent(), etc.)         $(document).ready(function(){            $('#searchit').click(function(){               var studentInfo = $('#sName').val();               fillStudent(studentInfo);            });         });      </script>   </head>   <body>   </body></html>
Why do you need to use $(document).ready()? It's due to the one problem that all beginning JavaScript developers run into: runtime errors.

JavaScript is fast. It attempts to obtain HTML element references before the page is fully loaded. This causes errors, as you can't attach, say, a click event to a non-existent element. This, in turn, causes scripts to break and newbie developers to hate JavaScript because it's "temperamental" and "doesn't work right."

For JavaScript to have a chance to work properly, you need to wait for the HTML document to fully load before having JS attempt to manipulate it. There are several ways to do this: using the window.onload() event, using a framework's ready() function (like jQuery's $(document).ready()), or by simply putting the JavaScript that actually executes logic (calls functions, manipulates elements, etc.) at the bottom of your code (I like putting it after the closing </body> tag but before the closing </html> tag).

It doesn't really matter how you do it. Just be aware that it's a first necessary step when writing any JavaScript.

---

In general, it's considered bad practice to write inline code (your original button code, for instance). The reason being it marries your logic to your presentation, making it hard to debug, edit, maintain, and build on both. I strongly suggest writing in an unobtrusive (read: no JavaScript within non-script tags in your HTML) style. It will make your life so much easier in the long run. Just a suggestion.

Thank you sir. I think I will take that advice and start using it. I had tried that .ready() before but realized I wasn't putting the function() in there so it wasn't calling what was inside of it. I have another problem with a different project now but I think I will go ahead and make a new thread for this one since its completely outside this.

Sign In

Going crazy with something simple...

Recommended Posts

aeroswat

Link to comment

Share on other sites

KevinM1

Link to comment

Share on other sites

aeroswat

Link to comment

Share on other sites

KevinM1

Link to comment

Share on other sites

aeroswat

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information