0

我在做什么：

我正在附加一个带有表单和一些按钮的 div。这两个按钮是保存和取消。单击保存时，我正在发布表单并获得响应。我想替换单击保存的旧 div。

这是 html 和 jquery http://jsfiddle.net/thiswolf/vSnJJ/1/

我正在使用这个 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'];
$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>";

?>

这是我正在使用的整个 jquery

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

它在某种程度上有效，但旧的 div 根本没有被替换，而是响应附加在旧的下方。

4

1 回答 1

1

你让事情变得困难。只需保存父级本身：

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

并做：

$p.replaceWith(data)

这是一个更新的 jsFiddle（它使用error而不是success因为没有 PHP）：http: //jsfiddle.net/vSnJJ/2/。

于 2012-09-16T09:49:44.630 回答