SOW : Ajax navigation

SOW plugins are part of Smarty Core, written from scratch!

src/js/sow.core/sow.ajax_navigation.js

Unique feature!

No other template in any marketplace has it!

Plugin written from scratch to enable full ajax navigation, solving many common problems.
This documentation is using it, all pages are served by ajax.

Full Ajax demo poroject is using this plugin!

.js-ajax class on your links is all you need!

Features

parsing the content and "catching" javascript files & inline js code.
-or- serving content without parsing (dynamic websites)
URL update without page refresh & enableing back|forward history
callback available for each link
scroll up when new content is loaded (optional)
able to reinit all plugins used by that specific ajax page (example: datepicker will work for any ajax page without doing anything)
SEO - not affected in any!
very impressive speed for visitors - pages are loaded in milliseconds - instantenously!
Lightweight ~10Kb minified (~3.5Kb gzipped).

How the parser works?

This documentation is full ajax - so you can see it as a real example!
We have two important containers on each page:
1. #middle - main content of each page
2. #page_js_files - containing only SPECIFIC javascript files of each page. The main javascripts (like core.min.js) are outside of this container.

When you click a link (let's say <class="js-ajax" href="changelog.html">), the plugin is loading changelog.html page this way:

load changelog.html via ajax
extract the #middle content of changelog.html
extract specific page javascripts (files and/or inline code) from #page_js_files container (if there is any).
The plugin will now update the content and firing javascripts in their order (if page has js files/code).

Note: Watch your browser console while you navigate in this documentation - you can see how ajax is firing!

Ajax navigation

This entire documentation is fully using it, so is straight forward:

                  
                    <a class="js-ajax" href="changelog.html">Changelog</a>
                    <a class="js-ajax" href="this-page-dos-not-exist.html">Non-existent page (404)</a>

                  
                    <!-- 

                      Optional attributes you might need 
                      on individual .js-ajax link

                    -->
                    data-ajax-method="GET" 
                    data-ajax-target-container="#middle" 
                    data-ajax-update-url="true" 
                    data-ajax-show-loading-icon="true" 
                    data-ajax-callback-function="" 
                    data-ajax-callback-before-push="false" 
                    data-ajax-parser-extract-element="#middle, #page_js_files" 
                    data-ajax-autoscroll-to-content="true"

                  
                    <!-- 
                      :: Ajax navigation - meta title & meta description

                        When page has no meta tags because a page section is loaded via ajax
                        add these custom tags to each section/page (optional).

                        Pay attention when page is loaded directly (or by refresh)
                        these tags should not be displayed (handled by your backend)
                        By hidden them is a 'black hat seo' (not a problem for admin panels).

                        Useful only if the parser not used or page has no meta tags.
                    -->
                    <meta-title>...</meta-title>
                    <meta-description>...</meta-description>
                    <meta-canonical>...</meta-canonical>
                    <meta-robots>...</meta-robots>

You might need to load a partial - piece of content - via ajax, when user click a link/button. This will update a container!

Click to load

ajax content will be pushed here!

                  
                    <!--

                      Note: data-href used instead of href 
                      to avoid used user "open in new tab"
                      Of course, href can be used, if you want to! 

                      The plugin is sending to your backend &ajax=true
                      so you can manage which version you show to your users!

                    -->

                    <a class="js-ajax" 
                      href="#" data-href="_ajax/demo_content.html" 
                      data-ajax-target-container="#my_ajax_container" 
                      data-ajax-update-url="false" 
                      data-ajax-show-loading-icon="true" 
                      data-ajax-callback-function="" 
                      data-ajax-callback-before-push="false" 
                      data-ajax-parser-extract-element="" 
                      data-ajax-autoscroll-to-content="true" 
                      class="js-ajax">Click to load</a>

                    <div id="my_ajax_container"><!-- ajax container --></div>