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

Question

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

我可以让它在屏幕上编辑并更改 onblur，但没有更新到我的数据库。你能看看代码，看看我遗漏了什么吗？

我是从教程中得到的，但不确定 JS 区域中的 data:$('form').serialize(),（表单有什么用？）。任何帮助，将不胜感激。谢谢！

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()
    },

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

Updating database with inline text editing

javascript

php

mysql

ajax

inline-editing