JavaScript父子页面之间的相互调用
父页面:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<!--<script src="/Scripts/jquery-1.7.1.js"></script>-->
<link href="../Content/style/NavPager.css" rel="stylesheet" />
<link href="../Content/style/tableStyle.css" rel="stylesheet" />
<link href="../Scripts/jquery-easyui-1.3.1/themes/default/easyui.css" rel="stylesheet" />
<link href="../Scripts/jquery-easyui-1.3.1/themes/icon.css" rel="stylesheet" />
<script src="../Scripts/jquery-easyui-1.3.1/jquery-1.8.0.min.js"></script>
<script src="../Scripts/jquery-easyui-1.3.1/jquery.easyui.min.js"></script>
<script src="../Scripts/jquery-easyui-1.3.1/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript">
$(function () {
initTable();//初始化表格
$("#DetailDiv").css("display", "none");
$("#EditDiv").css("display", "none");
});
//绑定点击详情的 超级链接
function bindDetailLinkClickEvent() {
$("#tbBody a:contains('详情')").click(function () {
var newsId = $(this).attr("newsId");
getNewsToDetail(newsId);//获取新闻详情然后把数据放到div上去。
showDetailDialog();//弹出一个显示详情的Div
return false;
});
}
//弹出一个显示详情的Div
function showDetailDialog() {
//弹出一个Div
$("#DetailDiv").css("display", "block");
//把这个div弹出到 中间，而且是模态
$("#DetailDiv").dialog({
title: "详情对话框",
width: 500,
height: 500,
modal: true,
collapsible: true,
minimizable: true,
maximizable: true,
resizable: true,
buttons: [{
text: "添加",
iconCls: "icon-add",
handler: function () {
alert('add');
}
}, {
text: "关闭",
iconCls: "icon-cancel",
handler: function () {
$("#DetailDiv").dialog("close");
}
}]
});
}
//获取新闻详情然后把数据放到div上去。
function getNewsToDetail(newsId) {
//发送一个异步请求，把后台加载的数据放到div上去。
$.getJSON("GetNewsById.ashx", { id: newsId }, function (data) {
$("#spTitle").text(data.title);
$("#spContent").html(data.content);
});
}
//初始化表格
function initTable(postData) {
$.ajax({
url: "LoadAllNews.ashx",
data: postData,//发送后台数据
dataType: "json",//后台返回数据的类型
type: "post",//请求类型
success: function (data) {
$("#tbBody").html("");
for (var i in data.NewsList) {
var strTr = "<tr>";
strTr += "<td>" + data.NewsList[i].title + "</td>";
strTr += "<td>" + data.NewsList[i].ID + "</td>";
strTr += "<td>" + data.NewsList[i].people + "</td>";
strTr += "<td><a newsId='" + data.NewsList[i].ID + "' href='#'>详情</a> ";
strTr += "<a class='deleteLink' newsId='" + data.NewsList[i].ID + "' href='#'>删除</a>";
strTr += "<a class='editLink' newsId='" + data.NewsList[i].ID + "' href='#'>修改</a></td>";
strTr += "</tr>";
$("#tbBody").append(strTr);
}
//把分页的标签添加到页面里面去
$("#NavLink").html(data.NavHtml);
//绑定分页超级链接标签的点击事件
bindNavLinkClickEvent();
bindDetailLinkClickEvent();//绑定点击详情的 超级链接
bindEditLinkClickEvent();//绑定点击修改的 超级链接
bindDeleteLinkClickEvent();//绑定点击修改的 超级链接
}
});
}
//绑定分页超级链接标签的点击事件
function bindNavLinkClickEvent() {
$(".pageLink").click(function() {
//改变当前 页数据。
//改变分页标签。
var href = $(this).attr("href");
var strPostData = href.substr(href.lastIndexOf('?') + 1);
initTable(strPostData);//
return false;
});
}
function bindDeleteLinkClickEvent() {
$(".deleteLink").click(function () {
var link = $(this).parent().parent();
var newsId = $(this).attr("newsId");
$.messager.confirm("提醒", "会删除吗？", function(r) {
if (r) {
//发送异步请求到后台，然后把这条数据剁掉。
$.post("DeleteNews.ashx", { id: newsId }, function(data) {
if (data == "ok") {
link.fadeOut("slow");
} else {
$.messager.alert("提醒","删除失败","warning");
}
});
}
});
return false;
});
}
//绑定 修改 超级链接的事件的响应方法
function bindEditLinkClickEvent() {
$(".editLink").click(function() {
var newsId = $(this).attr("newsId");
//从后台加载数据然后把数据放到修改文本框上去。
//getNews2EditForm(newsId);
//弹出对话框之前，把iframe标签的src属性设置成 修改页面地址。
$("#editFrame").attr("src", "EditNews.aspx?id=" + newsId);
showEditDialog(); //显示修改的对话框
});
}
//从后台加载数据然后把数据放到修改文本框上去。
function getNews2EditForm(newsId) {
$.getJSON("GetNewsById.ashx", {id:newsId}, function(data) {
$("#txtTitle").val(data.title);
$("#txtPeople").val(data.people);
$("#hidId").val(data.ID);
});
}
//显示修改的对话框
function showEditDialog() {
//显示一个修改 的对话框
$("#EditDiv").css("display", "block");
//把这个div弹出到 中间，而且是模态
$("#EditDiv").dialog({
title: "修改对话框",
width: 500,
height: 500,
modal: true,
collapsible: true,
minimizable: true,
maximizable: true,
resizable: true,
buttons: [{
text: "修改",
iconCls: "icon-edit",
handler: submitChildEditFrm //submitEditFrm
}, {
text: "关闭",
iconCls: "icon-cancel",
handler: function () {
$("#EditDiv").dialog("close");
}
}]
});
}
//提交子容器的修改表单。
function submitChildEditFrm()
{
//拿到子容器的windows对象
var domFrame = $("#editFrame")[0];
domFrame.contentWindow.submitFrm();
}
//当修改成功之后，由子容器来调用的方法
function afterEditSuccess() {
//关闭对话框，刷新表格
$("#EditDiv").dialog("close");
initTable();
}
//异步提交修改的表单
function submitEditFrm() {
var postData = $("#editFrm").serializeArray();
$.post("ProcessEdit.ashx",postData, function(data) {
if (data == "ok") {
//修改成功：关闭修改对话框，刷新表格
$("#EditDiv").dialog("close");
initTable();//刷新表格
} else {
$.messager.alert("提醒消息", "修改败了", "warning");
}
});
}
</script>
</head>
<body>
<table>
<thead>
<tr>
<th>新闻标题</th><th>新闻编号</th><th>发布人</th><th>操作</th>
</tr>
</thead>
<tbody id="tbBody">
</tbody>
</table>
<!----------------------显示分页控件标签 开始------------------------------>
<div id="NavLink" class="paginator">
</div>
<!----------------------显示分页控件标签 结束------------------------------>
<!----------------------显示修改的对话框 开始------------------------------>
<div id="EditDiv">
<iframe src="javascript:void(0)" id="editFrame" width="100%" height="100%" frameborder="0"></iframe>
</div>
<!----------------------显示修改的对话框 结束------------------------------>
<!----------------------显示详情信息的对话框 开始------------------------------>
<div id="DetailDiv">
<h1>显示详情信息</h1>
<hr/>
<table>
<tr>
<td>新闻标题：</td>
<td><span id="spTitle"></span></td>
</tr>
<tr>
<td>新闻内容：</td>
<td><span id="spContent"></span></td>
</tr>
</table>
</div>
<!----------------------显示详情信息的对话框 结束------------------------------>
</body>
</html>
子页面:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="EditNews.aspx.cs" Inherits="WebDemo.Web._2013_12_3.EditNews" ValidateRequest="false" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="/Scripts/jquery-1.7.1.js"></script>
<script type="text/javascript">
$(function () {
});
function submitFrm() {
//alert("我是子容器");
//让下面的表单整体的异步的提交到后台。
var postData = $("#form1").serializeArray();
$.post("EditNews.aspx", postData, function (data) {
if (data == "ok") {
//修改成功
//关闭父容器的对话框，刷新父容器的表格。
window.parent.window.afterEditSuccess();
}else {
alert("败了啊");
}
});
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input type="hidden" name="hidId" value="<%= News.ID %>"/>
<table>
<tr>
<td>新闻标题:</td>
<td>
<input type="text" name="title" value="<%= News.title %>"/>
</td>
</tr>
<tr>
<td>新闻发布人:</td>
<td>
<input type="text" name="people" value="<%= News.people %>"/>
</td>
</tr>
<tr>
<td>新闻内容:</td>
<td>
<textarea name="content" cols="50" rows="10">
<%= News.content %>
</textarea>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
JavaScript父子页面之间的相互调用的更多相关文章
- Iframe父页面与子页面之间的相互调用
iframe元素就是文档中的文档. window对象: 浏览器会在其打开一个HTML文档时创建一个对应的window对象.但是,如果一个文档定义了一个或者多个框架(即:包含一个或者多个frame或者i ...
- js和vue方法的相互调用（iframe父子页面的方法相互调用）。
项目是前后端不分离的,模板引擎使用的JSP. 但是使用了Vue+ElementUI,这里列举一些常用的调用方式,有时候可能. 在js里调用vue方法 我们需要把方法注册到vue对象之外的页面,所以对与 ...
- 父子页面之间元素相互操作(iframe子页面)
js/jquery获取iframe子页面中元素的方法: 一.使用window.frames["iframe的ID"]获取元素 window.onload = function() ...
- iframe父子页面之间相互调用元素和函数
<!doctype html> <html> <head> <meta http-equiv="Content-Type" content ...
- C#与Javascript变量、函数之间的相互调用
原文地址:http://blog.csdn.net/wonsoft/article/details/2595743 C#与Javascript变量.函数之间的相互调用 一.javascript调用C ...
- Extjs Ext.ux.IFrame的用法 以及父子窗口间函数相互调用
Extjs Ext.ux.IFrame的用法 以及父子窗口间函数相互调用 Ext.ux.IFrame Extjs官方提供的一个组件,可以很方便的使用. 这样就完成了一个简单的IFrame的使用,通过E ...
- JAVA和C/C++之间的相互调用。
在一些Android应用的开发中,需要通过JNI和 Android NDK工具实现JAVA和C/C++之间的相互调用. Java Native Interface (JNI)标准是java平台的一部分 ...
- C 程序与 C++ 程序之间的相互调用
因为 C 编译器编译函数时不带参数的类型信息,只包含函数的符号名字.如 void foo( int x ) , C 编译器会将此函数编译成类似 _foo 的符号,C 链接器只要找到了调用函数的符号,就 ...
- react-native页面之间的相互传值
react-native页面之间的相互传值 之前在自己学习react-native的时候,在页面跳转和传值问题上花了一段时间去网上搜索和查找资料,自己总结了两个方法.可以参考 https://blog ...
随机推荐
- 30. Child Labor Problem and Its Solution 童工问题及解决方法
30. Child Labor Problem and Its Solution 童工问题及解决方法 ① Over a hundred years ago,Charles Dickens shocke ...
- 第二章：冠词（Les articles）
★定冠词(Les articles définis ): 阳性单数:le(l') 阴性单数:la(l') 阴阳性复数:les ()表示前面已经提到的人或事物: ()有关的名词已被其它的成分(补语,关系 ...
- 【转载】不得不知道的Python字符串编码相关的知识
原文地址:http://www.cnblogs.com/Xjng/p/5093905.html 开发经常会遇到各种字符串编码的问题,例如报错SyntaxError: Non-ASCII charact ...
- 20155305乔磊2016-2017-2《Java程序设计》第七周学习总结
教材学习内容总结 第十二章 Lambda 12.1 认识Lambda语法 - Lambda 教材的引入循序渐近.深入浅出 如果使用JDK8的话,可以使用Lambda特性去除重复的信息,例: Compa ...
- WCF客户端第一请求server特别慢，解决办法
最近开发WCF应用的客户端,第一连接WCF后,请求数据返回的速度特别慢,不知道原因如何.最后改了下系统生成的APP.Config文件就好了,原来没有useDefaultWebProxy的选项,没有的时 ...
- 201709012工作日记--Android消息机制
1. android的消息机制——Handler机制 参考:http://www.jianshu.com/p/9e4d1fab0f36. Android异步消息处理机制完全解析,带你从源码的角度理解: ...
- VTK7.0.0编译安装心得
配置:Win7(64bit)+VS2013+VTK700+QT5 (为了编译适应所用工业设备32bit,所有编译凑在32bit下进行) 预安装: (1)安装CMake软件,用于编译重构VTK源文件,编 ...
- java虚拟机加载系统环境变量到内存中
JVM在启动的时候,会将环境变量,转换到 系统属性 里面.可以通过System.getProperty("");来获取.catalina.home属性,就是运行tomcat的JVM ...
- 如何实现让你的网站支持Google Roboto Font
最近在写一个移动端的web项目,designer设计的页面效果图就是使用Google Roboto Font.The Roboto Font 是Google为Android 4.0 Ice-Cream ...
- 【WinRT】获取 Uri 中的参数（QueryString）键值对
在控制台或者其它类型的项目中,可以添加 System.Web,使用以下代码来获取一个 Uri 中的参数 Uri uri = new Uri("http://www.cnblogs.com/h ...