Inline Editing

I was trying since two days for this code. I am new to PHP as well.

My index.php code is

<html>
<head>
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.9.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.qtip-1.0.0.min.js"></script>
<script type="text/javascript">

$(document).ready(function(){
  $(".edit").click(function(){
    var tr = $(this).closest("tr");

    tr.find(".td").each(function(){
      var name = $(this).attr("title");
      var value = $(this).html();
      var input = "<input type='text' name='"+name+"' value='"+value+"' />";
      $(this).html(input);
    });

    var submit = "<input type='button' name='Submit' value='Submit' />";
    tr.find(".button").html(submit);

  });
});

$(".button input[type=button]").live('click', function() {
  //var data = $('form#change').serialize();
  var data = $('form').serialize();
  // post data using ajax                                                                                                                                                                         
  $.ajax({
    type: "POST",
    url: "index.php?page=update_mysql",
    data: data,
    success: function(data) {
      alert(data); // show response from the php script.                                                                                                                                          
    }
  });
});
</script>
</head>

<form id="change" method="post" action="#">
    <table>

<?PHP
include('db.php');
$sql="SELECT * FROM liva_projects";
$result = mysql_query($sql)or die(mysql_error());
  WHILE ($row = mysql_fetch_array($result, MYSQL_ASSOC))  {
        echo '<tr class="row">';
            echo '<td class="td" title="id">'.$row["id"].'</td>';
            echo '<td class="td" title="project_name">'.$row["project_name"].'</td>';
            echo '<td class="td" title="project_tag">'.$row["project_tag"].'</td>';
            echo '<td class="button" title="button"><button class="edit">Edit</button></td>';
        echo '</tr>';
  }
?>

    </table>
</form>
</html>

update_mysql.php code is here

<?php
include('db.php');
if ($_POST['Submit'] == "Submit") {
$id = $_POST['id'];
$project_name = $_POST['project_name'];
$project_tag = $_POST['project_tag'];
$sql_edit = "UPDATE liva_projects SET project_name = '$project_name', project_tag = '$project_tag' WHERE id = '$id'";
$result_edit = mysql_query($sql_edit) or die(mysql_error());

}

?>

db.php code is here…

<?php
$mysql_hostname = "localhost";
$mysql_user = "root";
$mysql_password = "";
$mysql_database = "livaitne_liva_proman";
$bd = mysql_connect($mysql_hostname, $mysql_user, $mysql_password) or die("Could not connect database");
mysql_select_db($mysql_database, $bd) or die("Could not select database");
?>

I am not getting editable option when clicking on edit button.

or else is there any other simple code for inline editing in a table?

Please help me

Are you getting any specific error messages? Have you tried using Firebug to see what kind of requests are being sent when you click the button?

Hi Patche

I am getting the following error message

TypeError: $(…).live is not a function

$(“.button input[type=button]”).live(‘click’, function() {

Now i have fixed everything. there are no errors now.

but when i click on edit button the fields are editable, but when i change the inputfield and click on submit, a pop is displaying with all the code which is written in html.


success: function(data) {
      alert(data); // show response from the php script.                                                                                                                                          
    }

That’s because of this line. When you update the success function is launched and this code basically alerts the response from the ajax call (the html code you see in the popup).

I know that, but when i click on submit button it is not submitting to update query. :frowning:

You’re saying the alert is showing the php code of your update_mysql.php file? If so, I would say your index.php file is not processing your request properly.

Yes, might be… Could you plzz tell me where exactly the issue is??? :frowning:

Software Company in Bhopal

Oh, that first block of code is the entire index.php? Your ajax POST goes to index.php?page=update_mysql but I don’t see where in that file it would get processed.