【发布时间】：2011-05-25 03:39:07
【问题描述】：
所以我搜索了 AJAX、JQuery、JSON、InnerHTML 和其他一些东西。我找不到任何将 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 个 iframe。我正在查看 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，并隐藏表单，则执行此操作会更容易。然后，当单击“编辑”时，您隐藏内容并显示表单。提交表单后，您将隐藏表单并显示更新的内容。
-
服务器正在运行 Windows 2008、IIS7、Classic ASP。存在最新的 JQuery。
-
...和数据库的 MS SQL
标签： jquery ajax json html innerhtml