jquery replace div content with content from a url/link

Question

I have a page with multiple divs, these are used to make tabs with jquery.

I am loading in external pages with php like mysql data with pagination etc.

what i want is when a user clicks a link in each div it replaces the div with content from that url.

e.g.

<div id="home">
<a href="home1.php">Home1</a>
<a href="home2.php">Home2</a>
</div>

<div id="music">
<a href="track.php?tid=1">Track 1</a> - <a href="artist.php?aid=3">Artist</a>
<a href="music.php">First</a> <a href="music.php?page=1">Page 1</a> <a href="music.php?page=2">Page 2</a> 
</div>

so when i click home1 it replaces the home div with home1.php when i click page 1 it replaces music div with music page 1 etc.

How do i do this? i have been looking at jquery click() and replacewith() but have not yet worked out how to do it.

Thanks.

You really need to work on your accepted questions rate - 6 questions and you have accepted 0 answers have a read of these stackoverflow.com/faq and you will see why its important to you and others to accept answers .... — Manse
– Manse, Commented Nov 10, 2011 at 13:02

Manse · Accepted Answer · 2011-11-10 12:55:09Z

Attach an event to the links you want this feature active on - you can do that by either adding a class to the links - ie

<div id="home">
<a class="livelink" href="home1.php">Home1</a>
<a class="livelink" href="home2.php">Home2</a>
</div>

<div id="music">
<a class="livelink" href="track.php?tid=1">Track 1</a> - <a class="livelink" href="artist.php?aid=3">Artist</a>
<a class="livelink" href="music.php">First</a> <a class="livelink" href="music.php?page=1">Page 1</a> <a class='"livelink" href="music.php?page=2">Page 2</a> 
</div>

And then binding the click event to all those anchors :

$('.livelink').click(function(event) {
  $(this).parent('div').load($(this).attr('href')); //load the data
  event.preventDefault(); // prevent the browser from following the link
});

or by activating all links

$('div a').click(function(event) {
  $(this).parent('div').load($(this).attr('href'));
  event.preventDefault; // prevent the browser from following the link
});

I think you are better using the first method as you have more control

zequinha-bsb · Accepted Answer · 2011-11-11 20:58:59Z

There is a [possible] problem with your thinking: when either home1.php or home2.php is loaded into the "home" div, that new content will overwrite those two links. That also goes to the "music" div. Is that what you really want?

As a matter of fact, as you have it, when the client click on Home1 or Home2, the browser is going to load those pages as you have them as href anchors.

You might want to try something in this line:

<div "home">
 <span style='display:block; ' onClick="$('#home').load('home1.php'); ">Home1</span>
 <span style='display:block; ' onClick="$('#home').load('home2.php'); ">Home2</span>
</div>

If you do not want to overwrite the links inside "home", you might want to add new divs for home1 and home2 right below the two links for example.

EDIT (per request) - disabling the onClick and adding a loading gif

<div "home">
 <span id='home1' style='display:block; ' onClick='showHomeOne(); ' >Home1</span>
 <span id='home2' style='display:block; ' onClick='showHomeTwo(); ' >Home2</span>
 <span id='home1Content' style='margin-top:4px; display:none; ' ></span>
 <span id='home2Content' style='margin-top:4px; display:none; ' ></span>
</div>
<!-- 
 in a more advanced mode, you could do showHome('1') and showHome('2')
--->

function showHomeOne() {
    if ($('#home1Content').is(':hidden') == false) return;
    // the above line works as a virtual onClick disable
    // in case the home1Content is already being displayed

    $('#home1Content').html('<img src=\'your-loading-gif.gif\' />').toggle();
    // the \' is because I am using single quotes within single-quotes
    // I could avoid this by using the double quotes on either of the sets
    // Thel toggle() will toggle from display:none to display:'' and make
    // the span visible.

    $('#home1Content').load('home1.html');
    // when the page home1.html is load, it automatically will overwrite the gif
}

This is it! Do the same for home2. Only your creativity and knowledge is the limit
to what you can do in jQuery.

Assumed that there are no extra processing to display the pages, you could use the 
version below for ALL the pages:

Change the onClick to onCLick='showPage(\'pageID-of-your-choosing\'); '

function showPage(pageID) {
    //make sure to change the hidden span IDs accordingly:

    if ($('#'+pageID+'Content').is(':hidden') == false) return;

    $('#'+pageID+'Content').html('<img src=\'your-loading-gif.gif\' />');

    $('#'+pageID+'Content').load(pageID+'.html');

    // for the last line you could replace it with a nested if:
    // var myHtml;
    // if (pageID == 'home1')
    //     myHtml='home1.html'
    // else if (pageID == 'home2')
    //     myHtml='home2.html'
    // else if (pageID == 'home3')
    //     myHtml='home3.html'
    // else if (pageID == 'music1')
    //     myHtml='music1.html'
    // else if (pageID == 'abcdefghig')
    //     myHtml='the-page-that-would-be-called-in-this-case.html';
    // --> notice the ; at the end of the last line above: end of statement
    //
    // $('#'+pageID+'Content').load(myHtml);
}

Good luck!

so far this is doing what i want well. how can i disable the onclick after first click as suggested below and possibly show a loading image? cheers.
Please vote the question up and accept my answer. That would improve my points. I will be adding to the solution as an EDIT:

dougajmcdonald · Accepted Answer · 2011-11-10 12:17:45Z

0

I think you'll probably want jQuery's .load(url); method, have a look at the API doc here:

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

answered Nov 10, 2011 at 12:17

dougajmcdonald

20.2k12 gold badges61 silver badges100 bronze badges

Comments

Jason · Accepted Answer · 2011-11-10 12:22:04Z

0

Looks like you would like to use the jQuery ajax function 'load' http://api.jquery.com/load/

I would think your onclick should look like this

onclick="loadParentWith(this)"

and somewhere you should have

function loadParentWith(link){
    $(link).parent('div').load($(link).attr('href'));
}

Just to let you know you may want to think about possibly disabling the link after the first click so that you don't try to load the same div multiple times. If somebody with a slow connection uses your page they may click on it 2 - 3 times before the first response comes back.

answered Nov 10, 2011 at 12:22

Jason

2,6171 gold badge16 silver badges5 bronze badges

3 Comments

Dunhamzzz Over a year ago

Don't use onlick, attach jQuery events.

Jason Over a year ago

I don't see any markup that can be safely selected to attach events with, unless you propose attaching to every single anchor tag inside a div. Other than that I agree as you can easily unbind the event after first click

Dunhamzzz Over a year ago

If you can add an onlick, you can cadd a class. ManseUKs answer has done it :)

Collectives™ on Stack Overflow

jquery replace div content with content from a url/link

4 Answers 4

Comments

2 Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related