Mise à jour de div sur AJAX submit jQuery met à jour toutes les divs

J'essaye de mettre à jour un div avec un post ajax. Le problème est ... il met à jour chaque div.Mise à jour de div sur AJAX submit jQuery met à jour toutes les divs

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

Et le code 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>

Source

2009-09-29 Scott

Vous devez spécifier un contexte (la forme) pour les éléments que vous modifiez:

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

De plus, si vous masquez un élément parent, les enfants sont cachés aussi, vous voulez probablement fais ça ...

Source

2009-09-29 01:39:19 strager

strager et tim .... merci un million! Succès! – Scott

Chaque div a la même classe: showText. Ils ont besoin d'ID uniques à la place, comme Div1, Div2. Puis les mettre à jour par leur ID: $ ("# Div1")

Source

2009-09-29 00:41:26 lod3n

Je tire des valeurs d'une base de données ... donc les ID ne fonctionneront pas pour moi. – Scott

Comment la base de données les garde-t-elle séparées? – lod3n

Pas vraiment vous suivre. – Scott

Conseil, au lieu de répondre:

Combien d'éléments ne $ ("showText.") retour?

2e indice: C'est plus d'un!

===

Modifier pour plus de clarté:

Le premier problème est que vous choisissez par les classes comme .showText. Mais vous créez plusieurs formulaires, chacun ayant un élément qui correspond à .showText. Vous avez besoin d'un moyen de pointer sur le bon élément dans chaque formulaire. Une façon de résoudre ceci est d'ajouter un ID sur chaque balise FORM, de sorte que vous puissiez ensuite sélectionner des éléments comme $ ('# form-number- $ N .showtext) - qui sélectionne tous les éléments avec class = "showtext" dans l'élément avec l'ID "# form-number- $ N"

Vous parcourez les lignes de votre base de données et écrivez les formulaires. Donc, vous avez besoin de variable données pour identifier chaque formulaire individuel.

Vous avez une boucle while qui renseigne $ row:

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

Mais actuellement, toutes les formes que vous créez possède un attribut de nom de « form1 ».

Alors si, au lieu de:

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

Tu as fait quelque chose comme:

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

Ensuite, vous pouvez utiliser un gestionnaire qui ressemble à quelque chose comme:

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

Voyez-vous ce qui se passe là-bas?

Source

2009-09-29 00:43:07 timdev

Je ne sais pas ... vous m'avez. – Scott

Geez ... pourquoi oh pourquoi ces forums doivent être si condescendants? – Scott

N'étant pas condescendant ... je pensais juste que vous le verriez rapidement. Modification pour plus de clarté. – timdev

Mise à jour de div sur AJAX submit jQuery met à jour toutes les divs

Répondre

Questions connexes