jQuery.LazyJaxDavis

Lazy links/forms

With jQuery.LazyJaxDavis, all links and forms invokes ajax instead.
You can handle them with only a few events. I call this lazy.

Lazy links

"Lazy links" mean the anchors which jQuery.LazyJaxDavis hijacks.
If you use jQuery.LazyJaxDavis, Each normal links' click invokes LazyJaxDavis's navigation behavior. LazyJaxDavis observes all links' click using jQuery's event delegation. LazyJaxDavis hijacks all links as default. You should set fetchstart and fetchsuccess events to make your site works.

No-lazy links

Even if you want to use jQuery.LazyJaxDavis, you may not want to attach its ajax behavior to some anchors. For example, the anchors which refer imgs or pdf should not to be handled by jQuery.LazyJaxDavis. As default, you can avoid this by attaching apply-nolazy to the class attribute of the anchor like below.

<a href="somewhere.html" class="apply-nolazy">Let me avoid the lazy thing</a>

Click the links below to confirm this.

Lazy links
These links has no class attribute.
No-lazy links
These links has class="apply-nolazy".

Anchors to other domains

All anchors whose href starts with http will automatically become no-lazy links. This is why history API doesn't allow this for security reason. Basically, this is impossible to handle. Give up about that.

Let me define which anchors to be hijacked

You can define what elements to be hijacked like below.

new $.LazyJaxDavis(function(router){
  router.option({
    davis: {
      linkSelector: 'a:not([href^=#]):not(.apply-nolazy)'
    }
  });
});

As default, jQuery.LazyJaxDavis hijacks 'a:not([href^=#]):not(.apply-nolazy)'. Anchors to the id on the same page should not be contained in here.

Lazy forms

"Lazy forms" mean the forms which jQuery.LazyJaxDavis hijacks.
As lazy links, jQuery.LazyJaxDavis also hijacks all forms' submit.
jQuery.LazyJaxDavis supports GET and POST. Try to submit the forms below to confirm those works.

Note: Sorry, this "POST" form doesn't work on this GitHub server because this server doesn't allow "POST" method. Clone the repository to your local to confirm these. Instead, you can check everyfetchfail event here, haha.

GET
POST
<form action="/jQuery.LazyJaxDavis/doc/gettest.html" method="get">
    <input type="text" value="getformtest" name="getval"> <input type="submit" value="go">
</form>
<form action="/jQuery.LazyJaxDavis/doc/posttest.html" method="post">
    <input type="text" value="postformtest" name="postval"> <input type="submit" value="go">
</form>

No-lazy forms

As lazy links, you can avoid the ajax behavior to add apply-nolazy to the form's class attributes.

GET (no-lazy)
POST (no-lazy)
<form action="/jQuery.LazyJaxDavis/doc/gettest.html" method="get" class="apply-nolazy">
    <input type="text" value="getformtest" name="getval"> <input type="submit" value="go">
</form>
<form action="/jQuery.LazyJaxDavis/doc/posttest.html" method="post" class="apply-nolazy">
    <input type="text" value="postformtest" name="postval"> <input type="submit" value="go">
</form>

Make url routings for POST receivers

If you handle form POST with jQuery.LazyJaxDavis, you need to make url routings for POST receiver pages like below.

new $.LazyJaxDavis(function(router){
    router.route([
        {
            path: '/jQuery.LazyJaxDavis/doc/posttest.html',
            method: 'POST'
        }
    ]);
});

As default jQuery.LazyJaxDavis handles all incoming requests as GET. You need to override this to add method: 'POST' to url routing. Check the URL routing in this document to learn more about route.

POST submit doesn't change url

If you submit with lazy forms as above, the url displayed in the location bar is still unchanged. This is why Davis.js works like this. I think this doesn't make any trouble. But please keep in mind about this.

POST does not works with regexp

If you want to use POST. You can't use regexp as path.
I think there's no needs to use regexp with POST.

Fork me on GitHub