Why does this code kill my "for" loop???

[ShootingBlanks]

Hello.  I had some code that kept repeating itself over and over again, with the only variance being some named elements changing.  All the named elements ended in a sequential number, so I figured I'd just put one of the repeating blocks into a "for" loop and then make that sequential number at the end of the named elements into the variable in the loop.

 

Again, the code worked fine when copied/pasted over and over, but now it doesn't do anything.  Here's one of the code snippets outside of the loop (which worked):

$(document).ready(function () {
	$("#SelectDiv1").change(function() {
		if ($("#DD1").val() != "0") {
			$('#SelectDiv2').hide();
			$('#SelectDiv3').hide();
			$('#SelectDiv4').hide();
			$('#SelectDiv2').show();
			$.ajax({
				type: "POST",
				url: "draw_select.php",
				data: "val1=" + $('#DD1').val() + "&base_val=2",
				success: function(msg){
					$('#SelectDiv2').html(msg);
				} // end success
			}) // end ajax
		} else {
			$('#SelectDiv2').hide();
			$('#SelectDiv3').hide();
			$('#SelectDiv4').hide();
		} // end if 
});  // end change function
});

 

Here's the snippet within the loop (which doesn't work, for some reason):

for (i=1; i<=4; i++) {
	alert(i);
	$(document).ready(function () {
		$("#SelectDiv"+i).change(function() {
			if ($("#DD"+i).val() != "0") {
				$('#SelectDiv2').hide();
				$('#SelectDiv3').hide();
				$('#SelectDiv4').hide();
				$('#SelectDiv'+(i+1)).show();
				$.ajax({
					type: "POST",
					url: "draw_select.php",
					data: "val"+i"=" + $('#DD'+i).val() + "&base_val="+(i+1),
					success: function(msg){
						$('#SelectDiv'+(i+1)).html(msg);
					} // end success
				}) // end ajax
			} else {
				$('#SelectDiv2').hide();
				$('#SelectDiv3').hide();
				$('#SelectDiv4').hide();
			} // end if
		});  // end change function
	});
}

 

You can see there's an "alert" as the first part of the loop.  That "alert" never shows up.  However, if you comment out everything in the loop after the "alert", then the "alert" works.  So something else in that loop is causing the whole thing to not work.  I find it odd that the first "alert" wouldn't work, though, since it should be the first thing that happens before any of the other code is executed in the loop, right???

 

Thanks in advance for any help that can be offered!

[KevinM1]

Take your $(document).ready() out of your loop.  The loop should be inside $(document).ready(), not the other way around.

[ShootingBlanks]

Take your $(document).ready() out of your loop.  The loop should be inside $(document).ready(), not the other way around.

 

Here's where I'm at now.  It still doesn't work (getting the same results).  Let me know if I understood you properly:

 

$(document).ready(function () {
for (i=1; i<=5; i++) {
	alert(i);
	$("#SelectDiv"+i).change(function() {
		if ($("#DD"+i).val() != "0") {
			$('#SelectDiv2').hide();
			$('#SelectDiv3').hide();
			$('#SelectDiv4').hide();
			$('#SelectDiv'+(i+1)).show();
			$.ajax({
				type: "POST",
				url: "draw_select.php",
				data: "val"+i"=" + $('#DD'+i).val() + "&base_val="+(i+1),
				success: function(msg){
					$('#SelectDiv'+(i+1)).html(msg);
				} // end success
			}) // end ajax
		} else {
			$('#SelectDiv2').hide();
			$('#SelectDiv3').hide();
			$('#SelectDiv4').hide();
		} // end if
	});  // end change function
} // end "for" loop
});

 

Thanks!

[KevinM1]

Do you have firebug installed?  If so, is it telling you anything?

[ShootingBlanks]

Do you have firebug installed?  If so, is it telling you anything?

 

I actually do have firebug installed, but I never use it so I'm not really sure what I'd be looking for when I pull up the main panel (by clicking in the bottom-right of the browser window).

 

I do notice one of those JS errors on the bottom-left of IE, and when I double-click to open it, it says:

 

Line: 37
Char: 19
Error: Expected '}'
Code: 0
URL: http://localhost/jQuery/configurator/configurator.php

 

However, that confuses me more because line 37 of the PHP page is nothing more than "}".

 

[KevinM1]

Do you have firebug installed?  If so, is it telling you anything?

 

I actually do have firebug installed, but I never use it so I'm not really sure what I'd be looking for when I pull up the main panel (by clicking in the bottom-right of the browser window).

 

I do notice one of those JS errors on the bottom-left of IE, and when I double-click to open it, it says:

 

Line: 37
Char: 19
Error: Expected '}'
Code: 0
URL: http://localhost/jQuery/configurator/configurator.php

 

However, that confuses me more because line 37 of the PHP page is nothing more than "}".

 

 

That's because IE's error console sucks, and never gives the correct error.  That's why it's important to use Firebug as its error messages are much better.

 

What do you get when you click on Firebug?  If there's a JavaScript error, it should be there.

 

EDIT: Also, can you show more code?  I just want to see exactly where your JS is situated in relation to the rest.

[ShootingBlanks]

What do you get when you click on Firebug?  If there's a JavaScript error, it should be there.

 

Unless I'm missing something really obvious, I don't see anything indicating any errors when I pull up Firebug.

 

EDIT: Also, can you show more code?

 

Here's the page's code in its entirety.  You'll notice that underneath the code I've been asking about is a bunch of (seemingly) repeats of that code, all commented out.  That's because that's what I was trying to get away from.  If I comment out the looped code and UN-comment all the other code underneath (that is currently commented), then the page works 100% fine (even in IE!):

 

<?php require_once('Connections/connection.php'); ?>
<?php
/********************************************************************************************/

// *** Get a list of level1 items in the database to populate the first drop-down menu with
mysql_select_db($database_db, $db);
$query_level1 = "SELECT *
			 FROM level1
			 ORDER BY value";

// *** Execute select statement to retrieve categories ***
$level1 = mysql_query($query_level1, $db) or die(mysql_error());
// *** Fetch row ***
$row_level1 = mysql_fetch_assoc($level1);

/********************************************************************************************/

// *** Get number of "level" tables
mysql_select_db($database_db, $db);
$levels = mysql_query("show tables like 'level%'",$db) or die ('error reading database');
$num_levels = mysql_num_rows($levels);

/********************************************************************************************/
?>
<!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=utf-8" />
<script type="text/javascript" src="js/jquery-min.js"></script>
<script type="text/javascript">
// *** Drop-down menu functionality *** //
$(document).ready(function () {
for (i=1; i<=<?php echo $num_levels - 1 ?>; i++) {
	alert(i);
	$("#SelectDiv"+i).change(function() {
		if ($("#DD"+i).val() != "0") {
			$('#SelectDiv2').hide();
			$('#SelectDiv3').hide();
			$('#SelectDiv4').hide();
			$('#SelectDiv'+(i+1)).show();
			$.ajax({
				type: "POST",
				url: "draw_select.php",
				data: "val"+i"=" + $('#DD'+i).val() + "&base_val="+(i+1),
				success: function(msg){
					$('#SelectDiv'+(i+1)).html(msg);
				} // end success
			}) // end ajax
		} else {
			$('#SelectDiv2').hide();
			$('#SelectDiv3').hide();
			$('#SelectDiv4').hide();
		} // end if
	});  // end change function 
} // end "for" loop
});

/*
// *** First drop-down menu functionality *** //
$(document).ready(function () {
$("#SelectDiv1").change(function() {
	if ($("#DD1").val() != "0") {
		$('#SelectDiv2').hide();
		$('#SelectDiv3').hide();
		$('#SelectDiv4').hide();
		$('#SelectDiv2').show();
		$.ajax({
			type: "POST",
			url: "draw_select.php",
			data: "val1=" + $('#DD1').val() + "&base_val=2",
			success: function(msg){
				$('#SelectDiv2').html(msg);
			} // end success
		}) // end ajax
	} else {
		$('#SelectDiv2').hide();
		$('#SelectDiv3').hide();
		$('#SelectDiv4').hide();
	} // end if
});  // end change function
});

// *** Second drop-down menu functionality *** //
$(document).ready(function () {
$("#SelectDiv2").change(function() {
	if ($("#DD2").val() != "0") {
		$('#SelectDiv3').hide();
		$('#SelectDiv4').hide();
		$('#SelectDiv3').show();
		//alert($("#DD2").val());
		$.ajax({
			type: "POST",
			url: "draw_select.php",
			data: "val2=" + $('#DD2').val() + "&base_val=3",
			success: function(msg){
				$('#SelectDiv3').html(msg);
			} // end success
		}) // end ajax
	} else {
		$('#SelectDiv3').hide();
		$('#SelectDiv4').hide();
	} // end if
});  // end change function
});

// *** Third drop-down menu functionality *** //
$(document).ready(function () {
$("#SelectDiv3").change(function() {
	if ($("#DD3").val() != "0") {
		$('#SelectDiv4').hide();
		$('#SelectDiv4').show();
		$.ajax({
			type: "POST",
			url: "draw_select.php",
			data: "val3=" + $('#DD3').val() + "&base_val=4",
			success: function(msg){
				$('#SelectDiv4').html(msg);
			} // end success
		}) // end ajax
	} else {
		$('#SelectDiv4').hide();
	} // end if
});  // end change function
});
*/
</script>
<title>Test configurator</title>
</head>

<body>

<div id="SelectDiv1">
<select name="SelectName1" id="DD1">
<option value="0">--SELECT AN OPTION--</option>
<?php
do { ?>
	<option value="<?php echo $row_level1['id1']?>"><?php echo $row_level1['value']?></option>
<?php
} while ($row_level1 = mysql_fetch_assoc($level1));
	mysql_data_seek($level1, 0);
	$row_level1 = mysql_fetch_assoc($level1);
?>
</select>
</div>

<div id="SelectDiv2"></div>

<div id="SelectDiv3"></div>

<div id="SelectDiv4"></div>
</body>
</html>

[ShootingBlanks]

EDIT TO MY POST ABOVE:  Through commenting, I've isolated the problem to the following bit of code within the loop:

 

$.ajax({
				type: "POST",
				url: "draw_select.php",
				data: "val"+i"=" + $('#DD'+i).val() + "&base_val="+(i+1),
				success: function(msg){
					$('#SelectDiv'+(i+1)).html(msg);
				} // end success
			}) // end ajax

 

Oddly enough, that same code works fine in the iterations of this that are outside the loop.  So, for some reason, putting that code within a loop is messing it up!  Any thoughts???

[KevinM1]

Looks like a scope issue.  Can you alert i there, or somehow see whether or not it's being passed into the object there?

[ShootingBlanks]

I got it! (sort of).  The problem was here:

 

"val"+i"="

 

I was missing a "+".  It should have been:

 

"val"+i+"="

 

I'm definitely getting no errors now (which was the point of this thread, I suppose), but the code still is not working the same (or at all, for that matter) using the loop as it did when I had everything re-typed over and over again outside of the loop...

 

...Hmmmmm.