Using jquery to update the database on click edit function

Question

I have the following function which allows me to double click on content within a table and edit it. The problem I am having now is I am unsure how to implement the function to update in the database so the changes stay once I press enter.

UPDATE:

I have the following but it is not posting to the php file

PHP

include("../../db.php");
$requestHandled = "UPDATE requests SET Status = 1 WHERE RequestID = '".$_POST['RequestID']."'";
mysqli_query($requestHandled) or die(mysql_error());

HTML

<td class="RequestID"><?php echo $id; ?></td>
<td class="Address"><?php echo $addr; ?></td>
<td><?php echo $sub; ?></td>
<td><?php echo $info; ?></td> 
<td><?php echo $date; ?></td>

Jquery:

$(function () {
    $(".Address").dblclick(function () {
        var OriginalContent = $(this).text();
        $(this).addClass("cellEditing");
        $(this).html("<input type='text' value='" + OriginalContent + "' />");
        $(this).children().first().focus();
        $(this).children().first().keypress(function (e) {
            if (e.which == 13) {
                var newContent = $(this).val();
                $(this).parent().text(newContent);
                $(this).parent().removeClass("cellEditing");
            }
        });
    $(this).children().first().blur(function(){
        $(this).parent().text(OriginalContent);
        $(this).parent().removeClass("cellEditing");
    });
        $(this).find('input').dblclick(function(e){
            e.stopPropagation(); 
        });
    });
});

$('.Address').keypress(function (e) {
 var key = e.which;
 if(key == 13)  // the enter key code
  {

jQuery.ajax({
    url: "functions/updateAddress.php",
    type: "POST",
    data: {RequestID: $('.RequestID').text(), Address: $('.Address').text()},
    success: function(response)
    {
        alert("Updated Address!");
    }
});

  }
});

AJAX is your friend, basically make a call to the server on each update and save to the database - google jquery ajax — StudioTime
– StudioTime, Commented Nov 23, 2015 at 12:56
On enter event , 1. Ajax call with some data and a object identifier. 2. Now get this identifier from params. 3. Get object from DB and update it. — GrvTyagi
– GrvTyagi, Commented Nov 23, 2015 at 12:59
Make AJAX call in your JQuery.. Have a look stackoverflow.com/questions/17358771/… — Vivek Buddhadev
– Vivek Buddhadev, Commented Nov 23, 2015 at 13:14

Netzach · Accepted Answer · 2015-11-23 13:22:57Z

1

you can't update the database with jquery, because your database is in your server, not in the client. jQuery is javascript is client-side, you need give more information for that us help you.

What Programming Language do you use in your server?

Php For example is a programming language server-side, also Node.js, etc...

The logic is that:

You use an ajax for send information to server-side.

<label for="email">Email:</label>
<input type="email" id="email" name="email">
<input type="hidden" id="id_user" name="id_user">
<a href="javascript:;" id="update_user_btn">Update User!</a>

then you write an ajax function associated with an jQuery event like this:

$('#update_user_btn').on("click",function(){
  $.ajax({
     url: "update_user.php",
     method: "POST",
     data: {email: $('#email').val(), id: $('#id_user').val()}
  }).done(function(res){
     console.log(res);
    //"Updated data successfully\n";
    //IF ALL IS OK!!
  });
});

Then in your server side you receive this params with

<?php
$email = $_POST['email']; 
$id = $_POST['id'];
$sql = "UPDATE users SET email = '$email' WHERE id_user = '$id'";

//You need create a database connection
$dbhost = 'localhost';
$dbuser = 'root';
$dbpass = 'rootpassword';

$conn = mysql_connect($dbhost, $dbuser, $dbpass);
if(! $conn ){
   die('Could not connect: ' . mysql_error());
}
mysql_select_db('test_db');
$retval = mysql_query( $sql, $conn );
if(! $retval ) {
   die('Could not update data: ' . mysql_error());
}
echo "Updated data successfully\n";
mysql_close($conn);
?>

Attention!! this is an example with php because is the most popular language programming server-side web, and is just for explain the logic and differences of server-side and client-side. Also report that mysql functions is obsolete and now use mysqli (these are functions for connect to the database type MYSQL)

edited Nov 23, 2015 at 13:22

answered Nov 23, 2015 at 13:17

Netzach

3142 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Netzach Over a year ago

Hi, Apparently is ok, but what do you need now?

Taylor Reed Over a year ago

It's not making the post to the php file as no update is taking place. It does however show the alert.

Netzach Over a year ago

you try to acces $('RequestID').val(), Address: $('Address').val() But .val() is only for input, you need use $('.RequestID').text(), Address: $('.Address').text() And you need a "." for indicate that is class element.

Taylor Reed Over a year ago

Hmm even with the following nothing is updated. data: {RequestID: $('.RequestID').text(), Address: $('.Address').text()},

Netzach Over a year ago

then you have an error in your php, try to write echo $_POST['RequestID']... if is no't empy, is a problem in your php, you need see the db connection

|

Collectives™ on Stack Overflow

Using jquery to update the database on click edit function

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related