jQuery Routing using Single Page Application without framework

Rate this post

Today, We want to share with you jQuery Routing using Single Page Application without framework.In this post we will show you Single Page Apps with jQuery Routing, hear for jquery routing framework we will give you demo and example for implement.In this post, we will learn about jquery single page application template with an example.

jQuery Routing using Single Page Application without framework

There are the Following The simple About jQuery Routing using Single Page Application without framework Full Information With Example and source code.

Free Live Chat for Any Issue

As I will cover this Post with live Working example to develop jquery single page application framework, so the some major jquery router, jquery routing , jquery router example is following below File structure.

Building a Single Page Webapp with jQuery

Sammy routing script is like

Read Also:  how to redirect from one page to another in html on button click?

You Wull use simple Javascript sammy.js for routing. here, Sammy is a 5.2K + more jQuery all the dependent differents library

var app = $.sammy(function() {
  this.get('#/', function() {
    //your jquery router example function
  this.get('#services/', function() {
    //your jquery routing function 
  this.get('#contact/', function() {
    //your jquery router function

File structure

jQuery Routing using Single Page Application without framework

- index.html
- app.js 
- css
--- style.css 
- js
--- jquery-1.11.3.min.js
--- sammy.min.js
--- sammy.template.js 
- data
--- blogs.json
- templates
--- blog.template
--- blog-detail.template
--- services.template

HTML Markup Languages


This is where I will make a simple HTML form and PHP server side source code for our web application. To make the forms simply all souce code copy and write it into your any text editor Like Notepad++, then save file it as index.html.

<!DOCTYPE html>
<title>jquery router, jquery routing , jquery router example</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script  src="admin/js/jquery-1.11.3.min.js" type="text/javascript"></script>
  <script  src="admin/js/sammy.min.js" type="text/javascript"></script>
  <script src="admin/js/sammy.template.js" type="text/javascript"></script>
  <link rel="stylesheet" href="admin/css/style.css" />
  <script src="admin/app.js"></script>
<h2>jquery router, jquery routing , jquery router example</h2>
  <div class="header-container">
    <header class="wrapper clearfix">
          <li><a href="#/">Home</a></li>
          <li><a href="#/contact/">Contact</a></li>
  <div class="main-container">
    <div class="main wrapper clearfix">
      <div id="app">
      <!-- template will be injected here -->

Defining jquery Routes


(function($) {
  var app = $.sammy('#app', function() {
    this.around(function(callback) {
      var dataContent = this;
          .then(function(menus) {
            dataContent.menus = menus;
    this.get('#/', function(dataContent) {
      $.each(this.menus, function(i, menu) {
        dataContent.render('templates/blog.template', {id: i, menu: menu})
    this.get('#/contact/', function(dataContent) {
        var str=location.href.toLowerCase();
        dataContent.render('templates/contact.template', {})
    this.get('#/blog/:id', function(dataContent) {
      this.menu = this.menus[this.params['id']];
      if (!this.menu) { return this.notFound(); }
    this.before('.*', function() {
        var hash = document.location.hash;
  $(function() {

Angular 6 CRUD Operations Application Tutorials

Read :

Read Also:  Passing data to views from routes in Laravel


You can also read about AngularJS, ASP.NET, VueJs, PHP.


I hope you get an idea about jQuery Routing using Single Page Application without framework.
I would like to have feedback on my Pakainfo.com blog.
Your valuable feedback, question, or comments about this blog are always welcome.
If you enjoyed and liked this post, don’t forget to share.