Replacing the html on a clicked button with closest()

Replacing the html on a clicked button with closest()

I have this html and jquery

  1. <!Doctype>
  2. <head>
  3. <meta charset="utf-8" />
  4. <title>Array Crud With Positions</title>
  5. <style type="text/css">
  6. .container{
  7. width:960px;
  8. }
  9. .krudSpace{
  10. width:100%;
  11. }
  12. label{
  13. width:15%;
  14. float:left;
  15. }
  16. .krudItem{
  17. border:1px solid orange;
  18. background-color:pink;
  19. margin-bottom:2%;
  20. }
  21. button{
  22. margin-right:2%;
  23. margin-bottom:0.55%;
  24. }
  25. </style>
  26. <script type="text/javascript" src="jquery.js"></script>
  27. <script type="text/javascript">
  28. jQuery(function() {
  29.  $("#button").click(function () {
  30. $("<div class='krudItem' id='xxx'><form class='aj' name='itemForm' method='post' action=''><section><label>Slider Title</label><input type='hidden' name='sliderKey' value='16'/><input type='hidden' name='sliderPosition' value='12'/><input type='hidden' name='clickedButton' value='initial'/><input type='text' name='sliderTitle' value='lorem'/></section><section><label>Slider Location</label><input type='text' name='sliderLocation' value='ipsum'/></section><section><label>Slider Description</label><textarea name='sliderDescription'>hello world</textarea></section><button name='saveNew' class='saveNew' value='saveNew'>save</button><button name='newCancel'>cancel</button></form></div>").appendTo('.krudSpace');
  31. });
  32. //save new
  33. jQuery('.saveNew').live("click",function(e)
  34.     {
  35.     e.preventDefault();
  36.     jQuery.ajax({
  37.     type: "POST",
  38.     url: "insert.php",
  39.    data: jQuery(".aj").serialize(),
  40.   success: function(data){
  41.   jQuery(this).closest('#xxx').replaceWith(data);
  42.   }
  43.  });
  44.  return false;
  45.  });
  46. });
  47. </script>
  48. </head>
  49. <body>
  50. <button id="button">New</button>
  51. <div class="container">
  52. <div class="krudSpace" id="ks">
  53. </div>
  54. </div>
  55. </body>
  56. </html>
and this is the php

  1. <?php
  2. /**
  3. test if replaced item can post and be deleted
  4. @move ---->next
  5. */
  6. $sliderKey = $_POST['sliderKey'];
  7. $sliderPosition = $_POST['sliderPosition'];
  8. $sliderTitle = $_POST['sliderTitle'];
  9. $sliderLocation = $_POST['sliderLocation'];
  10. $sliderDescription = $_POST['sliderDescription'];
  11. echo "<div class='krudItem' id='xxx'><form class='aj' name='itemForm' method='post'action=''><section><label>Slider Title</label><input type='hidden' name='sliderKey' value='$sliderKey'/><input type='hidden' name='sliderPosition' value='$sliderPosition'/><input type='text' name='sliderTitle' value='$sliderTitle'/></section><section><label>Slider Location</label><input type='text' name='sliderLocation' value='$sliderLocation'/></section><section><label>Slider Description</label><textarea name='sliderDescription'>THIS IS THE REPLACEMENT</textarea></section><button name='saveNew' class='saveNew'>save</button><button name='newCancel'>delete</button></form></div>";
  12. ?>
I am trying to replace the item that helped me post to the php script using the data returned from post

  1. success: function(data){
  2.   jQuery(this).closest('#xxx').replaceWith(data);
  3.   }

but it doesn't work.How will i fix this?.