Question

好的。所以我是一个带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);


?>

Answer 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???
        );
    }
}

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

1 个答案: