AJAX Update div jQuery tüm divs güncelliyor gönderin

3 Cevap php

Ben bir ajax yazı ile bir div güncellemeye çalışıyorum. Sorun her div güncellenmesi oluyor ... olduğunu.

İşte JSON.php bulunuyor:

//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.";
}

Ve 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>

3 Cevap

Eğer değişen konum elemanları için bir bağlam (form) belirtmeniz gerekir:

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

Bir üst öğe gizlemek eğer Ayrıca, çocuklar da, gizlidir, bu nedenle muhtemelen bunu yapmak istiyorum ...

Her div aynı sınıfı vardır: showText. Onlar Div1, div2 gibi, yerine benzersiz kimlikleri gerekir. Sonra onların kimliği ile güncelleme: $ ("# Div1")

Yerine cevap ipucu:

$ (". ShowText") kaç unsurlar çıkmıyor?

2. İpucu: Birden fazla var!

===

Daha fazla netlik için düzenleyin:

İlk sorun,. ShowText gibi sınıflar tarafından seçilmesi konum olmasıdır. Ama sen. ShowText eşleşen bir öğe vardır, her biri birden fazla form, yaratıyoruz. Her formda doğru elemana işaret için bir yol gerekir. Bunu çözmek için bir yolu, her FORMU etiketi üzerinde bir kimlik eklemek, böylece o $ gibi şeyler ('# form-numara-$ N showtext.) Seçebilirsiniz - öğesi içinde class = "showtext" ile herhangi elemanları seçer ile id "# form-numarası-$ N"

Eğer veritabanı satır üzerinde döngü ve formları yazıyoruz. Yani her formu tanımlamak için bazı variable veri gerekir.

Sen $ satır dolduran bir süre döngü var:

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

Ama şu anda, oluşturduğunuz her formu "form1" bir isim özniteliği vardır.

Peki yerine, eğer:

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

Sen böyle bir şey yaptım:

 <?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">

Sonra şöyle bir işleyici kullanabilirsiniz:

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

... return false; } }, "json"); return false; });

Orada neler olduğunu görüyor musunuz?

etiketler