Jquery update select with myssql data on add

Hello all,
I’m fairly new to jQuery, but for the most part have been getting the hang of it. However, I’m stuck on something, and I just need some ideas on how to accomplish it. I have a select that is populated from a mysql database, and I have a text input that if your option isn’t listed, you can add it and it should add to the table that is populating the initial select. And I want to do it all without reloading the page, which is where jQuery comes in. Now, I’ve managed to have the text input add to the database without problems and echo back a “success” statement using ajax(). But I’m kind of lost on how to tell it to reload the data in the select.

The html/php:


<select name="author" id="author">
            	<option value="null" selected="selected">--Select Author--</option>
			<? $query="SELECT * FROM sp_author ORDER BY author_l DESC";
            $results=mysql_query($query);
            while($row=mysql_fetch_array($results, MYSQL_ASSOC)){
                extract($row);
			?>
            <option value="<?php echo ($author_id);?>"> <? echo($author_l);?> </option>
            <?php }	?>
        </select>

<div id="AuthorInput">
     <label>First Name</label>
     <input type="text" name="AuthorF" id="AuthorF" /></td>
     <label>Last Name</label>
     <input type="text" name="AuthorL" id="AuthorL" />
     <input type="submit" name="AuthorAdd" id="AuthorAdd" value="create new" />
</div>


The jQuery


$("#AuthorAdd").click(function(event){
		var AuthorF     = $('#AuthorF').attr('value');  
		var AuthorL     = $('#AuthorL').attr('value');
		var AuthorAdd    = "AuthorAdd";
		$.ajax({  
			type: "POST", 	 
			url: "ajaxInsertData.php",  
			data: "AuthorF="+ AuthorF +"& AuthorL="+ AuthorL+"& AuthorAdd="+ AuthorAdd,  
			success: function(){  
				$('#AuthorInput').append("Success!");
			},
			error: function(){  
				alert("bloody hell!");
			} 
	
 		});  
 		return false;
	 
		event.preventDefault();
	});


The php that handles the database insert sent off from ajax:


         $AuthorF        = htmlspecialchars(trim($_POST['AuthorF']));  
	 $AuthorL        = htmlspecialchars(trim($_POST['AuthorL']));  
	 
	 $addAuthor  = "INSERT INTO sp_author (author_f,author_l) VALUES ('$AuthorF','$AuthorL')";  
	 $rs=mysql_query($addAuthor,$db);

I think I need to do something on success, but I’m kind of lost for what I should do. I thought about using load() and just having another php file that basically replaces the current select with the same thing; but it would show the newer data having just been called, but that seems like it’s a crass way to handle it. I feel like there should be a way to say “run that mysql statement again” on success but my google foo is failing me.

Thanks, Mittineague. It’s an interesting suggestion. But I want to hit the database a second time to make sure that the items showing in the select list are in fact current with what is in the database table.

Hi aquagrrl, welcome to the forums.

I’m no jquery expert by any means, but maybe you could have it append another option to the select without another trip to the server?