How to load external page / content in a DIV
Here's my problem:
I am creating a menu / action list (which would be easier if done with a control that accepts a DataSource, like a listview or even a Gridview with templates).
Each of these actions requires a specific form to render, and I've already created all of these forms in separate aspx pages.
The question is, what is the way to load these pages / forms inside a div when selecting any actions in the list without refreshing the page or using an iframe?
a source to share
Use jQuery (as I realized your actions are related to your forms):
$(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:
$(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);
});
});
});
a source to share
This is exactly what Ajax is for. First create an XMLHttpObject and use it to open the url
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 be returned through the processReqChange event handler.
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.
Peter
a source to share