更新 AJAX 上的 div 提交 jQuery 正在更新所有 div答案

【问题标题】：Update div on AJAX submit jQuery is updating all divs更新 AJAX 上的 div 提交 jQuery 正在更新所有 div
【发布时间】：2009-09-29 00:37:37
【问题描述】：

我正在尝试使用 ajax 帖子更新 div。问题是......它正在更新每个 div。

这是 json.php：

//json.php

$data['months'] = $db->escape_value($_POST['check']);
$data['id'] = $db->escape_value($_POST['hidden']);


$query = "UPDATE month SET months = '{$data['months']}' WHERE monthID = '{$data['id']}'";
$result = $db->query($query);

if($result) {
  $data['success'] = true;
  $data['message'] = "Update Successful!";
  $data['text'] = $_POST['check'];
  echo json_encode($data);
} else {
  $data['message'] = "Update could not be completed.";
}

还有html：

<?php

$query = $db->query('SELECT * FROM month');


?>
<html>
 <head>
  <title>jQuery/Ajax - Update is updating all divs</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>
<script type="text/javascript">
$(document).ready(function() {

  $("input.check, button.save, input.cancel, div.message").hide();

  $(".edit").click(function(){
      $(this).parent().siblings("li.liTwo").children("input.delete").hide();
      $(this).parent().siblings("li.liThree").children("button.save").show();
      $(this).parent().siblings("li.liFour").children("input.cancel").show();
      $(this).parents("ul").siblings("div.showText").hide();
      $(this).parents("ul").siblings("input.check").show();
      $(this).hide();
      return false;
    });

  $(".cancel").click(function(){
      $(this).parent().siblings("li.liTwo").children("input.delete").show();
      $(this).parent().siblings("li.liThree").children("button.save").hide();
      $(this).parent().siblings("li.liOne").children("input.edit").show();
      $(this).parents("ul").siblings("div.showText").show();
      $(this).parents("ul").siblings("input.check").hide();
      $(this).hide();
      return false;
    });


  $("form[name=form1]").submit(function(){
    var params = $(this);
    $.post("json.php", { hidden : $(this).find("[name=hidden]").val(), check :   $(this).find("[name=check]").val() },
      function (data){
        if(data.success) {
          $(".showText").html(data.text);
          $(".message").html(data.message).slideDown("fast");
          $(".check").hide();
          $("button.save").hide();
          $(".cancel").hide();
          $(".edit").show();
          $(".delete").show();
          $(".showText").show();
          return false;
        }
      }, "json");
    return false;
  });



});
</script>
 </head>
<body>
<div class="message">message</div>
    <?php while($row = $db->fetch_assoc($query)) { ?>
    <form action="json.php" name="form1" method="post">
      <div class="container">
          <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">
              <input name="delete" type="submit" class="delete" value="delete" />
            </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 } ?>
<!--<a id="reset" href="test3.php">reset</a>--> 

</body>
</html>

【问题讨论】：

标签： php jquery ajax

【解决方案1】：

您需要为要更改的元素指定上下文（表单）：

  $("form[name=form1]").submit(function(){
    var form = this;
    var params = $(this);
    $.post(form.action, { hidden : $(this).find("[name=hidden]").val(), check : $(this).find("[name=check]").val() },
      function (data){
        if(data.success) {
          $(".showText", form).html(data.text);
          $(".message", form).html(data.message).slideDown("fast");
          $(".check", form).hide();
          $("button.save", form).hide();
          $(".cancel", form).hide();
          $(".edit", form).show();
          $(".delete", form).show();
          $(".showText", form).show();
          return false;
        }
      }, "json");
    return false;
  });

另外，如果你隐藏一个父元素，子元素也会被隐藏，所以你可能想要这样做......

【讨论】：

【解决方案2】：

每个 div 都有相同的类：showText。他们需要唯一的 ID，例如 Div1、Div2。然后通过 ID 更新它们：$("#Div1")

【讨论】：

我正在从数据库中提取值...所以 ID 对我不起作用。
数据库如何将它们分开？
更新数据库时，WHERE 子句使用什么？他们在数据库中没有唯一标识符吗？
是的..有一个隐藏字段可以在帖子中传递 ID。更新不是问题...我只是无法让新值显示在其各自的 div 上...更正：它确实显示，只是它显示在每个 div 上。我已经为此苦苦挣扎了好几个小时。
好的，重构生成的 HTML。为每个元素添加一个 id 属性，并使其与您所说的隐藏 id 相同。然后，当您设置值时，使用 $("#yourhiddenid") 来选择元素而不是 $(".showText")

【解决方案3】：

提示，而不是回答：

$(".showText") 返回多少个元素？

第二个提示：不止一个！

===

为了更清楚而编辑：

第一个问题是您正在按 .showText 之类的类进行选择。但是您正在创建多个表单，每个表单都有一个与 .showText 匹配的元素。您需要某种方式来指向每个表单中的正确元素。解决这个问题的一种方法是在每个 FORM 标记上添加一个 ID，这样您就可以选择诸如 $('#form-number-$N .showtext) 之类的东西——它选择元素内具有 class="showtext" 的任何元素id 为“#form-number-$N”

您正在遍历数据库中的行并编写表单。所以你需要一些变量数据来识别每个单独的表单。

你有一个填充 $row 的 while 循环：

<?php while($row = $db->fetch_assoc($query)) { ?>

但目前，您创建的每个表单都有一个“form1”的名称属性。

那么如果，而不是：

 <?php while($row = $db->fetch_assoc($query)) { ?>
 <form action="json.php" name="form1" method="post">

你做了类似的事情：

 <?php while($row = $db->fetch_assoc($query)) { ?>
 <form action="json.php" name="form<?PHP echo $row['id']; ?>" id="<?PHP echo $row['id']; ?> class="myFormClass" method="post">

然后您可以使用如下所示的处理程序：

  $("form.myFormClass").submit(function(){
    var params = $(this);
    $.post("json.php", { hidden : $(this).find("[name=hidden]").val(), check :   $(this).find("[name=check]").val() },
      function (data){
        if(data.success) {
          $(this.id + " .showText").html(data.text);

... 返回假； } }, "json"); 返回假； });

你看到那里发生了什么吗？

【讨论】：

天啊...为什么哦，为什么这些论坛必须如此居高临下？
不是居高临下...只是以为你会很快看到它。编辑更清晰。
无意伤害...所有道歉。只是沮丧..grr.
好的，请查看我的更新答案，并仔细考虑。您正在犯的关键错误是您试图在每个表单上使用相同的处理程序。您需要设计一种方法来引用适当的表单。我的更新向您展示了如何为每个表单添加一个 ID，然后在您的处理程序中引用该 ID。我不仅要修复它以供您复制粘贴（我很累，而且有点病，否则我可能会），但是我想我已经给了您足够的方向来解决它。如果您真的筋疲力尽，请稍事休息，回来后重新阅读此处的答案。
蒂姆...还是不行。我假设随表单发送的 ID 是“monthID”而不是“id”...对吗？