2010-12-15 10 views
0

私は1週間の回答を探していましたが、私の理解は私が見つけたものの大部分を追うには十分ではないと思います。Jquery、Ajax、PHP:mysqlエントリを編集する

私はチュートリアルに基づいて単純な「データベースにクライアントを追加」機能を使用していますが、「クライアントの編集」ボタンを使用してデータベースからレコードを取得できるように変更しました。 「編集クライアント」レコードリストを示し

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

(私はこれがずさんである知っていると私はそれが「編集クライアントは、」ボタンが押されたときにフォームを移入持っていることを好むだろうが、私はかなりそこにいませんよまだ私の理解で)

私はリストレコードを持っていますが、 "レコードリスト"の各レコードの隣には、編集ボタン(レコードごとに1つ)があります。ここから(機能していない)$( '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>'    


       ; 

?> 

答えて

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

幸運。

+0

甘い仕事! – Fred

0

を追加または編集のいずれかにすべてのデータを渡しますAjaxの機能を呼び出す必要があり、その後、あなたも一緒に(/編集を追加)アクションを渡すことができます。その後、PHPスクリプトは、データに対してUPDATEコマンドまたはINSERTコマンドを実行するかどうかを知ります。

運が良かった!

+1

私はいくつかの学習をしているようです。 – Fred

+0

はい、本当にありがとうございます。しかし、あなたは結果を見ることでうまくやっているように見えます。あなたは同じ方法で編集と更新のためのajax呼び出しを行いますが、PHPスクリプトは異なっています。 – CrowderSoup

関連する問題