Jquery,Ajax,PHP:编辑mysql条目

时间:2010-12-15 19:09:37

标签: php jquery mysql

我一直在寻找一个星期的答案,但我认为我的理解不够高,无法完成我发现的大部分内容。

我正在使用基于教程的简单“添加客户端到数据库”功能,我现在已对其进行了修改,以便我可以通过“编辑客户端”按钮从数据库中检索记录。 “编辑客户端”显示记录列表

$('button.edit').click(function() {
     //alert('this is an alert message');
  $('form#submit').hide(function(){$('div.showRecords').fadeIn()});  
 });

(我知道这很草率,当我按下“编辑客户端”按钮时,我宁愿让它填充表单,但我的理解还没有完全存在)

我有列表记录工作,但“记录列表”中每个记录旁边是一个编辑按钮(每个记录一个)。从这里(不工作)我想能够$('button.editRecords')。点击(function(){以便能够编辑表格中的各个记录......我感觉有点过头了。 ..

在PHP函数中,ID通过url传递到表单页面,该页面根据ID调用记录。我猜我需要做一些类似的事情,我正在检索表格,这是我开始追逐我的尾巴......有什么想法吗?

<script type"text/javascript"> 
$(document).ready(function(){

 $('button.edit').click(function() {
     //alert('this is an alert message');
  $('form#submit').hide(function(){$('div.showRecords').fadeIn()});  
 });

 $('button.editRecords').click(function() {
     //alert('this is an alert message');
  $('form#submit').hide(function(){$('div.updateRecords').fadeIn()});  
 });



$("form#submit").submit(function() {
 // we want to store the values from the form input box, then send via ajax below
 var fname     = $('#fname').attr('value');
 var lname     = $('#lname').attr('value'); 
  $.ajax({
   url: "ajax.php",
   type: "POST",
   data: "fname="+ fname +"& lname="+ lname,
   success: function(data)
    {                     
     if(data.success == 1)
     {   
      alert ('success');
      //$('form#submit').hide(function(){$('div.success').fadeIn()});
     }  
     else  
     {  
      alert ('failure');
      //$('form#submit').hide(function(){$('div.failed').fadeIn()});
     }     
     }
  });   
 return false;
 });

$("form#form1").submit(function() {
 // we want to store the values from the form input box, then send via ajax below
 var fname     = $('#fname').attr('value');
 var lname     = $('#lname').attr('value'); 
  $.ajax({
   url: "update_ac.php",
   type: "GET",
   data: "fname="+ fname +"& lname="+ lname +"& id="+ id,
   success: function(data)
    {                     
     if(data.success == 1)
     {   
      alert ('success');
      //$('form#submit').hide(function(){$('div.success').fadeIn()});
     }  
     else  
     {  
      alert ('failure');
      //$('form#submit').hide(function(){$('div.failed').fadeIn()});
     }     
     }
  });   
 return false;
 });

});
</script>


<body>
<br><br><br><br><br><br><br><br>  

<form id="submit" method="post">
    <fieldset>
        <legend>Enter Information</legend>

                    <label for="fname">Client First Name:</label>
        <input id="fname" class="text" name="fname" size="20" type="text">

                    <label for="lname">Client Last Name:</label>
        <input id="lname" class="text" name="lname" size="20" type="text">

        <button class="button positive"> <img src="../images/icons/tick.png" alt=""> Add Client </button>
    </fieldset>
</form>

<div class="listRecords">
 <button class="edit"> <img src="../images/icons/tick.png" alt="">Edit Clients</button>  
</div> 

<div class="showRecords" style="display:none;">
    <?php $sql="SELECT * FROM clients";
    $result=mysql_query($sql);
 ?>
    <table width="400" border="0" cellspacing="1" cellpadding="0">
        <tr>
            <td>
                <table width="400" border="1" cellspacing="0" cellpadding="3">
                    <tr>
                     <td colspan="4"><strong>List data from mysql </strong> </td>
                    </tr>

                    <tr>
                     <td align="center" style="background-color:#FFF;"><strong>Name</strong></td>
                     <td align="center" style="background-color:#FFF;"><strong>Lastname</strong></td>
                     <td align="center" style="background-color:#FFF;"><strong>Edit</strong></td>
                    </tr>
                 <?php while($rows=mysql_fetch_array($result)){ ?>
                    <tr>
                     <td><? echo $rows['fname']; ?></td>
                     <td><? echo $rows['lname']; ?></td>
                     <td align="center">
                         <!--- <a href="updated2.php?id=<? //echo $rows['id']; ?>">---><!--- This is where the form carried the id to updated2.php that I need to replicate in my jquery function --->
                         <button class="editRecords"><img src="../images/icons/edit.gif" height="20" width="58" alt="Edit Record"><? echo $rows['id']; ?></button>
                            </a>
                        </td>
                    </tr>
                 <?php } ?>
                </table>
            </td>
        </tr>
 </table>
</div>
<div class="updateRecord" style="display:none;">

<?php
 $id=$_GET['id'];

 // Retrieve data from database 
 $sql="SELECT * FROM clients WHERE id='$id'";
 $result=mysql_query($sql);

 $rows=mysql_fetch_array($result);
?>
<table width="400" border="0" cellspacing="1" cellpadding="0">
    <tr>
        <form name="form1" method="post">
            <td>
                <table width="100%" border="0" cellspacing="1" cellpadding="0">
                    <tr>
                     <td>&nbsp;</td>
                     <td colspan="3"><strong>Update Records</strong> </td>
                    </tr>
                    <tr>
                        <td align="center">&nbsp;</td>
                        <td align="center">&nbsp;</td>
                        <td align="center">&nbsp;</td>
                        <td align="center">&nbsp;</td>
                    </tr>
                    <tr>
                        <td align="center">&nbsp;</td>
                        <td align="center"><strong>Name</strong></td>
                        <td align="center"><strong>Lastname</strong></td>
                    </tr>
                    <tr>
                        <td>&nbsp;</td>
                        <td align="center"><input name="fname" type="text" id="fname" value="<? echo $rows['fname']; ?>"></td>
                        <td align="center"><input name="lname" type="text" id="lname" value="<? echo $rows['lname']; ?>" size="15"></td>
                    </tr>
                    <tr>
                        <td>&nbsp;</td>
                        <td><input name="id" type="hidden" id="id" value="<? echo $rows['id']; ?>"></td>
                        <td align="center"><input type="submit" name="Update" value="Update"></td>
                        <td>&nbsp;</td>
                    </tr>
                </table>
            </td>
        </form>
    </tr>
</table>
</div>

我偶然发现了可能有所帮助的事情。我应该编辑原始的ajax处理文件,以便能够添加,查看和编辑项目,而不是使用不同的ajax处理文件吗?


编辑12/20

我现在已经完成了所有工作,一旦我收到这些错误消息,我会将结果发布给其他人。在最后一篇文章中,一旦最终编辑被提交回数据库,错误对话框总是错误​​地说它失败了,但信息确实在数据库中得到更新。这是发生错误的最终ajax的代码。

<?php 
include_once '../includes/opendb.php';
    include_once 'header.php';
    ?>
<script type"text/javascript">
$(document).ready(function(){

$('button.buttonpositive2').click(function () {
    //$("form#submit2").click(function() {
        // we want to store the values from the form input box, then send via ajax below
        var fname2     = $('#fname2').attr('value');
        var lname2     = $('#lname2').attr('value');
        var id        = $('#id').attr('value');
            $.ajax({
                url: "ajax4.php",
                type: "POST",
                //data: "fname="+ fname +"& lname="+ lname,
                data: "id="+ id +"&fname="+ fname2 +"&lname="+ lname2,
                success: function(data)
                    {                     
                        if(data.success == 'y')
                        {   
                            alert ('success');
                            //$('form#submit').hide(function(){$('div.success').fadeIn()});
                        }  
                        else  
                        {  
                            alert ('failure');
                            //$('form#submit').hide(function(){$('div.failed').fadeIn()});
                        }    
                     }
            });      
        return false;
        });

/*$('button.positive2').click(function () {
                var fname     = $(this).attr('value');
                var lname     = $(this).attr('value');
                var id        = $(this).attr('value');

                //alert('this is the edit button', 'Alert Dialog');
                  $('div.updateRecord').fadeOut(function(){$('div.saveRecord').load("ajax4.php?id="+ id +"& fname="+ fname +"& lname="+ lname).fadeIn()});*/


});
</script>
<?php

echo '</head>
      <body>';

    $id=$_GET['id'];
    $sql="SELECT * FROM clients WHERE id='$id'";
    $result=mysql_query($sql);
    $rows=mysql_fetch_array($result);



    echo 
'<form id="submit2" method="post">
    <fieldset>
        <legend>Edit Information</legend>

                    <label for="fname2">Client First Name:</label>
        <input id="fname2" class="fname2" name="fname2" size="20" type="text" value="' . $rows['fname'] . '">

                    <label for="lname2">Client Last Name:</label>
        <input id="lname2" class="lname2" name="lname2" size="20" type="text" value="' . $rows['lname'] . '">

        <input id="id" name="id" type="text" class="text"  value="' . $rows['id'] . '">

        <button class="buttonpositive2"> <img src="../images/icons/tick.png" alt=""> Save Edit </button>
    </fieldset>
</form>'            


                ;

?>

2 个答案:

答案 0 :(得分:1)

我建议使用加载功能显示您要编辑的记录。

将记录的id值放在按钮的ID属性中,确保showRecords div也为空。

$('button.edit').click(function() {
    // Retrieves the id of the record you want to edit
    var id = $(this).attr("id"); 
    $('form#submit').hide(function(){$('div.showRecords').load("record.php?id="+id).fadeIn()});  
 });

祝你好运。

答案 1 :(得分:0)

当你点击添加/编辑按钮时,你应该调用一个Ajax函数,它将所有数据传递给添加或编辑,然后你也可以传递一个动作(添加/编辑)。然后,您的PHP脚本将知道对数据运行UPDATE或INSERT命令。

祝你好运!