CODEWITHSUNDEEP
jqueryajax
user964778
user964778

Reputation: 35

jquery replace div content with content from a url/link

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.

Upvotes: 0

Views: 9453

Answers (4)

zequinha-bsb
zequinha-bsb

Reputation: 719

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!

Upvotes: 1

Manse
Manse

Reputation: 38147

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

Upvotes: 3

Jason
Jason

Reputation: 2617

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.

Upvotes: 0

dougajmcdonald
dougajmcdonald

Reputation: 20067

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

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

Upvotes: 0

Related Questions