使用Javascript：
function openEditor(){
$("#editor").show().animate({width: 965, height: 380}, 1500);
$("#editor textarea").show();
}
function closeEditor(){
$("#editor").animate({width: 985, height: 1}, 1500, function(){
$("#editor").hide();
$("#editor textarea").hide();
});
}
function setedit(){
$.ajax({
type: "POST",
url: "engine.php",
data: "title="+ $('title').val() +"&text="+ $('text').val(),
success: function(msg){
alert("Saved.");
closeEditor();
search();
}
beforeSend: function(){
$('#mainField').html('<img src="data/images/loader.gif" alt="Loading...">');
}
});
}
function search(){
$.get('engine.php?search='+ $('#search').val() , function(data) {
$('#mainField').html(data);
});
}
HTML：
<div id="wrapper">
<div id="header">
<span class="h1">Title</span>
<div id="header-right">
<form id="search" onsubmit="search(); return false;">
<input type="text" name="search" value="Search for article name..." onfocus="if(this.value=='Search for article name...'){this.value=''};" onblur="if(this.value==''){this.value='Search for article name...'};" /> <img src="data/images/find.png" alt="search" onclick="document.forms['editorform'].submit();">
</form>
</div>
</div>
<div id="main">
<div class="toolbox">
<span class="tool"><a href="javascript:;" onclick="openEditor(); return false;"><img src="data/images/edit.png" alt="edit"></a></span>
</div>
<div id="mainField">
lorem ipsum dolor lorem ipsum dolorlorem ipsum dolor lorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolor
</div>
<div id="editor">
<form action="engine.php" method="post" id="editorform" onsubmit="setedit(); return false;">
<span class="edit">Edit</span>
<div class="toolbox">
<span class="tool"><a href="javascript:;" onclick="document.forms['editorform'].submit();"><img src="data/images/save.png" alt="save"></a></span>
<span class="tool"><a href="javascript:;" onclick="closeEditor(); return false;"><img src="data/images/stop.png" alt="stop"></a></span>
</div>
<textarea name="text">lorem ipsum dolor lorem ipsum dolorlorem ipsum dolor lorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolor</textarea>
<input type="hidden" name="title" value="home">
</form>
</div>
</div>
</div>
CSS：
#editor {
display: none;
background: #F0F0F0;
}
span.edit {
font-size: 25px;
}
#editor textarea {
width: 950px;
height: 250px;
display: none;
}
.toolbox {
float: right;
}
再次问好stackoverflow！
我想搜索带有ajax的文章，并在字段中获取这些文章的内容。另外我想让这些文章可编辑......但整件事情都没有用？！？!!!
打开编辑器的功能不起作用...当我想搜索并按下搜索按钮时，我转到engine.php ...我无法尝试编辑因为我不能打开编辑框......
有什么问题？为什么不起作用？
这里有一个小提琴：http://jsfiddle.net/rg7Sx/
问候
答案 0 :(得分：1)
您的提交功能不会返回true或false，因此无论如何都会提交。 你的行动是engine.php。
返回false以留在网站上。
function setedit(){
...
return false;
}
我必须补充一点，你混合表格和ajax，这是不好的。
更好地绑定触发函数的单击事件，而不是使用内联事件处理程序。