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

时间:2017-09-21 15:32:02

标签: javascript php mysql ajax inline-editing

我试图让您更容易编辑图库中的标题描述,以及尝试内联编辑的内容。

我可以在屏幕上进行编辑并更改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>

更新画廊-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();
    }

1 个答案:

答案 0 :(得分: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()
    },