[英]How to load external page/content into a DIV
Here's my problem: 这是我的问题:
I have do create a menu/list of actions (which would be easier if made with a control that accepts a DataSource, like listview or even Gridview with templated collumns). 我确实创建了一个菜单/动作列表(如果使用接受数据源的控件(如listview甚至带有模板化列的Gridview)进行控件,这会更容易)。
Each of this actions need a specific form to be exectuted, and I've already created all these forms in separated aspx pages. 每个操作都需要特定的形式进行计算,而我已经在单独的aspx页面中创建了所有这些形式。
The question is: what would be the best way to load these pages/forms inside a div when I select any action in the list, without making a page refresh or using iframes? 问题是:当我在列表中选择任何操作而不刷新页面或不使用iframe时,将这些页面/表单加载到div中的最佳方法是什么?
Use jQuery (as I've understood your actions are links to your forms): 使用jQuery (据我了解,您的操作是指向表单的链接):
$(document).ready(function() {
$('a.yourActionClass').click(function(event) {
event.preventDefault();
var url = $(this).attr('href');
$.get(url, function(response) {
$('div#yourDivForForm').html(response);
});
});
});
or 要么
$(document).ready(function() {
$('a.yourActionClass').click(function(event) {
event.preventDefault();
var url = $(this).attr('href');
$('div#yourDivForForm').load(url);
});
});
ADDED: 添加:
If you are returning "full" ASPX pages with forms: 如果您返回带有表单的“完整” ASPX页面:
$(document).ready(function() {
$('a.yourActionClass').click(function(event) {
event.preventDefault();
var url = $(this).attr('href');
$.get(url, function(response) {
var page = $(response);
var form = $('form', page);
$('div#yourDivForForm').prepend(form);
});
});
});
This is exactly what Ajax is for. 这正是Ajax的目的。 First create a XMLHttpObject and use it to open a url
首先创建一个XMLHttpObject并使用它打开一个URL
</ s> </ s> </ s>
var req;
function loadXMLDoc(url) {
// branch for native XMLHttpRequest object
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
req.onreadystatechange = processReqChange;
req.open("GET", url);
req.send(null);
// branch for IE/Windows ActiveX version
} else if (window.ActiveXObject) {
req = new ActiveXObject("Microsoft.XMLHTTP");
if (req) {
req.onreadystatechange = processReqChange;
req.open("GET", url);
req.send();
}
}
}
The response will come back through the processReqChange event handler. 响应将通过processReqChange事件处理程序返回。
function processReqChange() {
// only if req shows "complete"
if (req.readyState == 4) {
// only if "OK"
if (req.status == 200) {
// process the result
document.getElementById("mydiv").innerHTML = req.responseText;
} else {
alert("There was a problem retrieving the XML data:\n" + req.statusText);
}
}
}
Just replace "mydiv" with the id of the div you want to fill. 只需将“ mydiv”替换为您要填充的div的ID。
Peter 彼得
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.