CODEWITHSUNDEEP
jqueryhtmlhyperlinkload
FrK
FrK

Reputation: 89

Load page in same DIV as link

I'm loading a page into a DIV with jQuery which works fine. On the page that is loaded in the DIV I have a link and when this link is being clicked I would like to open that page into the same DIV as the page is loaded. I have no idea where to start and I've already done a lot research. Can someone help?

I'm using this to load a page into the DIV.

 $(function(){
     $('#div').empty();
     $('.nav a').on('click', function(e){
         e.preventDefault();
         var page_url=$(this).prop('href');
         $('#content').load(page_url);
     });
 });

Upvotes: 1

Views: 2037

Answers (2)

Tricky12
Tricky12

Reputation: 6822

You can use an <iframe> for this, and just make its height and width 100% of its containing div.

HTML 1

<script>
$(function(){
    $('#div').empty();
    $('#content').html('<iframe src="embed.html" height="100%" width="100%" />');
});
</script>

<div id="div"></div>
<div id="content"></div>

HTML 2 (Embedded page)

<script>
$('.nav a').on('click', function(e){
    e.preventDefault();
    var page_url=$(this).prop('href');
    $('#test').load(page_url);
});
</script>

<div id="test" class="nav">
    <a href="http://www.wikipedia.com">Link</a>
</div>

Upvotes: 0

shubniggurath
shubniggurath

Reputation: 966

$('#yourlinkinthediv').on('click',function(){
    $('#yourdiv').load('somepageuri');
});

Edit: May not want the link to be a 'real' link but you can style it as such. Nonetheless the onclick event above will work. Just know that if you use a legit link, you're going to need to neutralize it either with some js or by using the following href:

<a href="javascript:"

or some such.

If you use a legit link though and just neutralize the normal link behavior with javascript, you can pull the href from the link with a slight modification to my first code block above.

$('#yourlinkinthediv').on('click',function(){
    $('#yourdiv').load($(this).attr('href'));
});

Upvotes: 1

Related Questions