Question

我正在尝试使用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>

Answer 1

每个div都有相同的类：showText。他们需要唯一的ID，如Div1，Div2。然后按ID更新它们：$（“＃Div1”）

Answer 2

提示，而不是回答：

$（“。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);

... 返回false; } }，“json”）; 返回false; }）;

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

Answer 3

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

  $("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;
  });

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

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

3 个答案: