single page application implemented with javascript/jQuery [closed]

Question

Closed. This question needs to be more focused. It is not currently accepting answers.

Want to improve this question? Guide the asker to update the question so it focuses on a single, specific problem. Narrowing the question will help others answer the question concisely. You may edit the question if you feel you can improve it yourself. If edited, the question will be reviewed and might be reopened.

Closed 10 years ago.

Improve this question

Hi I am looking for a very simple example of single page web application implimented with pure javascript/jquery. Don't want to use angular backbone ember etc..

possible duplicate of Architecture for single page application (JavaScript) — Barmak Shemirani
– Barmak Shemirani, Commented Jun 21, 2015 at 5:37
Anybody has answer to this question ?? or just want to mark this duplicate... ?? anybody ? — shikhar chauhan
– shikhar chauhan, Commented Jun 21, 2015 at 5:44
have you tried google? the web is full of simple examples like these — svarog
– svarog, Commented Jun 21, 2015 at 5:48
@svarog did you try understandt or even read my question.. please try understanding what I wanted. any very simple example of hash linking implementation. — shikhar chauhan
– shikhar chauhan, Commented Jun 21, 2015 at 6:33
@shikharchauhan you never mentioned hash linking. The question asks for an example of a web page using JavaScript...well you can get that anywhere. You didn't say what features it should have, and even if you did, you can research them yourself. That's why the question is closed. The question might be "simple" but it's also massively open-ended and completely unsuitable for answering in the SO style. — ADyson
– ADyson, Commented Aug 29, 2017 at 12:13

NightOwlPrgmr · Accepted Answer · 2021-10-19 17:34:10Z

30

2021 Update:

It's nearing the end of 2021 and thought I would provide a newer solution/guide if possible. I did end up finding one, created a couple years ago, that uses modern day tools (npm, webpack, ES6, etc.):

spa-without-framework

However, I reviewed the original three guides below and TBH they're still relevant 6 years later! Which one you should choose solely depends on what suits your needs best.

Here are some links to help point you in the right direction. If you don't want to use any frameworks (Angular, Backbone, etc.) these links will be good. They use jQuery and perhaps one other library/plugin. Hope they help!

Guide A - uses jQuery library handlebars

Guide B - uses jQuery plugin bbq

Guide C - uses jQuery plugin sammy.js

edited Oct 19, 2021 at 17:34

answered Jun 21, 2015 at 6:03

NightOwlPrgmr

1,3743 gold badges22 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

shikhar chauhan Over a year ago

Thanks @nightowlprgmr Guide B looks usefull i explore it further..thank you man!

Modder Over a year ago

sammy.js is nice!

omikes · Accepted Answer · 2025-03-18 01:25:22Z

8

You can achieve a simple SPA by dynamically updating the content based on the hash-based routing (window.location.hash). Below is a basic example:

// Define app routes
const routes = {
  "#home": "<h2>🏠 Home Page</h2><p>Welcome to our single-page application.</p>",
  "#about": "<h2>ℹ️ About Us</h2><p>We are a simple SPA built with JavaScript and jQuery.</p>",
  "#contact": "<h2>📞 Contact</h2><p>Get in touch via email at [email protected].</p>"
};

function loadPage() {
  let hash = window.location.hash || "#home"; // Default to home
  $("#app").html(routes[hash] || "<h2>404 Not Found</h2>");
}

$(document).ready(function() {
  loadPage(); // Load initial view
  $(window).on("hashchange", loadPage); // Listen for hash changes
});

body { font-family: Arial, sans-serif; }
nav a { margin: 10px; cursor: pointer; color: blue; text-decoration: underline; }
.content { margin-top: 20px; }

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Simple SPA with JavaScript & jQuery</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

  <!-- Navigation Menu -->
  <nav>
    <a href="#home">Home</a>
    <a href="#about">About</a>
    <a href="#contact">Contact</a>
  </nav>

  <!-- Dynamic Content Area -->
  <div class="content" id="app"></div>

</body>
</html>

This code is easy to understand and should help you create a simple single-page web application.

edited Mar 18 at 1:25

answered Jun 21, 2015 at 5:57

omikes

8,7119 gold badges39 silver badges52 bronze badges

3 Comments

pyprism Over a year ago

Link is not valid; please update the link

NightOwlPrgmr Over a year ago

I would argue your answer isn't relevant to the OP's request since HTML5 Boilerplate is not intended for creating SPAs. It might have that capability, but it doesn't mention it or explain how to do this. I also couldn't find any guides that walk you through setting up a SPA with HTML5 Boilerplate. In short, one would spend more time hacking the template to get this to work as a SPA that they would be better off with something else.

omikes Over a year ago

I will bring a core example of the page here to illustrate.

Collectives™ on Stack Overflow

single page application implemented with javascript/jQuery [closed]

2 Answers 2

2 Comments

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Linked

Related