Question

I am currently trying to update a textarea when a user clicks elsewhere. I’m not well-versed in AJAX and Jquery. However, the script doesn’t seem to be updating the row in the DB.

Jquery/Text area:

<textarea id="<?php echo $item_id; ?>_textarea"><?php echo $notes; ?></textarea>
    <script type="text/javascript">
    $('<?php echo $item_id; ?>_textarea').on('blur',function () {
var notesVal = $(this).val(), id = $(this).data('id');        
var itemVal = <?php echo $item_id; ?>;
$.ajax({
     type: "POST",
     url: "updateNotes.php",
     data: {notes:notesVal , id:id, itemId:itemVal},
     success: function(msg) {
         $('#'+id).html(msg);
     }
 })
});
</script>

updateNotes.php:

<?php

include('db_connect.php');
include('order_functions.php');



$email = $_SESSION['username'];

$cartId = getcartid($mysqli, $email);
$notes = $_POST['notes'];
$itemID = $_POST['itemId'];


$query = "UPDATE `rel` SET `notes` = '$notes' WHERE `cart_id` = '$cartId' && `id_item` = '$itemID'";
$result = $mysqli->query($query) or die($mysqli->error.__LINE__);

if(result) {
return "Notes Updated";

}
?>

Answer 1

You forgot the $ in your last if-statement in your php-code and you should use “echo” (or likewise) instead of “return” as you are not in a function.

<?php

include('db_connect.php');
include('order_functions.php');

$email = $_SESSION['username'];

$cartId = getcartid($mysqli, $email);
$notes = $_POST['notes'];
$itemID = $_POST['itemId'];


$query = "UPDATE `rel` SET `notes` = '$notes' WHERE `cart_id` = '$cartId' && `id_item` = '$itemID'";
$result = $mysqli->query($query) or die($mysqli->error.__LINE__);

if($result) {
    echo "Notes Updated";
}
?>

Your html/javascript-code is a bit wrong. This is how i guess you wanted it to work:

<div id="<?php echo $item_id; ?>_div">
    <textarea id="<?php echo $item_id; ?>_textarea" data-id="<?php echo $item_id; ?>"><?php echo htmlentities($notes); ?></textarea>
</div>

$('#<?php echo $item_id; ?>_textarea').on('blur', function () { // don't forget # to select by id

    var id = $(this).data('id'); // Get the id-data-attribute
    var val = $(this).val();
    $.ajax({
        type: "POST",
        url: "updateNotes.php",
        data: {
            notes: val, // value of the textarea we are hooking the blur-event to
            itemId: id // Id of the item stored on the data-id
        },
        success: function (msg) {
            $('#' + id + '_div').html(msg); //Changes the textarea to the text sent by the server
        }
    });
});

Good luck