Search jQuery

jQuery Forum

Ajaxify your whole site out of the box

in Developing jQuery Plugins • 8 years ago

Hi all,

I made a new plugin:

Ajaxify

If included, it enhances the user experience by avoiding page reloads on the same site.
Once a content div is consistently supported across the site, it takes care of loading the sub-page content div via Ajax.

It's as easy as this:

$('#content').ajaxify();

What do you think?
How can it be further improved?
(This is only a first draft, but might be useful already)

You can see it working on the sites:

http://4nf.org/ and
http://www.oeko-fakt.de/

Enjoy!
-- Arvind

Replies(43)

Kevin B

Re: New plugin: History API

8 years ago

I've always used https://github.com/balupton/history.js, how does it compare?

-- Kevin

Kevin B

Re: Re: New plugin: History API

8 years ago

sorry, i posted that without actually looking at your plugin,

it looks like yours is essentially the same, just easier to use at the cost of less flexability.

-- Kevin

arvgta

Re: New plugin: History API

8 years ago

Thanks very much to both of you!

Kevin, I had to research a bit.

https://github.com/balupton/history.js#working-with-historyjs

This is at a different level of granularity. It works basically at a 1:1 level with existing HTML5 History API functions and events. My plugin works on an entire content div.

I found this:

https://gist.github.com/854622

...which is more similar to my plugin.
It works on a content div as well, also operating on a #menu id and seemingly other id's, too.
It seems though, and it has also been criticised in the feedback section, that everything is hardwired.

If you look at the plugin interface:

```
$.fn.ajaxify = function(){...
```

...there is no facility to pass an argument at all.
It does not operate on a selection in accordance with these guidelines:

http://docs.jquery.com/Plugins/Authoring#The_Basics

...as is the case with my plugin, which takes a jQuery selection as an input
(it is intended, that it should be able to take any sensible selection)

My plugin also is chainable, where it is unclear whether this is really useful in practice, but the facility is there.

There is room for improvement that I can think of, as far as my plugin is concerned.
I'd be very grateful, if someone knows how to do this better:

Thanks very much. Any other comments?
Does anyone feel like trying out the plugin on their site(s)?

Kevin B

Re: New plugin: History API

8 years ago

You really don't need to select the body anyway, it gets removed by the browser. I would use $.parseHTML on it then pull out the scripts, append the intended html, and then the scripts ( possibly make the scripts portion a config option? )

$.parseHTML( htmlstring [,boolean] ) where the boolean either returns scripts or doesn't. You can then select that with $(), filter out the scripts, and append the html.

here's an example

var $domfrag = $( $.parseHTML(htmlstring, true) );
var $scripts = $domfrag.find('scripts').detach();
$content.html($domfrag.filter(selector).add($domfrag.find(selector)));
if (options.executescripts) {
$("head").append($scripts);
}

and for backward compatability, you can implement the $.parseHTML method yourself from the core so that you support pre-1.8 jquery.

-- Kevin

Kevin B

Re: New plugin: History API

8 years ago

When the browser parses an html page after the DOM is ready (such as in your case), the HTML, HEAD, and BODY tags are stripped leaving their children. That html is returned as a collection of dom nodes, for example,

<html>
<head>
<title>Hello World!</title>
<script>
alert("Hello World!");
</script>
</head>
<body>
<nav><ul><li>Home!</li></ul></nav>
<div id="content">I'm the content! Hello World!</div>
</body>
</html>

will become

<title>Hello World!</title>
<script>
alert("Hello World!");
</script>
<nav><ul><li>Home!</li></ul></nav>
<div id="content">I'm the content! Hello World!</div>

With that in mind, there's no real reason to select just the stuff in the head or body because neither of those elements actually exist. you would have to parse the raw html string to get that, which could become very complex when you start to take into account inline javascript.

$.parseHTML is a new method that was added in jQuery 1.8, it's relatively simple, it just takes an html string and converts it into a DOM fragment. You can then filter that dom fragment down to your target element using $(domfrag).find(selector).add($(domfrag).filter(selector)). The purpose of both using find and filter is to take into account that the div may be a top level div if it is a direct child fo the body, or it may be a child element if it was contained within an element that isn't the body.

-- Kevin

Kevin B

Re: New plugin: History API

8 years ago

Yes, just copy the implementation from the core. The only extra thing you'll have to do is define the regexp that it uses. It can be found toward the top of the library.

-- Kevin

Kevin B

Re: New plugin: History API

8 years ago

you need to define the regexp being used,

if ( (parsed = rsingleTag.exec( data )) ) {

var rsingleTag = /^<(\w+)\s*\/?>(?:<\/\1>|)$/;

After looking at it though, i wonder how backwards compatible this use of jQuery.buildFragment is.

-- Kevin

arvgta

Re: New plugin: History API

8 years ago

where documentHTML is defined like this:

		// HTML Helper
		var documentHtml = function(html){
			// Prepare
			var result = String(html)
				.replace(/<\!DOCTYPE[^>]*>/i, '')
				.replace(/<(html|head|body|title|meta|script)([\s\>])/gi,'<div class="document-$1"$2')
				.replace(/<\/(html|head|body|title|meta|script)\>/gi,'</div>')
			;

			// Return
			return result;
		};

They then dump it normally into the selector.

Is that approach better?

Kevin B

Re: New plugin: History API

8 years ago

That definitely works, that's the way i do it in my older applications using History.js. It allows you to pull in whatever special tags you want by className.

-- Kevin

Kevin B

Re: New plugin: History API

8 years ago

I would use the other way rather than parseHTML since the 1.8 branch of jQuery is still very new, and the parseHTML method isn't very known yet.

-- Kevin

arvgta

Re: New plugin: History API

8 years ago

Hello all,

I have created this project:

New jQuery Plugin: Change content div(s) with JavaScript - faster page load time!

....following the GitHub style conventions of the example of "Balupton".

...and now integrated his formidable History.js.
My plugin now seems to work on all browsers, i.e. not only those, that implement the HTML5 History API correctly...

How can I further improve on this?

Which further features of "Balupton's" Gist:

https://gist.github.com/854622

do you like?

As Kevin mentioned, mine ought to be easier to use, because it provides a lean interface and complies to the jQuery Authoring Guidelines. It is also written object-oriented and supposed to be easier to comprehend...

Thanks in advance and kind regards.

Kevin B

Re: New plugin: History API

8 years ago

it's working, mostly.

I implemented it with:

require(["jquery", "bootstrap"],function(){

$.getScript("http://4nf.org/history.js",function(){

$(document).ready(function(){

$("#content").history();

});

and it does ajax load child pages and correctly use pushState, however, when i click home ( href="/somefolder/") it redirects to that page rather than loading it in with ajax.

Can you provide a version that doesn't require linking to your site or modifying the code to target the additional files? It doesn't sit well with me to be linking to .js file that isn't located on the local server in this particular application.

-- Kevin

Kevin B

Re: New plugin: History API

8 years ago

I would almost rather take the contents of the first .js and include them directly into my code as a module with the two sub scripts as dependencies than include a script that includes more scripts, it gives me more control over how the scripts are loaded.

-- Kevin

Kevin B

Re: New plugin: History API

8 years ago

To be fair though, my application is a bit more advanced than what you are probably targeting. For most simple websites this will work just fine.

For example, i need to be able to have a breadcrumb be updated in some areas, and removed in others. So, if the breadcrumb exists in the current DOM and the one loaded, i update it, if it exists in current dom and not in the one loaded, remove from current dom, and if it doesn't exist in current dom and does in the one loaded, add it to the current dom. History.js gives me full control of this because it allows me to parse and manipulate the returned html and append it as needed. History.js would just handle the pushState and click detection for me. (i don't actually plan to use ajax navigation in this application, at least not initially.)

-- Kevin

arvgta

Re: New plugin: History API

8 years ago

Hi Kevin,

That's great! I'm glad you implemented it successfully and deem it to be vastly error free.

The error you're mentioning is strange. I delegate deciding, whether to ajaxify a link to the "urlinternal" plugin. Have you got an idea, why the link is not ajaxified?

Can't you copy the code of http://4nf.org/history.js to your local server? It should work...

Regarding the automatic inclusion of other plugins, I was hoping that that was handy and simplifies the installation process?

You're doing complex DOM manipulation, as is the case with the breadcrumb.
You agree though, that the plugin will work fine for simpler sites, right?

There are further questions that come to my mind for improving the plugin:

- Should I trigger an event on completion, instead of a callback, like Balupton does?
- Should I provide a class for links, that are not supposed to be ajaxified?
- Should I include the ScrollTo functionality of Balupton?
- How can I further improve the documentation in the GIST and on http://4nf.org/ajaxify-overview/ ?

Thanks very much and kind regards

Kevin B

Re: New plugin: History API

8 years ago

Yes, for most sites your plugin should be able to handle most scenarios. I could copy the code to my local server, i would just have to modify history.js to point the getScript calls to my server too.

- Should I trigger an event on completion, instead of a callback, like Balupton does?
- Should I provide a class for links, that are not supposed to be ajaxified?
- Should I include the ScrollTo functionality of Balupton?
- How can I further improve the documentation in the GIST and on http://4nf.org/history-api/ ?

I'd say do both, accept a callback and bind to the event with that callback, while allowing the developer to manually bind to it himself if he/she wants.

Yes, either a class, or a rel="external".

ScrollTo should probably be optional. I personally would never use it, but others may. Your call there.

I would suggest adding the sample code to your gist, for example

$(document).ready(function(){
$("#content").history();
$("#nav").history();
});

-- Kevin

arvgta

Re: New plugin: History API

8 years ago

Hello all,

Thanks very much for your detailled reply, Kevin!

I completely overhauled the code, downsized it and made it handle several content divs at the same time, that can be addressed like this:

$(document).ready(function(){
$("#nav, #content").ajaxify();
});

In the above example, first $('body div:first') would be ajaxified (default setting, can be overriden), then iteratively $('#content') and $('#nav').
You can see it working on http://4nf.org/ and http://www.oeko-fakt.de/, that manipulate #content only.

I have also done the following:

- Updated the project:

New jQuery Plugin: Change content div(s) with JavaScript - faster page load time!

- Introduced the default event 'statechangecomplete' to be triggered if given.

- Added checking for the class '.no-ajaxy' for links that are not supposed to be ajaxified.

- Added Google Analytics handling

- Added script-handling:

Scripts are now compared with the previous page and deltas only are loaded!
I think this is better than what Balupton was doing, which didn't work very well for me.

- Added further documentation in the project and to:

Ajaxify

--------------------------------------------------

The code is now deemed to be error free.
(Kevin, last time you tried it out, there was an error in the code - feel free to try again)

Does anyone else feel like trying the plugin out?
Is the documentation comprehensive, or is there anything missing?

Thanks and kind regards

Kevin B

Re: New plugin: History API

8 years ago

I do like this part:

Scripts are now compared with the previous page and deltas only are loaded!

that's something i had to handle manually with History.js, just make sure there's a way to disable it, possibly with a default option to turnit on or off globally. Sometimes there's a script that you DO want to run every time it's loaded.

I have too much going on to do any testing with this at the moment, maybe another time.

-- Kevin

arvgta

Re: New jQuery Plugin: Change content div(s) - faster page load time

8 years ago

Hi Kevin!

Thanks very much! Would be great, if you could test it, when you've got the time...

Yes, I've implemented a simple switch as a jQuery option - great idea!

(please see:

New jQuery Plugin: Change content div(s) with JavaScript - faster page load time!

or http://4nf.org/history.js )

Also, a wait for DomReady inside the plugin itself was missing, which I've added.
Now, it shouldn't matter, whether you wrap it inside of jQuery.ready() or not.

I deem the current version at GitHub to be quite stable - it would now be great time to test it...
(edited and further simplified the source code. Please note, that the default is now to handle the top-level div first - disable if you don't want that)

*I've now added CSS handling, analogue to script handling*
(there might have been a bug in the script handling, which I removed)

I have relaxed the constraints on URLs to be ajaxified. Deep links on the same site are now allowed. This might have been irritating before, because any kind of deep link was not ajaxified.

I'm now checking for the mime type to be "text/html" - otherwise it's considered a deep link.

 if(xhr.getResponseHeader("Content-Type").indexOf('text/html') != -1) cDivs(h, 1); else location = href; //not HTML

What do you think?

This plugin has now been submitted to plugins.jquery.com:

http://plugins.jquery.com/history/

...after finding out, that the site is now back up and running :-)

Any other feedback from other observers is greatly welcome - thanks!

Kind regards, Arvind.

cajrix

Re: New jQuery Plugin: Change content div(s) - faster page load time

8 years ago

hi maybe i am total noob, but i am trying to use this plugin, www.vmshop.cz/test2 there are 3 links in div id=div1 and there is a div id=content

i need to load a content from link to div container, what am i doing wrong?

thank you

arvgta

Re: New jQuery Plugin: Change content div(s) - faster page load time

8 years ago

Hi Cajrix,

thank you for trying it out!

You've done a good job, except a few things:

- The top level div ends before the content div - it's really a #menu div - you've called it "div1" but are calling the plugin with ('#menu, #content). The first div should be called '#menu' (and override 'div1' of the plugin with "null")

- The plugin expects an "independent" architecture of sub-pages, at the bare minimum a content div.
What happens, when a user enters http://www.vmshop.cz/test2/index1.php directly?
You've got no header in that case, the plugin itself is not included - execution will stall.

But it's very interesting, you're (at least) the second person expecting such an architecture.
(please refer to Arnaud's comments at: https://gist.github.com/arvgta/4017712 ).

In Arnaud's opinion, I should try to support the architecture you're both aiming at.
Kevin what do you think? Is there room for extending the plugin that aggressively?
The bare minimum architecture would be:

- Include this plugin in the header
- Header includes delta CSS's, delta scripts
- Content div with dynamic content on sub-pages including all delta content, including references to inline scripts
- Master / home page contains common header, CSS's, common scripts etc.

First, we have to be sure that the current version is performing alright before expanding further.
I've double-checked the algorithm and am not aware of an error. If anybody spots one, please raise an "issue" at GitHub!

What's your opinion Cajrix? Is there added value in supporting the architecture you and Arnaud have expected?

I would have to make the plugin support both types of architecture in one go, possibly with another switch or even automatic detection.

Thanks once more for your interest in the subject!

Kind regards, Arvind.

arvgta

Re: New jQuery Plugin: Change content div(s) - faster page load time

8 years ago

Hello all,

I'm not going to extend the plugin to handle the above use-case in the foreseeable future.
It's important to make it clean first, before expanding it further...

Just recently, I upgraded my site: http://4nf.org/ to Wordpress.
The re-integration of the plugin worked well with the following call:

$('#page').ajaxify()

However, there is a bug, that I detected:

URLSs ending with a hash part, e.g. http://4nf.org/pagerank-bar/#comment-7 are ajaxified but on click of them nothing happens.

- The js does not crash
- Just nothing happens
- A statechange event is not triggered
- On click of other links the algorithm resumes its correct execution

Any ideas where the bug might be?

( Please have a look at the current: http://4nf.org/history.js )

Thanks in advance and kind regards

Kevin B

Re: New jQuery Plugin: Change content div(s) - faster page load time

8 years ago

There's two missing `>` in the article you linked to, where you're including the scripts.

And, i'd suggest replacing

$(result)

with

$($.parseHTML(result)) when $.parseHTML is available.

-- Kevin

arvgta

Re: New jQuery Plugin: Change content div(s) - faster page load time

8 years ago

Hello all,

Just found this: http://www.benplum.com/projects/pronto/ - maybe I can procure it and offer additional CSS and script handling, which I believe "Pronto" doesn't handle at the moment?
I'd use it as a backbone and deprecate handling of old browsers, as this introduced more bugs anyway? Pronto gracefully degrades on old browsers anyway?

Ben also is able to handle hashes, which I've disabled at the moment...

Thanks very much and kind regards

halfbytec..

Re: New jQuery Plugin: Change content div(s) - faster page load time

8 years ago

Hi,

I'm trying to use this plugin (latest version as of writing) with jQuery 1.9.1. I am calling it inside the document ready function using $('#content').ajaxify(); . However, when the script is loaded Chrome spits out the following error in the dev tools console:

Uncaught TypeError: Cannot call method 'indexOf' of null

(anonymous function)

It shows the error at line 158 of the script which happens to be:

// The getPage plugin
(function ($) {
// The Page class
var Page = function() { var $page;
this.a = function($this, t, p) {
if(!t) return $page;

if(t.indexOf('/') != -1) {
var xhr = $.get(t, function(h) {
if(!h || xhr.getResponseHeader("Content-Type").indexOf('text/html') == -1) {
location = t; //not HTML

return false;
}

What could be causing the error?

arvgta

Re: New jQuery Plugin: Change content div(s) - faster page load time

8 years ago

Hi Halfbytecode,

please make sure you're using the version at GitHub, as I'm currently experimenting with the version at 4nf.org, and we'll go from there...

If you have been using the version at GitHub, it seems that the link you clicked last on your site pointed to nowhere?
(it seems the $.get() request returns a bad xhr object)

Kind regards

halfbytec..

Re: New jQuery Plugin: Change content div(s) - faster page load time

8 years ago

I tried out the version at github and it throws the exact same error. The error occurs at page load (page containing the call to history.js and ajaxify call) and not after the click event associated with a hyperlink on the page.

arvgta

Re: New jQuery Plugin: Change content div(s) - faster page load time

8 years ago

Hello all,

I've just updated the version at GitHub and at 4nf.org to 2.0.0, which now uses a modified version of "Pronto" as a backbone.

What do you think?

Could you test once more against that version, Halfbytecode? (it's a completely different version)

Thanks in advance and kind regards

halfbytec..

Re: New jQuery Plugin: Change content div(s) - faster page load time

8 years ago

I still get the error on the exact same line. :/

arvgta

Re: New jQuery Plugin: Change content div(s) - faster page load time

8 years ago

hmm, mysterious ;-) I suppose your server is set up to reply properly to the $.get() ?

Sorry for the inconvenience!

arvgta

Re: New jQuery Plugin: Change content div(s) - faster page load time

8 years ago

Hello all,

I have a new and improved version up:

- http://plugins.jquery.com/ajaxify/

and

- http://4nf.org/ajaxify-overview/

It has improved script delta-loading and uses "Pronto" as a backbone!

I have also updated and extended the documentation heavily:

- http://4nf.org/introduction/
- http://4nf.org/mission/
- http://4nf.org/installation/
- http://4nf.org/interface/
- http://4nf.org/algorithm/
- http://4nf.org/architecture/
- http://4nf.org/pronto/
- http://4nf.org/delta-loading/

What do you think?

Thanks in advance and kind regards

wancieho

Re: New jQuery Plugin: Change content div(s) - faster page load time

8 years ago

Doesnt http://jquerymobile.com/ sort of handle the kind of features you are developing?

Only problem I noticed on your original link is if you click a few different links quickly the last click is not displayed it actually displays every link as if the clicks were chained. I would prevent chaining and destroy any "in progress" loads and definitely have some kind of visual progress for the UX.

arvgta

Re: New jQuery Plugin: Change content div(s) - faster page load time

8 years ago

Hi there,

sorry about the delay, I couldn't see your response, because this thread was not refreshed for some strange reason?

Thanks for the link to jquerymobile.com, yes it does and I'm watching it at GitHub!,

However Delta loading and other features of my plugin are unique...

Regarding the multiple clicks, I suppose you'd have to click extremely quickly to emulate what you're describing?

I've now tried a fading-in / fading-out effect as a progress sign, thanks for the idea! But I've disabled it at the moment (see below why)

I'd be grateful if you could identify features of jquerymobile, that I could incorporate into this plugin, if I missed anything...

Thanks very much and

Kind regards, Arvind.

arvgta

Re: New jQuery Plugin: Change content div(s) - faster page load time

8 years ago

Hello all,

http://4nf.org/new-features-of-ajaxify-plugin/

I don't see the need for a progress feature, because the page loads really should be rocket fast now, as long as the server-side is performing.

Other exciting new features include:

- switch "inline" (true = all inline scripts parsed, false=none)
- switch "inline-hints" (if string is found within inline scripts, they are loaded selectively - please set "inline" to false in this case)

There's plenty more interesting features coming up soon!

Kind regards, Arvind.

svecax sv..

Re: New jQuery Plugin: Change content div(s) - faster page load time

7 years ago

Hi! I admire your work and congratulations for what you created!

As a beginer I didn't understand how to use this plugin very well. Could you give me a little example?

Lets say that I have a menu and a div #content.

<ul>
<li><a href="page1.php">Page 1</a></li>
<li><a href="page2.php">Page 2</a></li>
<li><a href="page3.php">Page 3</a></li>
</ul>
<div id="content">
</div>

Every page (page1, page2...) has its own content, so I'd like to add everyone's content to div #content without page refresh.

So how can I use this plugin to do that?

As I saw, this plugin can do this very easy.

Thank you very much!

Rick van ..

Re: New jQuery Plugin: Change content div(s) - faster page load time

7 years ago

Since the code is only slightly obfuscated anyway, people can get it if they need it but have to run it through a beautifier.

The authorities will have the source but so will other developers and it will be free and open for anyone to use it and improve upon it. As you can see on my github profile, I am a big proponent of open source development: https://github.com/WoLpH?tab=repositories

arvgta

Re: Ajaxify your whole site out of the box

7 years ago

svecax : Thanks for the encouragement!
- Please use the "selector" option...

Thanks Rick for your answer!

I've currently opened my first "Pull Request":

https://github.com/arvgta/ajaxify/pulls

How is it conducted properly?

I thought it is ideal for initiating a code review at GitHub, but nobody is joining in?

Any ideas?

Regards, Arvind.

Craig Phi..

Re: Ajaxify your whole site out of the box

7 years ago

Testing Ajaxify in several desktop and mobile browsers.

Noticed, so far, that in Android Chrome when browsing 4nf.org and h2arch.at (just these 2 tested) an error "SyntaxError: Unexpected Identifier" is thrown, followed by "SyntaxError: Unexpected end of input" and "TypeError: Cannot read property 'load' of undefined", when tapping some links, eg. memory.

Anyone else noticed this?

arvgta

Re: Ajaxify your whole site out of the box

7 years ago

Hi Craig!

Thanks for the thorough testing!

After leaving this thread afloat for almost a month, I trust that nobody else that stumbled over this thread had the same experience.

Let's focus on the latest developments:

EventInfo now passed back to client (or a brief description here)
Style tags in the head now delta-loaded (or a brief description here)

Both of these were "change requests" raised by users and went through the GitHub process.

Open issues:

Thanks very much for any kind of participation in advance. It's fun!

Cheers

bronson3

Re: Ajaxify your whole site out of the box

7 years ago

Hi arvgta,

I've discover recently this script but i could manage the setup making the script working.

First of all, my site is full ajax and navigation triggered by button's script (ajax) and have there div to update for every update.

I've tried to fit the example with my needs, just no-way !

Do u have some naked (simple) examples to provide for training purpose and beginning setup ?

Many this for your reply.

Bronson

arvgta

Re: Ajaxify your whole site out of the box

7 years ago

Hi Bronson,

thanks for posting. I reckon, this is your post, asking for an Ajaxify example, too...

There are examples here:

http://4nf.org/demos/

Your plugin call looks good. I think your usage of "selector" is correct:

selector: “a.process”

(Keep in mind, you don't necessarily have to pass default parameters)

You could downsize the plugin call to:

jQuery(‘#centre’).ajaxify({
selector: “a.process”,
verbosity: 2,
inline: false,
turbo: false,
memoryoff: true
});

What error are you getting in the console?

Feel free to post a link to your site here!

Regards

santhoshr..

Re: Ajaxify your whole site out of the box

6 years ago

hi,

i'm using asp.net along with kenod ui as my FrontEnd and i need to ajaxify my application

and i'd downloaded your code and used its redirect from one page to another is fine but from one page to another page the script i'm using is not fired and i'd used pagemethods and ajax call to get the data from server side to client side to render the datas

and i'd used the kendo ui template to render the data for server to client

please check the below attachment for sample

from frmindex.aspx page i'd ajaxify to frmmenucontents.aspx page

and i'd linked the master page also for your reference

please check it and tell me where i'm wrong

Thanks in Advance,

-Santhosh.B