关于AJAX返回的更新表单

时间:2012-04-27 19:16:14

标签: php jquery mysql ajax

在我的网站上,我有一个表格,用户可以填写更新数据库中的记录,表格如下......

 <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>   

然后我使用AJAX将此数据发送到我的表并相应地更新记录, 这样可以正常

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'>&pound;".$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>   

         "; 

一旦更新我的Ajax然后返回所有布局的数据,只有这一次,如果我填写表格,它不更新我的表,如果我刷新我的页面,我可以填写它,但它工作但是,有谁知道我可能做错了什么?感谢

1 个答案:

答案 0 :(得分:0)

因为您正在动态加载内容,所以您的初始绑定不适用于此。使用jQuery on进行绑定。

$(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适用于当前和未来的元素(通过ajax加载)。

http://api.jquery.com/on/

jQuery on可从1.7+开始使用。因此,如果您使用之前的版本,请考虑live