6

I was looking for a lightweight way of loading external pages into a DIV onClick using jQuery.

For example:

<a href="#" onclick="jQuery Load Function with unique ID 1">Load Page 1</a>
<a href="#" onclick="jQuery Load Function with unique ID 2">Load Page 2</a>
<a href="#" onclick="jQuery Load Function with unique ID 3">Load Page 3</a>
<a href="#" onclick="jQuery Load Function with unique ID 4">Load Page 4</a>

<div id="LoadMe">Where external page will load into</div>

Any help would be really appreciated,

Thanks!

Improve this question
1
  • 1
    jQuery has good documentation: api.jquery.com Have a look at it. Commented Aug 4, 2011 at 23:08

4 Answers 4

Reset to default
11 
<a href="#" onclick="load(1);return false;">Load Page 1</a>
<a href="#" onclick="load(2);return false;">Load Page 2</a>
<a href="#" onclick="load(3);return false;">Load Page 3</a>
<a href="#" onclick="load(4);return false;">Load Page 4</a>

<div id="LoadMe">Where external page will load into</div>
<script>
function load(num){
   $("#LoadMe").load('page'+num+'.php');
}
</script>

http://api.jquery.com/load/

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

The link is broken
9 
<a href="/page1">Load Page 1</a>
<a href="/page2">Load Page 2</a>
<a href="/page3">Load Page 3</a>
<a href="/page4">Load Page 4</a>

<div id="LoadMe">Where external page will load into</div>


$('a').click(function() {
  $('#LoadMe').load($(this).attr('href'));

  return false;
});

You might want to narrow the selector a down though.

Improve this answer

Comments

3

Any reason you need onclick? If you can point your link to the page you want to fetch from the server, then jQuery's load method does exactly what you want. The simplest way I know of is:

<a href="loadThisPage1" class="pageFetcher">Load Page 1</a>
<a href="loadThisPage2" class="pageFetcher">Load Page 2</a>

<div id="LoadMe">Target div</div>
<script>
    $(function(){
        $('a.pageFetcher').click(function(){
            $('#LoadMe').load($(this).attr('href'));
        });
    });
</script>

Using onclick attributes for events is very out-dated, and definitely at odds with the jQuery patterns for development.

Improve this answer

Comments

0

Thanks for the question, made a small edit. Links within div wiki_links will fetch url and load content in wiki_c (as an alternative to the class for each link):

$("#wiki_links").on('click', 'a', function() {
  $('#wiki_c').load($(this).attr('href'));
  return false;
});
Improve this answer

Comments