On my website I have a form that the user can fill out to update a record in the database, the form is below...
<form class='bill-upd'>
<input type='hidden' value='".$info['rand']."' name='rand2' id='rand2'>
<input type='hidden' value='".$info['id']."' name='billid' id='billid'>
Total <input type='text' id='total' name='total' title='".$info['bill']."' class='defaultText' /><br />
Bill name<input type='text' id='bill-name' name='bill-name' title='".$info['bill_name']."' class='defaultText' /><br />
bill descriptiion <input type='text' id='bill-description' name='bill-description' title='".$info['bill_description']."' class='defaultText' /><br />
category <select id='bill-category' name='bill-category'>
<option value='Household Bills'>Household Bills</option>
<option value='Social Activities'>Social Activities</option>
</select>
<input type='button' value='Save' class='bill-upd-submit' />
</form>
I then use AJAX to send this data to my table and update the record accordingly, this works fine.
AJAX
$(".bill-upd-submit").click(function() {
var elem = $(this);
$.post("update_bill.php", elem.parent(".bill-upd").serialize(), function(data) {
// fade new data in
elem.closest('li').html(data);
});
});
PHP
$uid = $_SESSION['oauth_id'];
$id = mysql_real_escape_string($_POST['billid']);
$bill = mysql_real_escape_string($_POST['total']);
$billname = mysql_real_escape_string($_POST['bill-name']);
$billdescription = mysql_real_escape_string($_POST['bill-description']);
$billcolour = mysql_real_escape_string($_POST['bill-category']);
$rand = mysql_real_escape_string($_POST['rand2']);
#update Record
$query = mysql_query("UPDATE `outgoings` SET id = '$id', user_id = '$uid', bill = '$bill', bill_name = '$billname', bill_description = '$billdescription', bill_colour = '$billcolour', rand = '$rand' WHERE user_id = '$uid' AND rand = '$rand' ") or die(mysql_error());
Print "<span class='cost'>£".$bill . "</span> ";
Print "<h4 class='bill-name'>".$billname . "</h4> ";
Print "<p class='bill-details'><span class='bill-category'>".$billdescription . "</span> ";
Print "<span class='bill-description'>". $billcolour . "</span></p>";
echo "<a href='#' class='edit-bill'>edit</a>
<form class='bill-upd show'>
<input type='hidden' value='".$rand."' name='rand2' id='rand2'>
<input type='hidden' value='".$billname."' name='billid' id='billid''>
Total <input type='text' title='".$bill."' id='total' name='total' value='".$bill."'/><br />
Bill name<input type='text' id='bill-name' name='bill-name' value='".$billname."'/><br />
bill descriptiion <input type='text' id='bill-description' name='bill-description' value='".$billdescription."'/><br />
bill colour<input type='text' id='bill-colour' name='bill-colour'value='".$billcolour."'/>
<input type='button' value='Save' class='bill-upd-submit' />
</form>
<form class='delete-bill'>
<input type='hidden' value='".$rand."' name='rand2' id='rand2'>
<input type='button' value='delete' class='delete' />
</form>
";
Once updated my Ajax then returns the data all laid out as it should be, only this time around, If I fill the form out it doesnt update my table, If i refresh my page I can fill it out and it works however, has anybody an idea of what I could be doing wrong? Thanks
Because you are loading the content dynamically so your initial binding will not work for that. Use jQuery on for binding like this.
$(function(){
$(document).on("click",".bill-upd-submit").click(function(e) {
e.preventDefault();
var elem = $(this);
$.post("update_bill.php", elem.parent(".bill-upd").serialize(), function(data){
elem.closest('li').html(data);
});
});
});
jQuery on works for current and future elements (loaded via ajax or so).
jQuery on is available from 1.7+ . So if you are using a version prior to that, conside live