Home/ Questions/Q 391559
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-12T16:04:24+00:00

Ok..so I’m a nOOb with jquery. I have a dynamically created list of items

  • 0

Ok..so I’m a nOOb with jquery. I have a dynamically created list of items with update/delete functionality (and that’s all working fine). My problem is the “add” functionality. I can add the item to the database just fine, but after it’s added, I can’t get the newly created item “container” to be visible. The data comes back alright after submit…just can’t get the div to show up…grr.

Thanks in advance to anyone that help with this.

Here’s the jquery click function:

   // the add entry function
  $("button.add").click(function(){
      var buttonAdd = this;
      var inputText = $("input.entry").attr("value");
      var contID = $(".container").attr("id");
      var action = $("form.addForm").attr("action");
      var container = $(".container");
      $.post(action, { cache: false, add : inputText, id : contID },
      function(data){
            if(data.success) {
          //need the new div "container" to be shown...
        } else if(data.error) {
          $(".message").html(data.message).show();
        }
      }, "json");
      return false;
  });

Here is my HTML:

<html>
 <head>
  <title>jQuery/Ajax - Display respective values on submit for inputs with same class name</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>

<head>
<body>
<div id="wrap">
    <?php while($row = $db->fetch_assoc($query)) { ?>
    <form action="update.php" class="myFormClass" method="post">
      <div class="container" id="<?php echo $row['monthID'] ?>">
          <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">
              <button name="delete" type="button" class="delete" value="<?php echo $row['monthID']; ?>">delete</button>
            </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 } ?>
    </div>
    <!-- This the add entry portion -->
    <form action="add.php" class="addForm" method="post">
      <label for="entry">Entry:</label>
      <input type="text" name="entry" class="entry" value="<?php $valid->entities('add', 'entry'); ?>" />
      <?php //$valid->display_errors('entry'); ?>
      <button class="add" type="button" name="add">Add New Entry</button>
    </form>
    <form action="delete.php" class="delForm" method="post">
    </form>
</body>
</html>

The add.php:

<?php


  $data['add'] = trim($db->escape_value($_POST['add']));
  $data['id'] = trim($db->escape_value($_POST['id']));

if(!isset($data['add']) || empty($data['add'])) {
  $data['error'] = true;
  $data['message'] =  "Please enter a value.";
} else {


  $query = "INSERT INTO month (months) VALUES ('{$data['add']}')";

  $result = $db->query($query);

  if($result) {
    $data['success'] = true;
    $data['message'] = "Entry Successfully added.";
  }
}

echo json_encode($data);


?>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I would get your PHP to return all the newly inserted values with the json response. It looks like you’re already half doing that (with $data['add']), but I’d do it in a slightly different way:

    $data['id'] = mysql_insert_id();

$response['success'] = true;
$response['message'] = "Woohoo";
$response['data'] = $data;

echo json_encode($response);

    This way, you get this in your Javascript:

    {
    success : true,
    message : 'Woohoo',
    data : {
        id : 15,
        add : 'foo'
    }
}

    From there, it should be easy to add it into your list:

    function(data) {
    if (data.success) {
        $("ul.list").append(
            $("<li></li>")
                .html("id: " + data.data.id + ", add: " + data.data.add)
                .addClass("blah") // liOne, liTwo, huh???
        );
    }
}
    • 0