edit-in-place 同一页面编辑内容

zming_5000

AJAX的一个最大特点是可以尽量的减少页面跳转，比如我们可以把浏览和编辑文字内容放到一个页面，先看看下面的这个例子
edit in place

这个例子使用了
XAJAX
工具，php的
Smarty
工具。
当然如果仅仅只是为了演示这样的一个功能，你完全可以使用自己简单的使用xmlhttprequest这个类，我这里这样写只是想展示如何利用这些工具来构建这样的页面。
上面的这个例子报行了四个文件:edit.css,edit.tpl,edit.php,edit.js，edit.css是一个简单的改变元素表示行为的css标签；
edit.tpl是简单的一个模板；edit.php简单实现如果保存用户修改的数据，演示代码中没有采用把用户修改的数据保存到数据的做法，只是简单的回应而已；edit.js是实现元素的显示和隐藏，并使用AJAX调用php函数。
下面是这些文件的内容
$cat edit.css
body{
font-family: arial, helvetica, sans-serif
font-size: small
}
.editable, textarea{
background-color: #ffffd3
}
textarea{
width: 95%
font-size: 100%
}
img.progress{
vertical-align: middle
padding: 0 10px
}
代码:
$cat edit.tpl



Edit-in-Place with Ajax


{$xajax_javascript}



{$orig}










代码:
$cat edit.php
addAssign("orig","innerHTML",$str);
     //$objResponse->addRemove("con");
     //$objResponse->addAlert($str);
    // $objResponse->addScript("document.getElementById('con').style.display='block'");
    //$objResponse->addAssign("desc","style","display:block");
      return $objResponse->getXML();
}
$xajax= new xajax();
//$xajax->debugon();
$xajax->registerFunction("saveit");
$xajax->processRequests();
require_once("setup.php");
$smarty=new Smarty();
$smarty->assign('xajax_javascript', $xajax->getJavascript('','/xajax_js/xajax.js',''));
$orig= assign("orig",$orig);
$smarty->display("edit.tpl");
?>
$cat edit.js
function change_color(op,obj)
{
if(op=="add")
obj.className="editable";
else if (op=="remove")
obj.className="";
return true;
}
function editit(obj)
{
obj.style.display="none";
document.getElementById("mirror").innerHTML=obj.innerHTML;
document.getElementById("cp").style.display="block";
document.getElementById("save").style.display="block"
}
function call_saveit(formdata)
{
xajax_saveit(formdata);
document.getElementById("cp").style.display="none";
document.getElementById("save").style.display="none";
document.getElementById(orig).style.display="block";
}
function cancel()
{
document.getElementById("cp").style.display="none";
document.getElementById("save").style.display="none";
document.getElementById(orig).style.display="block";
}


本文来自ChinaUnix博客，如果查看原文请点：http://blog.chinaunix.net/u/3876/showart_76958.html