3

I've got a few pages, all with different content, the pages are all linked in the nav using relative path tags. What I'd like to do from a usability point of view is to use jquery .load to get the content from the other pages and load it into the main index page. So it wouldn't have to change pages.

I would like do is show :

<a id="show-services" href="our_services.html">OUR SERVICES</a>

for SEO / users with js turned off, but actually, load the content in using (below) for usability / UI purposes 

google.load("jquery", "1.6.2");

google.setOnLoadCallback(function() {
$("#show-services").click(function(){
    $(".content").load("our_service.html .content");
    return false;
    });
});

so have the .load override the HTML a tag even though the HTML a tag is showing (so that a spider will still see the site's structure.

pkpnd
  • 5,493
  • 20
  • 46
sam
  • 8,194
  • 30
  • 94
  • 152
  • Are you asking permission, or running in to a specific problem you need help with? – Chris Sobolewski May 04 '12 at 13:57
  • What works and what doesn't works? – sp00m May 04 '12 at 14:00
  • specific problem, when ive tryed it above so far it begins to exectute the js but then jumps straight to the html link so its kind of working in reverse, im looking to have the js override the html. When you say permission do you mean wether its a white hat seo technique? – sam May 04 '12 at 14:01

2 Answers2

1

I think what you're looking for is e.stopPropagation or e.preventDefault. This would stop the event from bubbling up i.e. the action of clicking a anchor, since you are applying the events with js. If the user doesn't have js enabled the code won't run so the action will fallback to anchors default behavior.

$("#show-services").click(function(e){
    e.preventDefault;
    $(".content").load("our_service.html .content");
    return false;
    });
});
j-u-s-t-i-n
  • 1,182
  • 1
  • 7
  • 16
  • The `return false;` should do the same thing as `e.preventDefault();`, so I'm a little surprised this actually fixed it. – Anthony Grist May 04 '12 at 14:28
  • I've run into issues where `return false;` only works on inline handlers and not on bound events. But `evt.preventDefault()` __always__ works! Not sure why this is the case, but there it is... – daniel0mullins May 04 '12 at 15:03
1

If your're going to have multiple links that work this way on your page, I'd suggest giving them all a certain classname, so that you can target them all collectively:

$("nav").on("click", ".asyncLoad", function(event){
  event.preventDefault();
  $(".content").load( event.target.href + ' .content' );
});

This assumes the links are all within a <nav> element:

<nav>
  <ul>
    <li><a class="asyncLoad" href="home.html">Home</a></li>
    <li><a class="asyncLoad" href="our_services.html">Our Services</a></li>
    <li><a class="asyncLoad" href="contact_us.html">Contact us</a></li>
  </ul>
</nav>
Sampson
  • 251,934
  • 70
  • 517
  • 549