Search jQuery

jQuery Forum

Using jQuery

thestring

Replacing the html on a clicked button with closest()

in Using jQuery • 9 years ago

I have this html and jquery

<!Doctype>
<head>
<meta charset="utf-8" />
<title>Array Crud With Positions</title>
<style type="text/css">
.container{
width:960px;
}
.krudSpace{
width:100%;
}
label{
width:15%;
float:left;
}
.krudItem{
border:1px solid orange;
background-color:pink;
margin-bottom:2%;
}
button{
margin-right:2%;
margin-bottom:0.55%;
}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
jQuery(function() {
$("#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' value='saveNew'>save</button><button name='newCancel'>cancel</button></form></div>").appendTo('.krudSpace');
});
//save new
jQuery('.saveNew').live("click",function(e)
{
e.preventDefault();
jQuery.ajax({
type: "POST",
url: "insert.php",
data: jQuery(".aj").serialize(),
success: function(data){
jQuery(this).closest('#xxx').replaceWith(data);
}
});
return false;
});
});
</script>
</head>
<body>
<button id="button">New</button>
<div class="container">
<div class="krudSpace" id="ks">
</div>
</div>
</body>
</html>

and this is the php

<?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'];
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>";
?>

I am trying to replace the item that helped me post to the php script using the data returned from post