javascript - 使用内联文本编辑更新数据库

Question

我正在努力让编辑图库中的标题和描述变得更加容易，以及尝试内联编辑的内容。

我可以让它在屏幕上编辑并更改 onblur，但不会更新到我的数据库。你能看一下代码，看看我缺少什么吗？

我从教程中得到了这个，不确定 JS 区域中的 data:$('form').serialize(), (form 是用来做什么的？)。任何帮助，将不胜感激。谢谢!

HTML/PHP

<div onclick="editTitle(`ctitle`,this)" onblur="saveTitle(`ctitle`,this)" class="child black-txt p24-txt pb-25 w7 allcaps"><?php echo escape($g->title); ?></div>

<div onclick="editDesc(`cdesc`,this)" onblur="saveDesc(`cdesc`,this)"class="child black-txt p24-txt pb-25 w3"><?php echo escape($g->description); ?></div>

<div id="message"></div>

JS

<script>
function editTitle(ctitle,div){
  /*var div = document.class("ctitle");*/
  div.style.border = "1px solid #000000";
  div.style.padding ="20px";
  div.contentEditable = true;

}
function saveTitle(ctitle,div){
  div.style.border = "none";
  div.style.padding ="0px";
  div.contentEditable = false;
  event.preventDefault();
  $.ajax({
    url:"update-gallery-text.php",
    method:"post",
    data:$('form').serialize(),
    dataType:"text",
    success:function(strMessage){
      $('#message').text(strMessage)
    }
  })
}
</script>


<script>
function editDesc(cdesc,div){
  /*var div = document.class("ctitle");*/
  div.style.border = "1px solid #000000";
  div.style.padding ="20px";
  div.contentEditable = true;

}
function saveDesc(cdesc,div){
  div.style.border = "none";
  div.style.padding ="0px";
  div.contentEditable = false;
  event.preventDefault();
  $.ajax({
    url:"update-gallery-text.php",
    method:"post",
    data:$('form').serialize(),
    dataType:"text",
    success:function(strMessage){
      $('#message').text(strMessage)
    }
  })
}
</script>

update-gallery-text.php

<?php
include($_SERVER['DOCUMENT_ROOT'] . "/core/init.php");

$id         = $_POST['id'];
$title      = $_POST['title'];
$description = $_POST['description'];


$updategallery = DB::getInstance()->update('gallery', $id, array(
    'title'    => $title,
    'description' => $description,


));

if (mysql_query($updategallery)) {
    echo "Updated Successfully...!!!";
} else {
    echo mysql_error();
    }

Answer 1

您的代码中缺少表单元素，

替换这个:

<div onclick="editTitle(`ctitle`,this)" onblur="saveTitle(`ctitle`,this)" class="child black-txt p24-txt pb-25 w7 allcaps"><?php echo escape($g->title); ?></div>
<div onclick="editDesc(`cdesc`,this)" onblur="saveDesc(`cdesc`,this)"class="child black-txt p24-txt pb-25 w3"><?php echo escape($g->description); ?></div>

与:

<input type="hidden" id="GalleryId" value="THE ID OF THE GALLERY" />
<div id="GalleryTitle" onclick="editTitle(`ctitle`,this)" onblur="saveTitle(`ctitle`,this)" class="child black-txt p24-txt pb-25 w7 allcaps"><?php echo escape($g->title); ?></div>
<div id="GalleryDescription" onclick="editDesc(`cdesc`,this)" onblur="saveDesc(`cdesc`,this)"class="child black-txt p24-txt pb-25 w3"><?php echo escape($g->description); ?></div>

还有这个:

data:$('form').serialize(),

与:

data: {
    id: $("#GalleryId").val(),
    title: $("#GalleryTitle").html(),
    description: $("#GalleryDescription").html()
    },