单击功能后显示新插入的项目答案

【问题标题】：Show newly inserted item after click function单击功能后显示新插入的项目
【发布时间】：2009-09-30 22:49:40
【问题描述】：

好的..所以我是 jquery 的一个 nOOb。我有一个动态创建的具有更新/删除功能的项目列表（一切正常）。我的问题是“添加”功能。我可以很好地将项目添加到数据库中，但添加后，我无法让新创建的项目“容器”可见。提交后数据恢复正常...只是无法显示 div...grr.

提前感谢任何对此提供帮助的人。

这里是jquery点击函数：

   // the add entry function
  $("button.add").click(function(){
      var buttonAdd = this;
      var inputText = $("input.entry").attr("value");
      var contID = $(".container").attr("id");
      var action = $("form.addForm").attr("action");
      var container = $(".container");
      $.post(action, { cache: false, add : inputText, id : contID },
      function(data){
            if(data.success) {
          //need the new div "container" to be shown...
        } else if(data.error) {
          $(".message").html(data.message).show();
        }
      }, "json");
      return false;
  });

这是我的 HTML：

<html>
 <head>
  <title>jQuery/Ajax - Display respective values on submit for inputs with same class name</title>
<link rel="stylesheet" type="text/css" href="test.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<head>
<body>
<div id="wrap">
    <?php while($row = $db->fetch_assoc($query)) { ?>
    <form action="update.php" class="myFormClass" method="post">
      <div class="container" id="<?php echo $row['monthID'] ?>">
          <div class="showText"><?php echo $row['months']; ?></div>
          <input name="check" type="text" class="check" value="<?php echo $row['months']; ?>" />
          <input name="hidden" type="hidden" class="hidden" value="<?php echo $row['monthID']; ?>" />
          <ul class="list">
            <li class="liOne">
              <input name="edit" type="button" class="edit" value="edit" />
            </li>
            <li class="liTwo">
              <button name="delete" type="button" class="delete" value="<?php echo $row['monthID']; ?>">delete</button>
            </li>
            <li class="liThree">
              <button name="save" type="submit" class="save" value="<?php echo $row['monthID']; ?>">save</button>
            </li>
            <li class="liFour">
              <input name="cancel" type="button" class="cancel" value="cancel" />
            </li>
          </ul>
      </div>
    </form>
    <?php } ?>
    </div>
    <!-- This the add entry portion -->
    <form action="add.php" class="addForm" method="post">
      <label for="entry">Entry:</label>
      <input type="text" name="entry" class="entry" value="<?php $valid->entities('add', 'entry'); ?>" />
      <?php //$valid->display_errors('entry'); ?>
      <button class="add" type="button" name="add">Add New Entry</button>
    </form>
    <form action="delete.php" class="delForm" method="post">
    </form>
</body>
</html>

add.php:

<?php


  $data['add'] = trim($db->escape_value($_POST['add']));
  $data['id'] = trim($db->escape_value($_POST['id']));

if(!isset($data['add']) || empty($data['add'])) {
  $data['error'] = true;
  $data['message'] =  "Please enter a value.";
} else {


  $query = "INSERT INTO month (months) VALUES ('{$data['add']}')";

  $result = $db->query($query);

  if($result) {
    $data['success'] = true;
    $data['message'] = "Entry Successfully added.";
  }
}

echo json_encode($data);


?>

【问题讨论】：

标签： jquery ajax

【解决方案1】：

我会让你的 PHP 用 json 响应返回所有新插入的值。看起来你已经做了一半（使用$data['add']），但我会以稍微不同的方式来做：

$data['id'] = mysql_insert_id();

$response['success'] = true;
$response['message'] = "Woohoo";
$response['data'] = $data;

echo json_encode($response);

这样，你就可以在你的 Javascript 中得到这个：

{
    success : true,
    message : 'Woohoo',
    data : {
        id : 15,
        add : 'foo'
    }
}

从那里，应该很容易将其添加到您的列表中：

function(data) {
    if (data.success) {
        $("ul.list").append(
            $("<li></li>")
                .html("id: " + data.data.id + ", add: " + data.data.add)
                .addClass("blah") // liOne, liTwo, huh???
        );
    }
}

【讨论】：

我会试试的！谢谢。哦，是的……“li”类名……别问……这是一项正在进行的工作。