Jquery, Ajax, PHP: Editing mysql entries_问答_开发者

I've been searching for an answer for a week, but I think my understanding isn't high enough to follow most of what I find.

I'm using a simple "add client to a database" function based on a tutorial, I've now modified it so that I can retrieve records from the database via the "Edit Clients" button. The "Edit Clients" shows the record list

$('button.edit').click(function() {
     //alert('this is an alert m开发者_如何学JAVAessage');
  $('form#submit').hide(function(){$('div.showRecords').fadeIn()});  
 });

(I know this is sloppy and I'd prefer to have it populate the form when the "Edit Clients" button is pushed, but I'm not quite there yet in my understanding)

I have the list records working, but next to each record in the "record list" is an edit button (one for each record). From here (not working) I want to be able to $('button.editRecords').click(function() { to be able to edit the individual records from the form... I am feeling a bit over my head...

In the PHP function the ID gets passed in the url to the form page which calls the record based on the ID. I'm guessing I need to do something similar where I am retrieving the form, this is where I start chasing my tail... Any ideas?

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

I just stumbled on something that might help. Should I just be editing my original ajax processing file to be able to add, view, and edit items rather than doing this with different ajax processing files?

Edit 12/20

I've got everything working now and once I get these error messages working I'll post the results for others. Where I'm stuck at the last piece, is once the final edit gets submitted back to the database the error dialog always, incorrectly, says it failed, but the information does get updated in the database. Here is the code for the final ajax where the error occurs.

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


                ;

?>

I recommend using the load function for displaying the record you want to edit.

Place the id value of the record in the ID attribute of the button, make sure your showRecords div is empty as well.

$('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()});  
 });

Good Luck.

When you click the add/edit button you should call an Ajax function which will pass all the data to either add or edit, then you can pass an action (add/edit) along too. Then your PHP script will know to either run an UPDATE or INSERT command on the data.

Best of luck!