0
所以我GOOGLE了AJAX，JQuery，JSON，InnerHTML和其他一些東西。我找不到任何工作示例將DIV更改爲具有表單的外部頁面。如果表單通過驗證，則將原始DIV從表單刷新爲新的更新內容。更改DIV到外部表單頁面，一旦提交更新只有DIV
的代碼必須是可重複使用的，因爲會有多個div切換回和形式
之間來回我知道要添加JavaScript和這樣的需求，但因爲我不知道在哪裏我把剛用於演示目的的標準HTML。
我會用附帶的代碼
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
span.text{
font:normal 14px verdana;
font-style:italic;
line-height:20px;
margin:0 0 20px 10px;
}
div#link{
height:18px;
width:30px;
background:#000000;
padding:4px;
margin:0 0 0 10px;
}
div#link a{
color:#ffffff;
text-decoration:none;
font:normal 12px arial;
}
div#dynamic {
border:solid 1px #000000;
text-align:left;
text-transform:capitalize;
height:300px;
width:400px;
margin:10px 0 20px 10px;
padding:10px;
font:normal 14px arial;
}
.nopadding{
margin:0px;
padding:0px;
}
</style>
</head>
<body>
<!--link container with 'edit' hyperlink-->
<div id="link">
<a href='#0'>Edit</a>
</div>
<!--Original DIV-->
<div id="dynamic">
content content content
</div>
<span class="text">After clicking the edit link or button the div containing the content should change into a form (if you hit close the div will revert back to the original DIV content</span>
<!--link container with 'edit' hyperlink-->
<div id="link">
<a href='#1'>Close</a>
</div>
<!--Original DIV-->
<div id="dynamic">
<form class="nopadding" method="post" action"">
enter new text
<input type="textbox" name="blah" maxlength="30" />
<input type="submit" value="submit" />
</form>
</div>
<span class="text">After clicking submit and form validation the DIV is updated with the new value fro mthe form</span>
<!--link container with 'edit' hyperlink-->
<div id="link">
<a href='#0'>Edit</a>
</div>
<!--Original DIV-->
<div id="dynamic">
NEW content NEW content NEW content
</div>
</body>
</html>
解釋修訂
有人推薦一個隱藏/顯示設置加載外部頁面。我使用Jquery的切換函數來交換DIV，以便在包含表單和驗證的iFrame中加載外部頁面。迄今爲止它效果很好。
現在有2個問題。
如何單擊鏈接後單擊加載iframe內容。有8個DIV使用上述方法更新網站某些部分的信息。每次有人訪問該頁面時，我不希望8個內置頁框打開。我正在查看jquery的.load函數，但我不知道如何將它與.toggle函數結合使用。
在iframe中進行表單驗證後，如何關閉iframe並返回帶有更新內容的原始DIV。
這裏是什麼，我基本上現在已經
<!--Original page containing DIV toggle which loads an iframe-->
<a href="javascript:void(0);" id="toggle-look">Edit/Cancel</a>
<script type="text/javascript">
$(function(){
$('#toggle-look').click(function(){
$('#original').toggle();
$('#external').toggle();
});
});
</script>
<div id="original" style="width:605px;overflow:hidden;padding:0px;margin:0px;overflow:hidden;font:normal 12px arial;border:solid 1px #666666;">
Original Content Original Content Original Content Original Content
</div>
<div id="external" style="display:none;width:605px;overflow:hidden;padding:0px;margin:0px;overflow:hidden;font:normal 12px arial;border:solid 1px #666666;">
<iframe style="width:605px;height:540px;padding:0px;margin:0px;" FRAMEBORDER="0" scrolling="no" hspace="0" vspace="0" allowtransparency="true" src="external.html"></iframe>
</div>
<!--External iFrame Page With Form on external.html-->
<div id="form_and_validation">
<form method="post" action="external.html" style="padding:0px;margin:0px;">
Enter New Content:<input type="textbox" name="newcontent" />
</form>
</div>
只是一個建議。如果你的內容和表單有不同的div，並隱藏了表單，那麼做起來會更容易。然後，點擊「編輯」時，您將隱藏內容並顯示錶單。表單提交後，您可以隱藏表單並顯示更新的內容。 – yitwail 2011-05-25 04:00:27
服務器正在運行Windows 2008，IIS7，Classic ASP。最新的JQuery存在。 – Patriotec 2011-05-25 04:09:30
...和MS SQL的數據庫 – Patriotec 2011-05-25 04:21:54