Can't see my error (jQuery)

1andyw · 02-23-2009, 04:58 PM

Hi,

Trying to populate a select statement with a jquery ajax call. The span element is populated if it outside of the form. When I copy and past the span element within the select statement, it doesn't produce the options. I can't figure out what I"m doing wrong. Would appreciate your help.

This works:

Code:

<html>
<head><title>This Title</title>
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$.post("getpage.php",function(data){
$('#pagechoice').html(data);
	});
});
</script>
</head>
<body>
<h1>Subject is Page Choice</h1>
<form name="page_select" id="pageselect" method="post" action="showpage.php">
<select name="page" size="1" style="width: 30em">
</select>   
</form>
<span id="pagechoice"></span>
</body>
</html>

This doesn't work. The span has been moved up into the select statement:

Code:

<html>
<head><title>This Title</title>
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$.post("getpage.php",function(data){
$('#pagechoice').html(data);
	});
});
</script>
</head>
<body>
<h1>Subject is Page Choice</h1>
<form name="page_select" id="pageselect" method="post" action="showpage.php">
<select name="page" size="1" style="width: 30em">
<span id="pagechoice"></span>
</select>   
</form>
</body>
</html>

This is the process page:

Code:

<?php
include("conandy.php");
error_reporting(E_ALL);
if (!$conn)
  {
  die('Could not connect: ' . mysql_error());
  }
$rs = mysql_select_db("andy",$conn);
$sql = "SELECT * FROM  page LIMIT 250";
if(!$sql){echo "Unable to select" . mysql_error();}
$rs = mysql_query($sql,$conn);
while($row=mysql_fetch_array($rs)){
	echo("<option>"  . $row['title'] . "</option>");
	}
mysql_free_result($rs);		
mysql_close($conn);
?>

Thank you,

Andy

harbingerOTV · 02-24-2009, 06:34 PM

okay so the process page is your getpage.php? When it displays into the span when not in the form, it looks something like so:

Code:

<option>stuff 1</option>
<option>stuff 2</option>
<option>stuff 3</option>

correct?

If that is the case it's probably because the span doesn't belong inside a select.

maybe try this:

Code:

<script type="text/javascript">
$(document).ready(function(){
$.post("getpage.php",function(data){
$('select#page').html(data);
	});
});
</script>

<select name="page" id="page" size="1" style="width: 30em">
</select>

1andyw · 02-24-2009, 07:38 PM

With that, the options appear as a list above the form window for the seclect but not within the select, ie:

News and Information
Employment Opportunities
Training Opportunities
Warming Center

When I open the Firebug consol, the response is:

Quote:

<option>News and Information</option><option>Employment Opportunities</option><option>Training Opportunities</option><option>Warming Center</option>

Seems as though the ajax is doing it's stuff OK, but I'm going something wrong with the form part. I've done this a hundred times with just php/mysql but this has me stumped.

Thanks for your interest.

Andy

Eldarrion · 02-24-2009, 09:05 PM

What harbingerOTV posted seems to work okay on my side. Did you add an id "page" to the select and remove the span with the same id from the page? If you haven't, the php would just be spitting the code out inside the span, instead of putting it within the <select> tags. Hope this helps. If not... could you provide us with a link to have a look at or the way your code looks after the changes you made?

1andyw · 02-24-2009, 11:25 PM

My bad. harbingerOTV's solution is dead-on. I failed to read his code correctly at first. Now is see.

Thank you, harbingerOTV

Thank you, Eldarrion

Andy