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);
?>