我使用jquery ui对话框来显示各种表单,如客户、产品等。这是通过在另一个div中显示包含aspx页面的iframe,并将此div显示为对话框来完成的。下面的结构是动态创建的。
<div id="Div1" runat="server" class="menu">
<ul>
<li>
<a id="customer"></a>
<div>
<iframe id="frame_customer"></iframe>
</div>
</li>
<li>
<a id="product"> </a>
<div>
<iframe id="frame_product"></iframe>
</div>
</li>
</ul>
</div>
将其显示为弹出窗口的jQuery代码如下:
<script>
jQuery(function ($) {
$("a").each(function () {
$.data(this, 'dialog',
$(this).next("div").dialog({
resizable: false,
autoOpen: false,
modal: false,
title: this.id,
width: 900,
height: 590,
position: ['middle', 150],
draggable: true,
open: function (event, ui) {
$(this).parent().children().children(".ui-dialog-titlebar-close").hide();
},
buttons: {
"Exit": function () {
$(this).dialog("close");
}
},
})
);
}).click(function (event) {
$.data(this, 'dialog').dialog('open');
event.preventDefault();
document.getElementById('frame_' + this.id).src = this.id + '.aspx';
return false;
});
});
$(document).ready(function () {
$("iframe").attr("scrolling", "no");
$("iframe").attr("frameborder", "0");
});
</script>
现在,我的问题是,每当我通过点击选择另一个对话框时,之前的表单就会刷新,我失去了这个表单上所有的更改和选择。那么,在切换表单时如何停止页面回发?
以下是呈现的HTML:
<!DOCTYPE html>
<html>
<head>
<title>
DiaryGold
</title>
<script src="Scripts/jquery-1.9.1.js"></script>
<script src="Scripts/jquery-ui.js"></script>
<link href="Scripts/themes/jquery-ui.css" rel="stylesheet" />
<link href="Scripts/themes/jquery-ui.min.css" rel="stylesheet" />
<link href="Scripts/themes/jquery.ui.theme.css" rel="stylesheet" />
<link href="Scripts/Site.css" rel="stylesheet" />
<link rel="stylesheet" href="Scripts/style.css" type="text/css" />
<style>
body {
background-image: url('images/AppBG.jpg');
background-repeat: no-repeat;
background-size: cover;
background-color: #0b0535;
min-height: 100%;
width: 99%;
}
html {
height: 100%;
}
.header {
position: relative;
margin: 0px;
padding: 0px;
color: #d8e8ff;
width: 100%;
}
.header h1 {
margin: 0px;
padding: 0px 0px 0px 0px;
color: #BF0413;
border: none;
line-height: 42px;
font-size: 42px;
display: inline;
}
.main {
padding: 0px 12px;
margin: 12px 8px 8px 8px;
min-height: 800px;
}
.framestyle {
width: 100%;
height: 100%;
background-color: #d8e8ff;
}
#header {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}
.center {
display: table;
margin: 0 auto;
position: relative;
width: 100%;
z-index: 10;
}
.menu {
position: relative;
float: left;
width: 100%;
width: 100%;
height: 32px;
background-color: #383838;
}
div {
opacity: 0.95;
}
.ui-widget-content {
border: 1px solid darkgray;
background: none;
color: #2c4359;
}
.ui-front {
z-index: 1 !important;
}
</style>
<script>
jQuery(function ($) {
$("a").each(function () {
$.data(this, 'dialog',
$(this).next("div").dialog({
resizable: false,
autoOpen: false,
modal: false,
title: this.id,
width: 900,
height: 590,
position: ['middle', 150],
draggable: true,
open: function (event, ui) {
$(this).parent().children().children(".ui-dialog-titlebar-close").hide();
},
buttons: {
"Exit": function () {
$(this).dialog("close");
}
}
})
);
}).click(function (event) {
if (this.id != '#') {
$.data(this, 'dialog').dialog('open');
document.getElementById('frame_' + this.id).src = this.id + '.aspx';
return false;
}
});
});
$(document).ready(function () {
$("iframe").attr("scrolling", "no");
$("iframe").attr("frameborder", "0");
});
</script>
</head>
<body>
<div class="center">
<div id="menu1" class="menu">
<ul id="nav">
<li>
<a id="#">Log Samples</a>
<div id="#"><iframe class="framestyle" id="frame_#"></iframe> </div>
<ul>
<li>
<a id="#">Commercial</a>
<div id="#"><iframe class="framestyle" id="frame_#"></iframe> </div>
<ul>
<li>
<a id="LogSamples">Log Samples</a>
<div id="LogSamples"><iframe class="framestyle" id="frame_LogSamples"></iframe> </div>
</li>
<li>
<a id="Customers">Customers</a>
<div id="Customers"><iframe class="framestyle" id="frame_Customers"></iframe> </div>
</li>
</ul>
</li>
</ul>
<li>
<a id="#">Admin</a>
<div id="#"><iframe class="framestyle" id="frame_#"></iframe> </div>
<ul>
<li>
<a id="LabUsers">Lab Users</a>
<div id="LabUsers"><iframe class="framestyle" id="frame_LabUsers"></iframe> </div>
</li>
<li>
<a id="LabRoles">Lab Roles</a>
<div id="LabRoles"><iframe class="framestyle" id="frame_LabRoles"></iframe> </div>
</li>
<li>
<a id="ScreenForRoles">ScreenForRoles</a>
<div id="ScreenForRoles"><iframe class="framestyle" id="frame_ScreenForRoles"></iframe> </div>
</li>
</ul>
</ul>
</div>
</div>
<div id="header">
<div style="width: 100%;">
<div class="MainTitle" style="position: relative; float: right;">
<img src="images/diarygold-logo.gif" height="65" />
</div>
<div class="MainTitle" style="position: relative; float: left; vertical-align: central; line-height: 80px; margin-top: 25px;">
<img alt="" class="auto-style1" src="images/LIMSLogo.png" height="40" />
</div>
</div>
</div>
</body>
</html>
Page_Load
上调用了清除数据的任何方法。请检查一下Page_Load
。 - Bharadwaj