Installation

Import ajaxify-navigation in your page

<head>
    <script type="text/javascript" src="js/ajaxify-navigation.js"></script>
</head>

Add the redirection interceptor on server. (Here an example for Java and Spring)

                
<!-- For 302 redirections -->
<mvc:interceptors>
    <bean class="fr.template.ui.util.web.RedirectionInterceptor"></bean>
</mvc:interceptors>

The Interceptor allows ajaxify correctly handle 302 redirects and keep synchronize the url of the page with the displayed content. (see: RedirectionInterceptor)

Configurations

Initialize ajaxify-navigation with custom attributs

$.ajaxifier.init({
    refreshModalContent : "#box-content",
    reopenHistoryTabs: "true",
    maxTabs: 9,
    refreshMenu : function(url) {
    $(".menu.menu-y ul.nav-second-level").addClass("collapse");
    $(".menu.menu-y ul li.active").removeClass("active");
    if (url.indexOf("?") != -1) {
            url = url.split("?")[0];
    }
    $(".menu.menu-y li a[href='" + url + "']").parents("ul").removeClass("collapse");
    $(".menu.menu-y li a[href='" + url + "']").parents("li").addClass("active");
    }
});
  • We keep history of open tabs (as long as there is no disconnection)
  • Max 9 tabs
  • With a function to refresh a menu

Add in your page HTML resources to display Ajaxify's popups

Examples

Open next page in JS tab

<a class="tab" href="/index">Welcome</a>

Open page in JS modal (on the target page)

<head>
    <modal/>
</head>

To exclude a special link (eg: for add another JS behavior)

<a class="noAjax" href="http://www.google.com">Welcome</a>

To close a tab after validating a form

<form closeable-tab="true" ...>

Load page with ajaxify to another JS tab

<a class="btn btn-info" href="#" id="myId">Naviguer</a>
$("#myId").click(function(e){
  $.ajaxifier.loadFromServer("/user/timeline.do", true);//false: same tab
});

Make a logout form (.logoutApp cleans the localStorage and avoid reopening tabs)

<form class="logoutApp" action="/logout">
   <button class="btn btn-default">Logout></button>
</form>

Refreshed several parts of pages in different tabs: In the form which add data, add attribut parent-refresh.

<form action="/authGroup/add.do" method="post" parent-refresh=".refreshableDiv">

In the calling page to refreshed:

div class="form-group refreshableDiv">...

If your form contains any error, you can stop the refresh process by adding an error tag in HTML head 

<head>
    <error/>
</head>

Example of error page used by ajaxify

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Error</title>
</head>
<body>
<div id="msg" class="alert alert-dander">
    Something went wrong: ${exception}
</div>
</body>
</html>

© Company 2015