CODEWITHSUNDEEP
javascriptjquery
monica
monica

Reputation: 91

How to Open a Links in a div tag in same page?

<a href="WebForm1.aspx">Form1</a>  
<a href="WebForm2.aspx">Form2</a>  
<a href="WebForm3.aspx">Form3</a>   
<div id="content"> </div>  ``

Here I have three links in my page. If i click the link it will go to the assigned page .Now I want to load this link into my div tag. There are some answers already available but not working.

I have tried doing this (a clarification from comments):

$(document).ready(function () { $('a').on("click", function () {           
   e.preventDefault(); 
   $("#content").load(this.getAttribute('href')); 
});

Upvotes: 2

Views: 4640

Answers (2)

NewToJS
NewToJS

Reputation: 2772

When using jQuery you must link to the jQuery library or Download a copy and link to it.

Example: Link to the jQuery library 

<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>

Once you have done that you can then start using jQuery.

jQuery has a DOM ready function, it's recommended you place all of your jQuery within this to prevent any error upon page load. This will ensure the jQuery is only run when the page had loaded the content "Page/DOM is ready".

Example: DOM ready function.

$(document).ready(function(){ 
//Script/Function go here...
});

Putting these together your attempt should work after replacing e with event or if you pass event into the function.

Example: Passing the event as e

$('a').on("click", function(e){
e.preventDefault();
$("#content").load(this.getAttribute('href'));
});

Example: Without passing the event

$('a').on("click", function(){
event.preventDefault();
$("#content").load(this.getAttribute('href'));
});

Your overall script should look like this:

$(document).ready(function(){ 
$('a').on("click", function(){
event.preventDefault();
$("#content").load(this.getAttribute('href'));
});
});

Working Demo > JSfiddle

$(document).ready(function(){ 
$('a').on("click", function(){
event.preventDefault();
//This will run just fine for files stored within  your own domain
//$("#content").load(this.getAttribute('href'));

// Load External pages.
$("#content").html('<object data="'+this.getAttribute('href')+'" />');
});
});
#content{height:250;width:500px;}
#content object{height:100%;width:100%;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<a href="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">jQuery 3.1.1</a>  
<a href="https://api.jquery.com/ready/">jQuery Dom Read</a>  
<a href="https://jsfiddle.net/2nkek4hb/1/">Form3</a>   
<div id="content"></div>

I prefer to keep my javascript/jQuery between the <head> tags butit's entirely up to you.

Snipped Update:

If you apply CSS height:100%; and width:100%; to the object then it should fit the size of #content I have edited the snippet but the changes are shown below.

CSS:

#content{height:250;width:500px;}
#content object{height:100%;width:100%;}

If you have any question about the source code above please leave a comment below and I will get back to you as soon as possible.

I hope this helps. Happy coding!

Upvotes: 1

mattja
mattja

Reputation: 79

Just a working example:

$(function() {
  $('.link').on("click", function(e) {
    e.preventDefault();
    var href = $(this).attr('href');
    $("#content").html('<object data="' + href + '" />');
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<a class="link" href="http://www.example.com">Link - Site 1</a>
<a class="link" href="http://tired.com">Link - Site 2</a>
<div id="content"></div>

Upvotes: 2

Related Questions