Home/ Questions/Q 380777
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-12T15:01:18+00:00

I’m trying to update a div with an ajax post. Problem is…it’s updating every

  • 0

I’m trying to update a div with an ajax post. Problem is…it’s updating every div.

Here’s the 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.";
}

And the 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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You need to specify a context (the form) for the elements you’re changing:

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

    Also, if you hide a parent element, the children are hidden, too, so you probably want to do that…

    • 0