tags:

views:

576

answers:

3
Q: 

Update div on AJAX submit jQuery is updating all divs...

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"&gt;&lt;/script&gt;
<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>
+1  A: 

Every div has the same class: showText. They need unique IDs instead, like Div1, Div2. Then update them by their ID: $("#Div1")

lod3n  2009-09-29 00:41:26
I'm pulling values from a database...so ID's won't work for me.
Scott  2009-09-29 00:43:10
How does the database keep them separate?
lod3n  2009-09-29 00:44:36
Not really following you.
Scott  2009-09-29 00:48:55
When you update the database, what are you using for the WHERE clause? Don't they have unique identifiers in the DB?
lod3n  2009-09-29 00:56:21
Yeah..there's a hidden field that passes the ID on post. The update isn't a problem...I just cant' get the new value to display on it's respective div...correction: it does display, only it shows up on every div. I've struggled with this for hours.
Scott  2009-09-29 00:59:06
okay, restructure the HTML that is generated. Add an id attribute to each element, and make it the same as the hidden id you are talking about. Then when you set the value use $("#yourhiddenid") to select the element instead of $(".showText")
lod3n  2009-09-29 04:12:50
+1  A: 

Hint, instead of answer:

How many elements does $(".showText") return?

2nd Hint: It's more than one!

===

Edit for more clarity:

The first issue is that you're selecting by classes like .showText. But you're creating multiple forms, each of which has an element that matches .showText. You need some way to point at the right element in each form. One way to solve this is to add an ID on each FORM tag, so you can then select things like $('#form-number-$N .showtext) -- which selects any elements with class="showtext" inside the element with id "#form-number-$N"

You're looping over rows in your database and writing the forms. So you need some variable data to identify each individual form.

You've got a while loop that populates $row:

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

But currently, every form you create has a name attribute of "form1".

So what if, instead of:

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

You did something like:

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

Then you could use a handler that looks something like:

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

Do you see what's happening there?

timdev  2009-09-29 00:43:07
I dunno...you got me.
Scott  2009-09-29 00:45:37
Geez...why oh why do these forums have to be sooooo condescending?
Scott  2009-09-29 00:59:38
Not being condescending... just thought you'd see it quickly. Editing for more clarity.
timdev  2009-09-29 01:16:00
Meant no harm...all apologies. Just frustrated..grr.
Scott  2009-09-29 01:18:58
okay, see my updated answer, and think it through. The key error you're making is that you're trying to use the same handler on each form. You need to devise a way to reference the appropriate form. My updates show you how to add an ID to each form, and then reference that ID in your handler. I'm not just going to fix it for you to copy paste (I'm very tired, and a little sick, otherwise I might), but I think I've given you enough direction to figure it out. If you're really burned out, take a break, and re-read the answers here when you get back.
timdev  2009-09-29 01:27:33
Tim...It still won't work. I'm assuming the ID sent with form is "monthID" instead of "id"...right?
Scott  2009-09-29 01:35:59
I appreciate the help though...hope you feel better. I think you may have given me enough to muck around with. You're right...I think it's time for a break.
Scott  2009-09-29 01:37:48
+1  A: 

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

strager  2009-09-29 01:39:19
strager and tim....thanks a million! Success!
Scott  2009-09-29 01:49:57

related questions

IDE suggestions: Eclipse IDE vs. Zend Studio ( confused )
MySQL/Apache Error in PHP MySQL query
Lightweight IDE for Linux
What PHP framework would you choose for a new application and why?
Why is my ternary expression not working?
How can I get at the matches when using preg_replace in PHP?
Mechanisms for tracking DB schema changes
Wordpress theme development offline tools
Using object property as default for method property
How can I get the authenticated user name under Apache using plain HTTP authentication and PHP?
Make XAMPP/Apache serve file outside of htdocs
How do you debug PHP scripts?
PHP Variables passed by value or by reference?
Best way to implement unit testing in PHP
Connect PHP to an AS/400
Best way to access Exchange using PHP?
PHP Session Security
How do I access a remote form in php?
What's the best way to generate a tag cloud from an array? (using h1 through h6 for sizing)
Apache/PHP: error_log per Virtual Host?
How do I track file downloads with apache/PHP
How would you access Object properties from within an object method?
Flat File Databases in PHP
Best way to allow plugins for a PHP application
Latest information on PHP upcoming releases