使用Ajax / jQuery（内联文本编辑）在<div>标记内检索数据

Question

I've been working on this problem for a few hours, but there is some mistake somewhere in the javascript file (I believe), but I can't figure it out.

Right now the alert(msg) gives me an Undefined index: headline/text in editPost.php.

The following PHP code is in a file profile.php. I want to retrieve the data within the <div>I want this data</div> tags (i.e. I want to retrieve the data in $row['headline'] and $row['text'].

while ($row = mysqli_fetch_array ($resultPost, MYSQLI_ASSOC)) {
    echo '<h1><div contenteditable="true" data-headline="headline" data-id=' . $row['id'] . '>' . $row['headline'] . '</div></h1>';
    echo '<p><div contenteditable="true" data-text="text" data-id=' . $row['id'] . '>' . $row['text'] . '</div></p>';
}

This is how I try to retrieve the data (seperate .js file):

$(document).ready(function() {
$('body').on('blur', "div[contenteditable=true]", function() {

    var headline = $("div[data-name='headline']:visible").text();
    var text = $("div[data-name='text']:visible").text();
    $.ajax({
        type: 'POST',
        url: 'editPost.php',
        data: {
            content: $.trim($(this).text()),
            id: $(this).data('id'),
            headline: $(this).data(headline),
            text: $(this).data(text),
        },
        success: function(msg) {
            alert(msg);
        }
    });
});
});

The function above then posts the data to editPost.php, which submits the data to a database. Below is a snippet of how I do that:

$headline = $_POST['headline'];
$text = $_POST['text'];
$id = $_POST['id'];
$sql = "UPDATE blogpost SET headline = '$headline', text = '$text', edit_time = NOW(6) WHERE id = '$id'";

In the current state, when the data is sent to the database, it finds the correct table (using the id), and inserts "" in both the headline and text fields, but it updates the edit_time correctly.

Thank you!

Answer 1

I took a break for a few hours, and came back with more thoughts on how to solve it. After a little tweaking here and there, I finally did it.

For those of you who visit this thread at a later time, this is what I changed in order for it to work:

My profile.php snippet is now like this (I switched data-headline="headline" to name="headline" etc.):

while ($row = mysqli_fetch_array ($resultPost, MYSQLI_ASSOC)) {
    echo '<h1><div contenteditable="true" name="headline" data-id=' . $row['id'] . '>' . $row['headline'] . '</div></h1>';
    echo '<p><div contenteditable="true" name="text" data-id=' . $row['id'] . '>' . $row['text'] . '</div></p>';
}

My javascript file now consists of two functions with minor differences (one for each field). Yes, I'm certain there is a better way to solve this:

$(document).ready(function() {
$('body').on('blur', "div[name=headline]", function() {

    var headline = $("div[name='headline']:visible").text();
    $.ajax({
        type: 'POST',
        url: 'editPost.php',
        data: {
            headlineContent: $.trim($(this).text()),
            id: $(this).data('id'),
            headline: $(this).data(headline),
        },
        success: function(msg) {
            alert(headline);
        }
    });
});
});

$(document).ready(function() {
$('body').on('blur', "div[name=text]", function() {

    var text = $("div[name='text']:visible").text();
    $.ajax({
        type: 'POST',
        url: 'editPost.php',
        data: {
            textContent: $.trim($(this).text()),
            id: $(this).data('id'),
            text: $(this).data(text),
        },
        success: function(msg) {
            alert(text);
        }
    });
});
});

I changed how the elements were targeted, so targeting one element wouldn't duplicate the content over to the other element.

Finally, in my editPost.php file, I added a check to see whether or not a variable is empty. If it is empty, that means the element didn't get updated, hence why it only updates the other element.

$headline = $_POST['headlineContent'];
$text = $_POST['textContent'];
$id = $_POST['id'];
if (!empty($headline)) {
    $sql = "UPDATE blogpost SET headline = '$headline', edit_time = NOW(6) WHERE id = '$id'";
} elseif (!empty($text)) {
    $sql = "UPDATE blogpost SET text = '$text', edit_time = NOW(6) WHERE id = '$id'";
}

As you can see, the code itself is far from perfect (pretty horrible actually), but it works for now. I'll definitely try to improve on it in the future, but any feedback would be appreciated (I am aware this is not the place for codereview).