HTML 5 page navigation

Question

What is the preferred way to navigate between HTML5 web pages without using any server side scripting language. Would Jquery be a good choice?

Consider a user logs in and lands at home page. Home page contains many links to navigate to other pages.

Edit 1

I need to communicate to server via AJAX to perform some operations and pass on variables and data between web pages. But I cannot use JSP or PHP to create HTML dynamically.

yes what's wrong with anchors. What you are trying to do? Post some more specifics. — Akki619, Aug 13 '13 at 12:15
I need to send data between web pages and also need to make ajax calls to communicate to server — Adiant, Aug 13 '13 at 12:16
You can't _"make ajax calls to communicate to server"_ if you don't use any server side language. — War10ck, Aug 13 '13 at 12:18
I am not going to use any view scripting languages like PHP or JSP, but i do need to make web service call using ajax. — Adiant, Aug 13 '13 at 12:20
How could you use Ajax to pass data between web pages if you aren't using dynamic server-side code? Are you saying you want to implement one of those one-page web sites that just reloads part of the page with Ajax when the user navigates? — nnnnnn, Aug 13 '13 at 12:20
Consider a scenario i have a text box to take user name as input. After receiving the input i will make a ajax call to a web server to perform some task. If the ajax is successul then i will show the response in another page by redirecting the detains to the next page again by the use of ajax. But is there any better way of doing in pue html5, css or jquery etc — Adiant, Aug 13 '13 at 12:25
@user2560360 your need to gain more knowledge start here http://jquerymobile.com/demos/1.2.0/docs/pages/page-anatomy.html — Akki619, Aug 13 '13 at 12:27
Send your parameters as `GET` request `page.html?name=value`, then use [this approach](http://stackoverflow.com/a/901144/1725764) to get the `GET` parameter via JavaScript. — Hashem Qolami, Aug 13 '13 at 12:27
What you dont see here is that AJAX will use a server side language to process the data you send via your AJAX callAND then return a result. — Sebastien, Aug 13 '13 at 12:27
Yes, ajax will use some server side language such as Java or so and respond back with JSON or XML. But there is not scripting language like (JSP, PHP) is used to design the web page. Based on the response received i need to send the data to another existing html file and places the content in appropriate places using jquery or so. All i want is the approch of using jquery is the best or is there any other way to do this. — Adiant, Aug 13 '13 at 12:35

score 1 · Answer 1 · answered Aug 13 '13 at 12:18

1

for link to your different pages in HTML5 you use this code.

<a href="url to your page">link 1 </a> 
<a href="url to your page">link 1 </a> 
<a href="url to your page">link 1 </a>

answered Aug 13 '13 at 12:18

Gerald Horton

114
2

score 1 · Accepted Answer · answered Aug 13 '13 at 12:23

1

HTML

<nav>
  <a href="index.html">Index</a>
  <a href="contact.html">Contact</a>
</nav>
<section id="content"></section>

jQuery

$(function(){
  $('nav a').on('click', function(e) {
    var htmlFile = $(this).attr('href');
    e.preventDefault();
    $('#content').load(htmlFile);
  });
});

answered Aug 13 '13 at 12:23

Alexander Støver

645
3
7

This is probably the best solution for me. But how would i send data/variables across web pages using jquery? – Adiant Aug 13 '13 at 12:30
`$('#content').load(htmlFile, {'something':'somevalue'});` – Alexander Støver Aug 13 '13 at 12:33
Great this is what i am loking for – Adiant Aug 13 '13 at 12:40

score 0 · Answer 3 · answered Aug 13 '13 at 12:15

I would say anchor tags are the best choice to do this because of their universal and flexible DOM use:

<a href="www.site.com/page1.html">Page 1</a>
<a href="www.site.com/page2.html">Page 2</a>
<a href="www.site.com/page3.html">Page 3</a>

If users will be logging in then you will have to use a scripting language such as PHP and establish database connections with MySQL.

jQuery has a very easy to use AJAX implementation.

score 0 · Answer 4 · answered Aug 13 '13 at 12:26

It sounds like you're wanting to create a single page application that gets it's data from a third party service?

I would recommend Sammy.js for intercepting routes, and jQuery to do your actual ajax calling.

If you're doing a lot of dynamic content dynamic content I would also recommend Knockout.js

score -1 · Answer 5 · answered Aug 13 '13 at 12:30

Great for use will be:

<a href="page1.html">Page 1</a>
<a href="page2.html">Page 2</a>
<a href="page3.html">Page 3</a>

It's more faster than using this:

<a href="http://domain.com/page1.html">Page 1</a>

Of course, you'll need to have html subpages (page1...) in the same folder as your index.html.

HTML 5 page navigation

5 Answers5

Linked