Question

What i am doing:

I am appending a div with a form and some buttons.The two buttons are save and cancel.When save is clicked,i am posting the form and getting the response.I want to replace the old div that houses the save was clicked.

This is the html and jquery http://jsfiddle.net/thiswolf/vSnJJ/1/

I am using this php but the post data is not sanitized since its an example

<?php
/**
test if replaced item can post and be deleted
@move ---->next
*/
$sliderKey = $_POST['sliderKey'];
$sliderPosition = $_POST['sliderPosition'];
$sliderTitle = $_POST['sliderTitle'];
$sliderLocation = $_POST['sliderLocation'];
$sliderDescription = $_POST['sliderDescription'];
$uniqid = uniqid();
echo "<div class='krudItem' id='$uniqid'><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' id='$uniqid'>save</button><button name='newCancel'>delete</button></form></div>";

?>

This is the entire jquery i am using

jQuery(function() {
function randString(n)
{
    if(!n)
    {
        n = 5;
    }

    var text = '';
    var possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';

    for(var i=0; i < n; i++)
    {
        text += possible.charAt(Math.floor(Math.random() * possible.length));
    }

    return text;
}


 $("#button").click(function () {
$("<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' id='buttonId' value='saveNew'>save</button><button name='newCancel'>cancel</button></form></div>").appendTo('.krudSpace'); 
});
//save new
jQuery('.saveNew').live("click",function(event)
    {
     jQuery(this).attr("id",randString(7));
    event.preventDefault();
     var contentPanelId = jQuery(this).attr("id");

    jQuery.ajax({
    type: "POST",
    url: "insert.php",
   data: jQuery(".aj").serialize(),
  success: function(data){
  var quoted = "#"+contentPanelId;
  jQuery(quoted).replaceWith(data)
  }
 });
 return false; 
 });
});

It works to some extent but the old div is not replaced at all but the response is appended below the old.

Answer 1

You’re making things difficult. Just save the parent itself:

var $p = jQuery(this).parent();

and do:

$p.replaceWith(data)

Here’s an updated jsFiddle (it uses error rather than success because there is no PHP): http://jsfiddle.net/vSnJJ/2/.