Reputation: 195

update record using jquery ajax in php

I have displayed records in a table and have link of edit and when I click on it values of that row are displayed in text box but when I click on button it inserts new record rather updating record in table.What changes should I make to update record?

comment.php

<script type="text/javascript">
$(document).ready(function(){
    function loadList(){
        $.ajax({
            url: "load_list.php",
            cache: false,
            success : function(html){
                $(".name_list").html(html);
            }
        });
    }
    loadList();

    $("#Submit").click(function() {
        if($(":text").val().length==0)
            {
               // $(this).next().html("Field needs filling");
               $(":text").after('<span class="errorkeyup">Field cannot be empty</span>');
                //return false;
                success = false;
            }
            else
            {
                var name=$("#name").val();
                var message=$("#message").val();
                $.ajax({
                  type:"post",
                   url:"save_list.php",
                   data:"name="+name+"&message="+message,                             
                  success:function(data){
                 loadList();                                
                 } 
                }); 
                return false;
            }
    });

    $("a.delete_button").on("click", function(e){
        //this deletes the row clicked on with an alert and then reloads the list
        e.preventDefault();
        //var id = $(this).attr("id");
        var obj = $(this); 
        var id = obj.attr("id");
            $.ajax({
                type: "POST",
                url: "delete.php",
                data: "id="+ id,
                success: function(response){
                if(response == '1') {
                      obj.parent.remove();
                }
            }
            });      
        return false;
    });

    $("a.edit_button").click(function(){
    //$("form#update").live("submit",(function() {
    // we want to send via ajax and empty the html from the update_form element
        var name = $('#name').attr('value');
        var message = $('#message').attr('value');
        var id = $('#id').attr('value');
        $("#wrapper:has(button)").hide();
       $("#Submit").click(function(){
            $.ajax({

                url: "updateajax.php",
                type: "POST",
                data: "name="+ name +"& message="+ message +"& id="+ id,
                error: function(){
                    alert('Error loading document');
                             },
                success: function(){
                alert (" i  am  in success below load list ");
                    $(".update_form").empty();
                    //loadList();

                        }

            });
    });
        return false;
    });

});
</script>
</head>

<body>


<form method="post" name="form" action="">
<div id="wrapper" align="center">
<?php
include('connection.php');
if(isset($_GET["id"]))
{
    $cmd=mysql_query("select * from login where id=".$_GET["id"]);
                $rs=mysql_fetch_array($cmd);
}
?>
<table width="200" border="1">
  <tr>
    <td colspan="2">Form:<input type="hidden" name="idupdate" id="idupdate" value="<?php echo $rs[0];?>"/></td>

  </tr>
  <tr>
    <td>Name:</td>
    <td><input type="text" name="name" id="name" value="<?php echo $rs[1];?>"  /></td>
  </tr>
  <tr>
    <td>Message:</td>
    <td><input type="text" name="message" id="message" value="<?php  echo $rs[2]; ?>"  /></td>
  </tr>
  <tr>
    <td colspan="2" align="center"><input type="button" value="Submit" id="Submit"><input type="button" value="edit" id="edit" style="display:none"></td>
    </tr>
</table>
 </div>
<div class="name_list" align="center"></div>
 <div class="update_form" style="display:none">

 </div>
 </div> 
 </form>
</body>

loadlist.php this is link in table for edit

echo"<td>
                 <a id=".$row['id']." href=comment.php?id=".$row['id']."&type=edit class=edit_button>Edit</a></td>";

updateajax.php

<?php
include("connection.php");
if(isset($_REQUEST['id']))
{
$id=int($_REQUEST['id']);
$name=mysql_escape_String($_REQUEST['name']);
$message=mysql_escape_String($_REQUEST['message']);
$sql = "update login set username='$name',message='$message' where id='$id'";
mysql_query($sql);
}
?>

Upvotes: 1

Answers (3)

Ashish Chopra

Reputation: 1439

Instead of using

echo"<td>
             <a id=".$row['id']." href=comment.php?id=".$row['id']."&type=edit class=edit_button>Edit</a></td>";

you could have used a button because anyways you are calling ajax on click of this anchor.

So as specified by Katuli mentioning href to an anchor tag will lead you to that page only.

So either try her suggestion of setting href='#' or use anything other than an anchor tag.

Upvotes: 1

Kautil

Reputation: 1331

echo"<td>
                 <a id=".$row['id']." href=comment.php?id=".$row['id']."&type=edit class=edit_button>Edit</a></td>"

In above line set href="#", because you implemented click event for this anchor tag. If you provide URL in

<a id=".$row['id']." href=comment.php?id=".$row['id']."&type=edit class=edit_button>Edit</a>

then instead of going to click function, it will go to url specified in href.

Upvotes: 1

Amit

Reputation: 1385

Change your loadlist.php to return link in following format.

echo"<td>
                 <a id='".$row['id']."' href='comment.php?id=".$row['id']."&type=edit' class='edit_button'>Edit</a></td>";

Upvotes: 1

update record using jquery ajax in php

Answers (3)

Related Questions