ajax update mysql field without refreshing page - php

Question

I'm trying to get my announce box that has a X button on the top right, to be clicked and it remove the message, and update a mysql query field without refreshing the page
HTML
<form id="myForm" action="delanno.php" method="post">
<div class='announce-box'>
<div class='announce-message'>$show_message</div>
<div class='announce-delete'>
<a class='deleter'>
<button type='submit' id='sub' name='$show_id' style='height:35px; width:40px'>
<img src='../css/images/delete_25.png' width='25' height='25'>
</button>
</a>
</div>
</div>
</form>
php (delanno.php)
<?php
include("conn.php");
foreach($_POST as $name => $content) { // Most people refer to $key => $value
$something = "$name"; //ignore this, i did this for testing purposes
$query = mysql_query("UPDATE announce SET active='disabled' WHERE id='$something' ") or die(mysql_error());
}
?>
ajax // This is supposed to update the php field without refreshing or sending to another page
<script type="text/javascript">
$("#sub").click( function() {
$.post( $("#myForm").attr("action"),
$("#myForm :input").serializeArray(),
function(info){ $("#result").html(info);
});
});
$("#myForm").submit( function() {
return false;
});
</script>
more ajax // this is supposed to remove the announce div when the delete button is clicked.
<script>
$('.deleter').on('click', function(){
$(this).closest('.announce-box').remove();
})
</script>
if i remove
return false
it sends it to the php page and it obviously works. i'm not sure what to do from here
EDIT: The script doesn't work unless it's being sent to the php page

Answer 1

Javascript selecting DOM elements should be inside a ready function when the DOM is actually ready, e.g.
$(document).ready(function() {
// $('#some-id') .. etc
});
.
I just searched SO for a duplicate, I think it's out there but I didn't find it, so just posting as an answer and if someone else does, just flag it.