點擊功能後顯示新插入的項目

好..我是一個nOOb與jQuery。我有一個動態創建的具有更新/刪除功能的項目列表（這一切工作正常）。我的問題是「添加」功能。我可以將項目添加到數據庫中，但添加後，我無法將新創建的項目「容器」顯示出來。提交後數據恢復正常...只是無法讓div顯示出來...... grr。點擊功能後顯示新插入的項目

在此先感謝任何有幫助的人。

這裏是jQuery的點擊功能：

// 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; 
    });

這裏是我的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>

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


?>

來源

2009-09-30 Scott

我會得到你的PHP返回所有新插入的值與json響應。它看起來像你已經一半這樣做（與$data['add']），但我會做一個稍微不同的方式：

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

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

echo json_encode($response);

這樣一來，你在你的JavaScript得到這樣的：

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

從那裏，它應該很容易添加到您的清單：

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

來源

2009-09-30 06:28:55 nickf

我會試試看！謝謝。哦，是的......「李」的名字......不要問......這是一項正在進行的工作。 – Scott 2009-09-30 06:50:59

點擊功能後顯示新插入的項目

回答

相關問題