How to load external page/content into a DIV

Question

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).

Each of this actions need a specific form to be exectuted, and I've already created all these forms in separated aspx pages.

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?

Answer 1

Use jQuery (as I've understood your actions are links 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);
        });
    });
});

Answer 2

This is exactly what Ajax is for. First create a XMLHttpObject and use it to open a 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 come back 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