Load the link in a div tag

You cannot load pages in the div element, for that you use iframe to load the documents inside a page. For that, you can use the following code,

"WebForm1.aspx">Form1
"WebForm2.aspx">Form2
"WebForm3.aspx">Form3
"content">

The JavaScript code for that would be like,

$(document).ready(function () {
// Add handler
$('a').click(function () {
// Get the href.
var resourceHref = $(this).attr('href');
$('#content').attr('src', resourceHref);
});
});

This code will capture the "href" of the clicked hyperlink, and then load that page in the iframe.

If you do not want to use iframe, then send an asynchronous request to the page, capture the HTML content of that page, and load it in the div, the code for that would be similar,

$(document).ready(function () {
// Add handler
$('a').click(function () {
// Get the href.
var resourceHref = $(this).attr('href');
$.ajax({
url: resourceHref,
success: function (htmlContent) {
$('#content').html(htmlContent);
}
});
});
});

For this code to work, you would need to change the iframe element back to div element as in your initial code.

1 Reply

Know the answer? Post it — somebody with the same question will find it here.

Afzaal Ahmad Zeeshan9y ago
You cannot load pages in the div element, for that you use iframe to load the documents inside a page. For that, you can use the following code,
"WebForm1.aspx">Form1
"WebForm2.aspx">Form2
"WebForm3.aspx">Form3
"content">
The JavaScript code for that would be like,
$(document).ready(function () {
    // Add handler
    $('a').click(function () {
        // Get the href.
        var resourceHref = $(this).attr('href');
        $('#content').attr('src', resourceHref);
    });
});
This code will capture the "href" of the clicked hyperlink, and then load that page in the iframe.
If you do not want to use iframe, then send an asynchronous request to the page, capture the HTML content of that page, and load it in the div, the code for that would be similar,
$(document).ready(function () {
    // Add handler
    $('a').click(function () {
        // Get the href.
        var resourceHref = $(this).attr('href');
        $.ajax({
           url: resourceHref,
           success: function (htmlContent) {
              $('#content').html(htmlContent);
           }
        });
    });
});
For this code to work, you would need to change the iframe element back to div element as in your initial code.
+1