0

I want to update the page content with JQuery ajax depending on the URL.

For example, if the url is /contact it will include the contact page without refreshing.

I have the .htaccess file which deals with the URL.

This is the JQuery that I have, but I don't think it's right for what I want to achieve.

$('#topBar .topBarElement').click(function() {
  var page = $(this).attr('href');
  $('#content').load('content/' + page + '.php');
  return false;
});
Daniel Din
  • 35
  • 7
  • which part is the problematic one? – intuitivepixel Jul 08 '13 at 23:05
  • Consider: http://stackoverflow.com/questions/736513/how-do-i-parse-a-url-into-hostname-and-path-in-javascript and using jQuery's `.load()` method. – DevlshOne Jul 08 '13 at 23:11
  • I don't know how to do this... I've created the links and jquery which is called when one of the links is clicked, but once they are clicked the page that each link redirects you to is loaded on the index page and the URL doesn't change at all... – Daniel Din Jul 08 '13 at 23:11
  • You'll need to show your existing code. The best way to do this is with http://www.jsfiddle.net – DevlshOne Jul 08 '13 at 23:16
  • I edited the question and added my jquery code. – Daniel Din Jul 08 '13 at 23:21

1 Answers1

1
<a href="/contact">Contact</a>

$("a").click( function(e) {
    e.preventDefault();
    $("body").load($(this).attr("href"));
});

Not that i recommend it.. It also needs tweaking to remove headers, duplicate scripts, and other things to take into account ..but it will wok.

Robert Hoffmann
  • 2,366
  • 19
  • 29
  • This would change the content of the page but not based on the URL, right? The thing is I want the URL to change as well :/ The URL is set to change with php but it doesn't since I added the jquery. – Daniel Din Jul 08 '13 at 23:26
  • look into history API. This will load /contact via ajax and inject the result into the body. Usually used in Single Page Applications – Robert Hoffmann Jul 08 '13 at 23:30
  • What you apparently want is a mix of this and history management – Robert Hoffmann Jul 08 '13 at 23:33
  • Hmm is there any other way which would change the page without being refreshed? Nothing else, just load the next page without refreshing the window... – Daniel Din Jul 08 '13 at 23:37
  • What you are trying to do is called SPA (single page applications), which are usually full ajax websites. While great for the user, they suck at being referenced due to their JS nature and are best suited to when a user is logged into a part of you site that's not accessible to search engines anyways. – Robert Hoffmann Jul 09 '13 at 07:18
  • You can always split your pages into templates: page with header/content/footer & content only. like this you only load the content when in ajax mode, while still having parts accessible to non ajax users like search engines. – Robert Hoffmann Jul 09 '13 at 07:20