php - Retrieve data within <div> tag using Ajax/jQuery (Inline text edit) -

i've been working on problem few hours, there mistake somewhere in javascript file (i believe), can't figure out.

right alert(msg) gives me undefined index: headline/text in editpost.php.

the following php code in file profile.php. want retrieve data within <div>i want data</div> tags (i.e. want retrieve data in $row['headline'] , $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 how try retrieve 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 posts data editpost.php, submits data database. below snippet of how that:

$headline = $_post['headline']; $text = $_post['text']; $id = $_post['id']; $sql = "update blogpost set headline = '$headline', text = '$text', edit_time = now(6) id = '$id'"; 

in current state, when data sent database, finds correct table (using id), , inserts "" in both headline , text fields, updates edit_time correctly.

thank you!

i took break few hours, , came more thoughts on how solve it. after little tweaking here , there, did it.

for of visit thread @ later time, changed in order work:

my profile.php snippet (i switched data-headline="headline" 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 consists of 2 functions minor differences (one each field). yes, i'm there better way 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 elements targeted, targeting 1 element wouldn't duplicate content on other element.

finally, in editpost.php file, added check see whether or not variable empty. if empty, means element didn't updated, hence why updates other element.

$headline = $_post['headlinecontent']; $text = $_post['textcontent']; $id = $_post['id']; if (!empty($headline)) {     $sql = "update blogpost set headline = '$headline', edit_time = now(6) id = '$id'"; } elseif (!empty($text)) {     $sql = "update blogpost set text = '$text', edit_time = now(6) id = '$id'"; } 

as can see, code far perfect (pretty horrible actually), works now. i'll try improve on in future, feedback appreciated (i aware not place codereview).