arvgta / ajaxify Goto Github PK
View Code? Open in Web Editor NEWAjaxify - The Ajax Plugin
Home Page: https://4nf.org/
Ajaxify - The Ajax Plugin
Home Page: https://4nf.org/
This plugin can only using on HTML5 browser.
if using jquery.history.js the HTML4 browser also can using this plugin too.
I've started tackling issue #15 from the easy end and have implemented a simple pop effect as the second effect:
Default:
pop : 0 //time in msec
(disabled)
Feel free to test!
Enabled on http://www.oeko-fakt.de/, at the time-being with
pop : 200
Thanks in advance!
I would love to add extensive comments to the code:
https://github.com/arvgta/ajaxify/blob/new/ajaxify.js
...and open the first real "pull request" of this repository for this purpose...
How to you do that?
I suppose: First fork the repository, then open this issue and then issue the pull request??
Any hints?
...like this:
and the menu highlighting (#39) reacts correspondingly...
The feature only kicks in, if there is a long period of user inactivity
Maybe #37 can be re-used?
Hi!
I've come across a strange issue and wondered if you experienced similar behavior or might have a tip, where I should look for to resolve this:
I'm using ajaxify on a site, to (re-)load the whole (content-div) container asynchronously. The "Delta-Files"-Functionality works like a charm: Different Views (Position in the navigation) have different style sheets and some may require an additional js, which is working fine on most (modern) OS/Browser-Setups.
But on iOs (Safari) it seems like the css-files won't get loaded (or at least they don't affect the output), when the iPhon/iPad is connected to the internet using 3G.
If it's connected to my (home/work)-network using wifi it works like it's supposed to be. (local dev-Server AND external hosted)
I also checked using the iOs-Safari debugging console, but no errors occur, just the usual "Ajaxify loaded..."-notice.
Any ideas on this would be very much appreciated, thanks.
P.S.: Apart from this I ran into some troubles when a view loaded per ajaxify contained some javascript which should be triggered using document.ready: The js got executed before the additional css got loaded. - But I found my way around this. :)
It seems that there is only a minified version available here, where should I go to actually fork and modify the code?
Analogue to the first two page transition effects, this one can be enabled by setting e.g:
squeeze: 200
Described on Interface @4nf.org
Please see #15 for an overview of transitions...
Thanks!
Hi,
I've returned on an old project and I am willing to complete it using your awesome framework. However, there are some issues I have to deal with and the first one is caused by heavy scripts which are loaded after some inline scripts that require the heavy ones to be fired. The inline scripts don't find the necessary functions loaded and they fail, returning an error and breaking Ajaxify's workflow.
It would be awesome if you could find a way to load inline scripts only after the src ones have been loaded and evaluated completely.
I would like to provide the following effect "out of the box".
However, the footprint seems rather large (about 4KB minified).
Am wondering how it could be downsized, if I support a "flip-left" only?
Or alternatively, research how it is done in jQuery Mobile
In the current version at GitHub (4.3.0):
If Preview is enabled and the user navigates to a link within the main content divs, it is jumped to, only the first time...
The option "iinline" has now been set to "true" by default, greatly simplifying the customisation necessary on behalf of the user. The plugin can now be genuinely used "out of the box", like its vision is.
Previously, the default was to specify inline scripts to be re-fired each time in
inlinehints
The question now is, whether scripts handling in general needs to be re-factored?
Description of the current algorithm:
The question is, regarding all script types:
Please tell us your opinion!
Thanks in advance and
Kind regards
The whole code is organised into jQuery sub-plugins that resemble each other to a certain degree.
Would it be possible to define a base object or factory method, that builds these plugins based on less redundant input?
I like the potential power of these OO Plugins, especially their certain "persistence" in memory across calls, but maybe this can be abstracted?
Any ideas welcome!
For example, the $.log plugin could be defined and abbreviated something like this (if the factory method would be called something like pP which stands for "pushPlugin"):
pP('log | con = window.console, vp | { "verbosity" : 0 } | (m, v) if(v >= 0) vp = v; verbosity > vp && con && con.log(m);');
The $.fn.all sub-plugin could be abbreviated something like this:
pP('all | (
I would then discipline myself to re-use this factory method consistently through ajaxify.js and organise all code correspondingly, potentially reducing the length of code greatly and promoting little re-usable plugins....
What do you think?
Should I implement support for HTML5 handling?
Now set "verbosity" up to 8 to see full detail...
What do you think?
I've started tackling issue #15 from the easy end and have implemented a simple fade effect first:
Default:
fade : 0 //time in msec
(disabled)
See
on how to use...
Feel free to test!
Enabled on http://4nf.org/, at the time-being with
fade : 100
Thanks in advance!
Just informational - there is currently the useful "public methods" exposed to the user:
I've enabled Google Adsense on 4nf.org.
If, and only if Firefox is run with add-ons, Firefox will demonstrate weird behaviour.
Solution - re-start Firefox in safe mode - it should work fine then...
Please see: https://groups.google.com/forum/#!msg/firebug/LvJb2IHNd3o/BZS53fVj5EEJ
or
http://support.mozilla.org/de/questions/950381
I regard this as a Firefox issue, not a problem in this plugin!
Regards, Arvind.
I have played around with the form-handling today -
I am missing an option to disable individual forms from this, could you implement a listener that will prevent form handling of forms that carry the 'no-ajaxy' class, please?
I tried
selector:"form:not(.no-ajaxy)"
,
but that didnt seem to work. Any ideas how to do that?
I would like to implement some basic page transitions "out of the box"
The following transition types are supported by jQuery Mobile:
The requirements for a successful implementation are:
Should I follow this in my Pronto derivative?
Hi,
I would like to be able to read the ajax response when targeting the pronto.load event. This is the workflow I would like to achieve:
Currently I am targeting the pronto.request event (requestDelay = 300 to allow css transitions), firing an animation basically onClick, without checking for the actual response. But I would like to check for the response before triggering any animation; is there a variable or something?
$('html, body').animate({
scrollTop: $('#' + url.split('#')[1]).offset().top
}, 500);
}
The above code works, when a link with a '#' is pressed after the new page has been loaded beforehand e.g. in "Recent Comments" (in the sidebar) on http://4nf.org/.
It doesn't work though when clicking e.g. "Google Analytics handling documented" on the homepage of http://4nf.org/ (with the following URL: http://4nf.org/installation/#gasetup). (If I dump the URL into the browsers address bar, it works)
A scroll is performed, but to the very bottom of the page...
Any ideas why?
I have provided the id like this:
<h1 id="gasetup"><span style="color: #008000;">Google Analytics Setup</span></h1>
EDIT: Now using the following up-to-date Pronto code:
var $el = $('#' + url.split('#')[1]), scrollTop;
if ($el.length) {
scrollTop = $el.offset().top;
}
if (scrollTop !== false) {
$window.scrollTop(scrollTop);
}
The same result as above
So, I reckon that parts of the "ajaxification" interfere with calculating the offset
...
But what could that be??
EDIT. Solved(presumably)
The second animate()
was running in the background, while the scroll was being performed.
Solved by introducing the function _doRender2()
as a callback in the animate()
call...
(informational, but feel free to comment on it)
Please see:
The recent change means that, if and only if the root URL stays the same, that scripts and CSS's with data-class="always"
will be reloaded only...
That can be an alternative to re-triggering portions of JS/jQuery manually.
What do you think?
Thanks in advance!
In preparation of #36 this enhancement can be done standalone, first:
More research: @stackoverflow
It is probably necessary to add a custom class via addClass
and to add it in a style sheet
(as it seems impossible to add :hover
programmatically)
Obviously, removeClass
has to be called on the old element, too...
I will call the class jqhover
as suggested in the above link.
Hi,
I've experienced an "Uncaught SyntaxError: Unexpected token <" error using Ajaxify in a project I'm building. No demo is available as it's a secret one, but I have found that the issue is due to XHTML-designed javascript:
<script type="text/javascript">
<!--
document.write('<div></div>');
-->
</script>
The HTML commenting parts cause an error when parsing the inline script, breaking its syntax.
What do you think of an additional feature as a jQuery option "preview":
A bit like the popular "image swap" (one of the first use-cases of JS), only with the content divs instead!
Hi,
first I have to say, I really really appreciate the work you've done. You saved me like hundreds of hours! Thanks a lot!
Lately I work on a joomla-project which needed content-fetching via ajax-requests. I implemented your script in a template and it worked like a charm!
BUT: It seems to crash if the content to load includes a cloaked mailto-link by the default joomla-component. (which uses inline-js to print out the mail to the document to protect it from spambots)
The console gives me this error:
Error: NS_ERROR_FAILURE: Component returned failure code: 0x80004005 (NS_ERROR_FAILURE) [nsIDOMHistory.pushState]
After that, the browser stays in "loading-state" and only renders an unstyled mailto-link containing the mailadress.
If I remove the inline-js (by turning the component off in the joomla-backend) or set ajaxify's "inline"-option to false, the script works like it's supposed to be, but this way the mailadress isn't readable or not protected.
Would you have some insight where to look first to resolving this behavior?
Hello.
Example:
can you set attribute like [a href="#" data-content="#CONTENTDIV1"] for set data response in data-content value ?
please see: http://4nf.org/interface/comment-page-1/#comment-33815
What solution would be ideal?
Dear Sir,
First of all Thanks for wonderful and amazing plugin.
I have found one bug When calling inline script after ajax request complete and if script contains any < > or logical operator like && it gives an error alert message SyntaxError: missing ) after condition
Woeps has also mention in his comments check following:
"When the following kind of script gets included into a site which ajaxify tries to fetch, it puts out the catch-alert() containing SyntaxError: missing ) after condition"
Issue is with logical operators. When I load page without ajaxify script working perfectly but when calling using ajaxify inline script it gives the above error.
Kindly look into the issue I will be very thankful to you.
Thanks
Best Regards
Faisal Rehman
[email protected]
The documentation looks very pretty and seems useful so far, but it's quite annoying that I have to click back to the index page before I can visit the next page in the documentation.
Perhaps consider using sphinx-doc.org for documentation?
Maybe this is not a popular issue, but still can cause some unexpected error:
/login # GET send a form from this address
/login/process # POST form being processed and the response will be a Location: /login/success
/login/success # GET content being loaded nicely from here
which displays nicely except the URL in the browser stays on the processing page where it got redirected from.
The issue runs bit wild when you fail the form validation on php side more then once, because the flow will be this. (worth to mention I use the HTTP_REFERER header to redirect the user where it come from and thats why it goes nuts)
/login # GET the form
/login/process # POST the form with HTTP_REFERER /login
/login # GET but the title bar say /login/process
/login/process # POST the form again but this time the HTTP_REFERER will be the /login/process
/login/process # GET since this is the redirection
Maybe the possible solutin is to check out the response's location header if any and then push the state to the history?
Once long long ago I wrote a similar script but in those ancient times there were no history api whatsoever so it's not perfectly related and I am not really up-to-date with the current js mechanism but i used to check if the response have location or refresh header, if there were location header changed the address bar (was a window like desktop in js) and pushed that url into the history. And when there was a refresh header hmmm I simply dont remember how i handled that was something like parsing the seconds out from the refresh header and then put to setTimeout and actualy simulated a refresh in ajax and redid the query if the history not changed in mean time since.... something like that.
I hope this gona be more helpful then stressful. The plugin is a great work and maybe I use it wrongly and this issue not even exists if so then sorry @@
Problem: The server-side Cache control
headers are being ignored at the moment...
I thought of a solution in the meantime:
Cache control
in the Ajax call.memoryoff
settings dynamically@wikiloops: If you think it's fair (I'm not rich), I would like to reward you via PayPal for the outstanding contributions. Then please mail me at [email protected]
Thanks!
I'm trying to find out what element is triggering a pronto event. Currently, it seems I can only target $(window), like $(window).on('pronto.request', function(e, eventInfo){}
. Is it possible to somehow return the name of the specific element that is triggering the pronto event?
Or is it even possible to do something like $('.class a').on('pronto.render', function(e, eventInfo){}
? I've tried, but it doesn't seem to work.
The reason I'm asking is that I have a function I would like to call only if the pronto event is triggered by clicking on a specific element.
Default:
inlineskip: "adsbygoogle"
Please see:
and
Scope: One or more POSTs are performed e.g. on a form that has the current URL as its action
attribute...
Symptoms:
Example (Please submit the form in the content area multiple times with diffferent values and then press the back button repeatedly)
Any ideas, what is causing the above behaviour?
I suspect that this bug is specific to the example and on the server-side setup of www.oeko-fakt.de...
Thanks in advance!
I am in the progress of testing a setup of ajaxify and google adsense, which has been causing headaches to quite a lot of people. I will document my testing here, hoping it might be of value to someone.
As you will see, my approach is rather on the safe side concerning googles TOS. I do not guarantee google will agree about this, so please dont blame me should this turn out to be not the right solution for you or them.
When ajaxifying my project, I noticed the google banners didn't work as they used to.
To be precise, they would be displayed on the first page I refreshed, and on the next couple of pages I would browse to by ajaxified links, but after about the fourth page change, the banners seemed to "run dry" - there was no new ads fetched, and my project was showing white spaces where the ads were supposed to be.
Even during the first pages in which the ad spots were still populated, it was noticeable that adsense was messing up if the ad size varied from page to page- it would display narrow ads in wide spaces if no wide spaces had been present on the initial page.
Without ever looking into any code, I'd conclude something within the adsense script (the external javascript) does register the format of ads on the page it is requested by, and obviously prepares a certain amount of suitable ads. Without re-fetching the google js within my ajaxifiy page calls, it would fit in those prepared ads from the initial page load into my ad-slots, until all "prepared" ads have been shown.
Any attempt to re-fetch the google js to trigger fresh ads fails if it is done by ajax.
I assume they have a very simple and rudimentary security lock built in that just states: If anything tries to fetch this script via ajax, proceed without complaining, but dont show any ads either.
Thats googles politics, so lets just respect that for now.
Side-note: Since the refetching doesnt work, I actually prevented the output of
<script type='text/javascript' src='http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js' async></script>
on server side when pages are fetched via ajaxy, see issue #30 )
My very first working solution was quite a crude hack:
Since ads would appear for around four pages, I just built in some kind of counter which counts along any page changes done with ajaxify.js loading, and which prevents the ajax load on each fourth page, just as if all links were suddenly given the "no-ajaxy" class - so I had three nice ajaxified page transitions and one standard page load which would say "hoohoo" to google and fetch new ads. Given, that is crude, but it worked, and since the users first impression of a sites behavior is settled after three page loads, I felt the occasional "harsh load" in between was still acceptable - and this solution didnt require any changes to my page other than the added counter functionality in the ajaxify file I customized.
If you do not have
However, I had to deal with both of above issues - different ad sizes and the fact that I wanted to rely on staying "ajaxified" all the time, mostly because I enjoy the presence of a chatbox outside of the #content which would disappear and need to be reopened on every fourth page load.
To say it straight away - I have not found any solution that would do without the eventual harsh load to refresh the google hookup, but I have come up with a solution that feels at least a bit less crude than the one mentioned above.
Lets go over things step by step:
A simple scenario: You have some pages with a big square ad, lets call those "layout A", and some pages with a narrow banner, "Layout B".
Using the count-along solution, you will always see the right ads as long as a user stays on pages of the same layout - if a user navigates from one layout to another by ajaxify, you might see portions of a square ad in a narrow spot and vice versa.
What we'll need on top of the count along to prevent that, is some kind of detection/comparison between the current pages layout and the layout of the page to come.
If that detects a layout change, it should again disable the ajax loading and cause a "harsh load" to make sure the diffrent ad layout requests a new set of ads.
How to do that?
on any page, add a line of script within the #content div to pass the current pages layout to javascript:
<script> window.layout = 'A'</script>
Next, we need to prepare the comparison between that variable and the layout of the page we are about to load.
I solved this by letting ajaxify check the URI to call for certain identifiers - for a simple example, lets assume all pages in the folders "products/" and "offers/" have layout A, and the page "home.php" has layout B, this looks like:
var target=0;
url = n.href; /* grabbing the URI from ajaxy function here, before it calles the ajax load */
if ((url.indexOf('products/') >= 0) || (url.indexOf('offers/') >= 0) {
target='A';
} else if ( url.indexOf('home.php') >= 0) {
target='B';
}
if (window.layout==target) {
/* target page has identical layout, let ajaxify proceed */
} else {
/* target page has diffrent layout, stop ajaxify = let harsh load happen*/
}
Of course, you can just ad "no-ajaxy" classes to all links that lead to a different layout page instead, but that may be a lot more work to do, and besides that, we'll be needing the layout detection by JS some more later.
Now, you may believe I am just disabling ajaxify on more and more instances, and depending on your page structure, using it like this may already seem absurd (if you have layout changes all the time, no call would ever be ajaxified). I was not happy about this myself, even tho this solution still guarantees to show google ads all the time and without annoying ad size messups.
So, if at this point we are still not entirely happy, lets take the final step into a crazy implementation.
This last one has some benefits which I'll demonstrate, but also some clear downsides which I want to share right ahead:
It all comes down to the idea to move your ads out of the #content div, so they are loaded on the initial page once and just stay right where they are as a user navigates the ajaxified site.
Try it, you will be surprised how awesomly quick your page suddenly feels, because it doesnt take the extra second untill the ads appear :) Lets not forget, our users dont distinguish between document.ready
and "this page looks ready", so by having ads that are right there, they will say your site is much quicker than before.
If you are using a fade effect, you might also enjoy the way anything but the ads fades in and out, one might possibly even get better click thru rates because of this.
Now, in my case my best performing ad block happens to be within the #content, so I really felt bad about letting go of that. So again, heres a workaround for this case:
I added another <div>
and let it float:left
of my #content div with position:relative
.
within this container, I added a second div which holds the google ad.
By assigning position:absolute
and top:123px;right:123px
to this ad holding div, it can be placed to the spot inside the #content div where it belongs.
edit on oct 29th - If you are worried about positioning ads with position:absolute
- that is actually something google promotes! Here: https://support.google.com/adsense/answer/187769?hl=en
summed up that looks like this:
<div id='content'>
/* your content */
</div>
<div id='adpositioner' style='position:relative;float:left'>
<div id='centerad' style='position:absolute;top:123px;right:123px'>
<ins /*google - ad*/>
</ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
</div>
Of course you may move the 'centerad' div around by jQuery, since adsense bot might not do that I felt more on the safe side with this approach which places the ads at a given position on page load.
Since my page content is dynamic and ad spaces move down depending on the content text length,
I have added a slight placing correction via jQuery on top of that, but to make sure googlebot can tell if an ad is "above fold" or not, I believe the js-independent placement is crucial.
All that being said and looking really promising, I have still found no way to deal with the need for diffrently sized ads on diffrent page layouts than the "listen for layout changes and do a harsh load if necessary" move explained above.
I'll be sure to update you on the effect of loading fewer ads and showing them a longer time as used by this solution. My first impression when surfing around was a very positive user experience.
Well, after about two weeks of testing, I believe its safe to say that I experienced no negative monetary effects from implementing adsense the way described in detail above.
The number of counted ad impressions gets reduced as expected, but since I am making most revenue by CPC, there has been no difference in earnings since the implementation.
have a look at http://www.wikiloops.com to see it in action.
This bug is a symptom of the following base-bug:
I have now solved this by not ajaxifying links that contain a hash, as they are not jumped to properly otherwise...
However, if one does the following (e.g. on http://4nf.org/ -> sidebar):
... nothing happens.
In Firebug / Chrome, no error is registered.
"statechange" is not even triggered.
Just nothing happens...
Any ideas why?
there are not any docs to get to know ajaxify. 4nf.org link is broken and swook.net link is not found. Please provide the documentation to learn and understand ajaxify.
Ajaxify not working when I click on this button:
What should I do?
I was wondering if and how could I get the clicked button jQuery object on pronto.request. event.target doesn't seem to be the best solution as it returns the entire Window object.
Hi Arvind,
thanks a lot for that great js file. It works really well and has a great performance. Unfortunately, it doesn't play well with bootstrap collapsable menus.
Although I set my selector to "a:not(.no-ajax)" ajaxify will prevent toggling the menu.
Any thoughts on that?
Help would be much appreciated!
Thanks a lot!
So since the preview problem solved, I ran into something funy :P
What's happen when you pulling your mouse across the page and it hovers some 'delete' link? Which are normaly used for ajax but should not being called without the click.
Since the turbo is a reasonable feature the turning off not a solution, to ".no-ajaxy" every link which is harmful is unecessary, just need to add a selector which denies the turbo on the specific link but let the ajaxification happen on click ;)
Feel free to comment!
Hey,
Just spent the whole day looking at your fine piece of code,
but besides the due praise, I'd like to point out a few things I noticed which might be relevant to some others as well:
Obviously, ajaxify is working really nicely in a context with static pages that are not likely to be changed during a visitors stay, since I am working in a much more dynamic context, the whole idea of prefetching and storing content is of no use.
Since every request to a database driven page will cause load, I am most interested to only trigger such requests when the user actually needs them - especially when it comes to pages like search results that cause a huge database load to get rendered.
After disabling the prefetch & cache options of ajaxify and working out some project related issues, I noticed ajaxify still issues a second request of the page it is initialized on (http://4nf.org does, too).
I am not sure I have exactly understood why this is needed, but by disabling the request on
line 254 of ajaxify.js, this does no longer occur, while all expected functionality remains.
I'd recommend disabling this call along with the prefetch-disabling, such double-requests would defintely be problematic in my use case, where a lot of "landing" visitors hit quite load intensive pages.
Thanks for your efforts!
Animations are not applied if ajaxify two components:
In this example the animation acts over the first element. Not for both.
jQuery('#breadcrumbs, #content').ajaxify({
selector: "a:not(.no-ajaxy):not([target='_blank'])",
requestDelay: 0,
previewoff: true,
idleTime: 0,
slideTime: 0,
menu: false,
addclass: "jqhover",
forms: false,
prefetch: false,
memoryoff: true,
aniTime: 400,
aniParams: {
opacity: 0
}
});
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.