CODEWITHSUNDEEP
javascriptphpjqueryhtmlcss
Kyon147
Kyon147

Reputation: 798

Load content inside div from another page with a url

I currently have Jquery tabs for different content on a page but this does not help me SEO wise as google and other places will not pick up this content.

I am looking for "tabs" but instead when you click on a link it loads that bit of information.

An example of this would be here http://www.gamespot.com/watch-dogs

You click on a "tab" say reviews and it loads that content along with a url of http://www.gamespot.com/watch-dogs/reviews/

I am looking to replicate something like this rather than using Jquery tabs.

Your help would be grand!

Upvotes: 0

Views: 3670

Answers (4)

RetiredAssistant
RetiredAssistant

Reputation: 166

In order to make both search engines (which likely won't execute JQuery) and users (who might like dynamic elements) happy, you could do two solutions. You might have a link which when clicked goes to a brand new HTML page. Search engines will follow this link and see a whole separate page. Then, you might have a javascript within your page (or within the link's click event) that intercepts and overrides the original link's target and instead executes something like JQuery's $().load(). To reuse content you could have the target page be capable of loading both with and without a wrapper.

Target File:

<?php if(!isset($_GET['skipWrapper'])) { include('header.php'); } ?>
Here's the content that matters!
<?php if(!isset($_GET['skipWrapper'])) { include('footer.php'); } ?>

Source File:

<?php if(!isset($_GET['skipWrapper'])) { include('header.php'); } ?>
Here's the orginal content!
<a href="TargeFile.php" onclick="asyncLoad('TargeFile.php'); return false;">
<?php if(!isset($_GET['skipWrapper'])) { include('footer.php'); } ?>

Definition of asyncLoad:

function asyncLoad(url) { $('#targetElementId').load(url + '?skipWrapper=true'); }

However, it might be best to just stick with the traditional links rather than doing async tabs. Users get confused when the back button doesn't work or when common behaviors (like middle click to open a link in a new browser tab) no longer work.

Upvotes: 0

Viks
Viks

Reputation: 958

<div id="myContent"></div>

load method:

$("#myContent").load("url to your content which you want to load", function(){
    // things which you want to do with.
});

Upvotes: 0

Barmar
Barmar

Reputation: 780929

If you want the content to be picked up by search engines, it has to be in the original HTML. They won't run scripts that update the DOM on the client. So you need to do it in PHP:

<div>
<?php readfile("url"); ?>
</div>

However, if the URL is for a full web page, this is probably a bad idea. It will have its own <html>, <head>, and <body> tags, and these should appear only once on a page, not embedded inside another page.

Upvotes: 1

www139
www139

Reputation: 77

Try jQuery's load function:

$( "#element to put data in" ).load( "address", function() {
  alert( "Load was performed." );
  //what to do when done loading page
});

Upvotes: 0

Related Questions