Friday, December 12th, 2008 | Author: MaX
When I released ajaxify v1.0 I didn’t expect that huge demand for the plugin. I thought its just a crap of code. but then, I remembered how it was difficult to start programming for me. So I decided to complete what I have started. I have created a special homepage for the plugin. Added new cool features. fixed v1.0 bugs. After hours of hard work. v2.0 released today. I hope you like it. And as always, any help, bug report, suggestion, confession…. don’t be shy.
(Please, dont post questions here about ajaxify. post it in the appropriate support page )
MaX,
Loading ...Category: jQuery
January 15th, 2009 at 8:27 PM
Hi HTDUNG,
This is normally. Since there is no ajax request before you hit “Link 1″. The back button will not work. I know that this is should not happen. I will try in the next version to solve this in somehow.
There is something important you should know that there is nothing perfect in the world. specially when it comes to programming. The programmer tries to solve and eliminate bugs as much as possible. But will not be 100% perfect. In the same time you can consider the current version of ajaxify is stable enough to be used in a live environment.
January 17th, 2009 at 6:27 PM
Dear Max,
My last message tell you about “leak memory”, that’s my bad. I forgot to set the attribute `target` in anchor tags, and set up $.AjaxifyDefault.target . So, my computer was slow down when I clicked more links.
Your PlugIn is very very cool.
January 18th, 2009 at 9:12 AM
Dear Max,
Today I got an issue. When I load the Content using ajax, my document height is very high to fit the content height. When I load an other content shorter than old one, the document height didn’t fit to the new content height. It happens to IE (i’m using IE6). The document height in FF2, FF3 is fit. Show me how to fix IE document height when using ajax, pls.
I’m a newbie in Ajax. Thanks very much.
January 21st, 2009 at 2:47 AM
This is wasn’t the problem. the problem was as I have described it before in the support page.
Its a css problem. change your “height” to “min-height”.
February 6th, 2009 at 5:06 AM
Dear Max,
I’ve check my css file, but I can’t find down how to fix the height problem. I havenot set the height of td, div, table tags. I try to add style=”min-height: 300px;” into the td tag which contained the content div. There is no change. I got the issue when using IE6. I havenot check it with IE7. The FF2, FF3 is OK. When we make a website, we cannot force the visitors use only FF, right? Please help me.
This is my website for our form classmates http://www.trungvuongsaigon.com.
Thanks for your great jobs.
February 6th, 2009 at 11:34 PM
Sorry HTDUNG, but here we are disscussing ajaxify problems. not CSS problems. if you are unable to solve them ask a CSS expert. but really I have no time to investegate your problem. sorry again.
February 10th, 2009 at 6:11 PM
For HTDUNG have you tried this hack? http://www.dustindiaz.com/min-height-fast-hack/
By the way, I’m trying to load a remote page (test.php) and it has javascript functions that embed an swf using
swf plugin.
The problem is that it only loads html content and doesn’t execute any javascript function.
Any ideas?
Thanks
February 20th, 2009 at 8:02 PM
i think Ajaxify is a great plugin for Jquery. I have a question, how can I use ajaxify in order to get the information of other page when the page is loaded? Thanks
February 22nd, 2009 at 12:23 AM
Hi! Loving this plugin! Some thoughts:
I am building a web app that is all about progressive enhancement offering 100% fallback if no javascript is available – that means all of the links to be ajaxified are regex-replaced first before ajaxify gets a hold of them.
A huge part of this solution is the ability to use history. All is fine and good (given that only one container is used for all ajax loads), unless they reload the page….
If a page is reloaded, and the hash (page) they were on is located in a link that is NOT within the target container (like in a menu on the left, whereas the target is a container on the right), then all is well, ajaxify will analyze all the links that have been ajaxified, and if one matches the hash, then it will load that link.
If for instance though, I had links within the target container, that lead to further updates within that container, the hash will not match any links in the left menu (in this example) – therefore on page-reload, ajaxify will not match the hash with any links, and will be stuck on the default page.
A quick hack last night around line 87 added a ‘else if’ statement that says ‘if this ajaxify round doesn’t match the hash to any links, then just load the hash as a link into the container’.
else if (document.location.hash.replace(/^#/, '') != ''){ var reloaded = jQuery.extend({},jQuery.AjaxifyDefaults, options); thehash = document.location.hash.replace(/^#/, ''); reloaded.hash = thehash; reloaded.link = thehash; reloaded.loadHash = thehash; //jQuery(this).ajaxifyAnalyse(reloaded); jQuery.ajaxifyLoad(reloaded); jQuery.ajaxifyHash(reloaded); jQuery.AjaxifyFirstLoad = false; }VERY quick and dirty given that it only works with attr:href as the target (or if hash is a valid url) AND doesn’t yet perform any regex testing to make sure it’s a good link (no rules).
The biggest problem however is that it runs on every ajaxify… there may be multiple ajaxify references in a page with different options and different selectors… So this will try to match the hash on the first ajaxify, if it fails it will load the hash as a link before the other instances of ajaxify have a change to test the hash against the link.
The side effect to this is that if the second, third etc instance of ajaxify ends up matching the link while the first one is loading the link from the hash, it will load the link twice (asyncronous…) before the page is done loading.
This is a multi-faceted issue:
Any thoughts on how to follow the unmatched hash only after ALL the instances of ajaxify have run their course?
A quick-fix would be to stop it from link-hash matching and JUST load the hash (if it matched the rules) but that somehow seams like a cheat, especially if not all the ajaxify links have attr:href hash values.
Would you be interested in adding this alternate behaviour with rules (like if hash has the same current base-domain, etc, then) to your core application? I have to do something like it anyway, so I would love to contribute my thoughts, though not a heroic javascript programmer either ie: my “final” code might look like alpha to you
My final thought is this: I think that this plugin has a tremendous amount of potential, especially for people who are adhering to the rules of progressive enhancement. I would like to see project discussions on a threaded system like google groups, which could facilitate and foster open discussion and problem solving.
Thanks again for the great plugin!
-Zachariah
February 23rd, 2009 at 12:55 AM
To continue on the last thought:
Checking for a hash match on page reload would have to be an option (yes/no) and the valid hash pattern (like ‘this domain, or a regular expression) would also have to be an option.. The following assumes that both have been set (however the code won’t be in this example.
What I did was move the else if code up to before the
return this.each(function() {– so it runs before ajaxify starts to loop through selectors. if the option was set that the user wanted this behaviour, that should be no problem. That way it runs before ajaxify loops through anything, but the code does not return so it continues on and lets ajaxify loop through it’s selectors.
To avoid the ‘load twice’ issue if ajaxify subsequently loads the same link in it’s link-hash comparision, I added another variable
which gets set to false if the hash gets loaded on a page reload. Then, in the function ajaxifyLoad, this replaces the first couple of lines:
jQuery.ajaxifyLoad = function(current) { if (jQuery.AjaxifyNotReload == false && current.link == reloaded.link) {//check if on first reload there was a valid hash match and that this ajaxified link is that link //do nothing } else { //if this is not a first load that has already been matched, keep loadingto finish up, this is the new else if statement at the top before the each loop
jQuery.fn.ajaxify = function(options) { if(!jQuery(this).size()){ jQuery.ajaxifylog('Error: No matched element/s for your ajaxify selector " '+jQuery(this).selector+' ".'); return false; } //added by Zachariah else if (document.location.hash.replace(/^#/, '') != '' && jQuery.AjaxifyFirstLoad && jQuery.AjaxifyHasNotRun){ var reloaded = jQuery.extend({},jQuery.AjaxifyDefaults, options); thehash = document.location.hash.replace(/^#/, ''); reloaded.hash = thehash; reloaded.link = thehash; reloaded.loadHash = thehash; //jQuery(this).ajaxifyAnalyse(reloaded); jQuery.ajaxifyLoad(reloaded); jQuery.ajaxifyHash(reloaded); jQuery.AjaxifyFirstLoad = false; jQuery.AjaxifyNotReload == false; } //end added by Zachariah return this.each(function() {(please note that it still doesn’t check for an option to turn it on or off nor does it check for/against a matching pattern like ‘this domain’ or a regex expression
-Zachariah
February 24th, 2009 at 2:50 AM
Diseño web Valencia
Have you read the docs.
Zach
I really can’t understand why are you doing this? why do u need to use regex? what is the problem with my integration of the history plugin ? can you provide an example of your html links and structure?
February 24th, 2009 at 7:30 AM
indeed. I can see how my lack of explanation could be confusing.
The website is based of off joomla which provides an novel method for pulling two types of data with the same link structure only with minor differences.
loading a page with
“yourdomain.com/index.php?args”
will produce a whole page loaded with html, head, body, modules, components, etc
loading the same link with the simple addition of a ’2′ at the end of index produces a page with just the component (the main content minus the modules)
‘yourdomain.com/index2.php?args’
although this will still produce html, head and body, just no modules and other things
a final touch of adding ‘&raw’ to the end of the ?args will produce ONLY the component code, no layout, html, head, body…
So to truly ajaxify a link (load only the part that I need) without rewriting joomla, and also maintaining full functionality with javascript turned off, all I need do is take the existing link, replace index with index2 and add a ‘&raw’ to the end. If I do it in a regex replace then I only have to write the code once and the change is only active when it needs to be anyway (when javascript is enabled).
As far as the history integration, i’m not saying anything is wrong persay, only that if:
a link is clicked within a container that has already had content replaced within it by ajaxify (by a previous navigation) …ie that link wasn’t there before we navigated once with an ajax action…. and the page is ‘reloaded’, not back or forward, but reloaded, then the original page will load (without the link in question within the markup as it was loaded dynamically), ajaxify will analyze the links, and WON’T match the hash (since that link isn’t currently in the markup), therefore will just sit at the original page..
So if someone navigates 3, 4 or 5 levels deep into a series of ajaxified links within the target container (using livequery of course), and something happens to there connection and have to reload the page, or they bookmark that page, the current matching pattern will leave them lost, sitting 3,4 or 5 levels back from where they thought they would end up.
In my solution (I’m sure one of many), given the option is turned on, it will follow the link in the hash (created by attr:href) directly on ‘first load’ -> so any time the page is reloaded or someone bookmarks and comes back to the page. I also did finish writing a rule option to pass a validation regex in to make sure the hash was a real, fully qualified link… In my case, it verifed that the link was on my domain with index2.php?some known args, otherwise it continued on matching ajaxified links
so if in the bookmarked link someone had
yourdomain.com/something#http://yourdomain/index2.php?args
it will follow that link on reload however if it had:
yourdomain.com/something#link1 or
yourdomain.com/something#http://someotherdomain/cupcakes.php
it would instead try the normal matching analysis that ajaxify normally does.
I hope that’s clearer – currently the modified system is working flawlessly in my implementation no matter where the links are and where you reload/bookmark.
-Zachariah
February 26th, 2009 at 12:03 AM
Okay, its much clearer now.
For regex. There is a plan to modify the onStart event in the next version to accept returning the “options” object. and then you can use it like this:
. . onStart:function(o){ o.link.replace('index.php','index2.php'); o.link = o.link+'&raw'; // you can add it on params option too. return o; } . .If you are interested I will try to make a quick hack for you. although I’m sure you have figured it out already.
). deviant art uses the same method too. But I can’t add it to ajaxify as a feature because it will not fit for everybody.
And for history. yes the main problem is ajaxify doesn’t support multi levels. Your method worked for you because you have only one target. and you can ignore the other options too. I actually used this method in one of my projects (ajaxify had no name in that time
Last week I was thinking writing an article about integrating ajaxify with popular CMS’s. Your thoughts were very useful. It will defiantly help me write it much faster now as my knowledge still weak in joomla.
February 26th, 2009 at 1:40 AM
That option looks really very useful!
Anything I can do to help. Would love to brainstorm on a flexible means to add multi-level to this awesome plugin.
I see what you mean about my hack not working for everybody… The multi-level part only works if
1) there is only one target
2)the link href is gathered through the attr:href method in Ajaxify…
3)the href is a real server-resolvable address. If it were multilevel with anything else, like link1, link2 etc, it of course would break.
Joomla Ajax has been such a mish-mosh of random peoples poorly documented half solutions and bad javascript libraries. I have some super simple ideas for using Ajaxify and some extra plugin code to completely ajax-enable the whole CMS without hardcoding in any of the core code. My only fear is the massive volume of support requests I might get if I let it loose as open source
February 26th, 2009 at 7:39 AM
Well, right now I’m out of ideas and i don’t think that the inspiration will come soon.
Sorry guys
When you first wrote that you want to integrate it with joomla I checked joomla website and google for a plugin or extension or whatever that could do the same job but I was surprised. . All I found is for polls or comments. There is nothing complete as you said. I’m really interested in your ideas. If you don’t mind I would like to know what they are. May be we can work together to produce something to serve this CMS. or at least a good tutorial. And about the massive support request, don’t worry, when you get busy just put them in a forum or something and let them fight to the death.
March 31st, 2009 at 3:02 AM
Zachariah,
Not sure if your gonna check this or are subscribed, but I am in the exact same scenario as you (nationalcitypd.com). I am using a single target, using the attr:href method, and all hrefs are real addresses.
I’m having the same issue as you, of bookmarks with “multi level” links. I suggested to Max that in this case ajaxify could simply resolve the url since it has it, and he pointed me here.
I tried using your code, and it’s not working. I know the last thing you wanted was support requests, but I am curious if you or Max have any idea why your code wouldn’t work. I could share what I’ve done, or you can email me (codyjohnwilliams@gmail.com).
I know only enough javascript to hack around a little bit. I fixed the ampersands and implemented the code in the places you described. It works like regular old ajaxify though, its not loading hash urls that are not in the original page (“multi level” links).
Eeerrr, so close to perfection!
March 31st, 2009 at 3:46 AM
Hi Cody, I’ll email you directly, and if there are any significant lessons learned we can post them back on this thread.
-Zachariah
April 22nd, 2009 at 9:56 AM
This is a great plugin! Thank you very much!!
Greetings from Hungary!
June 23rd, 2009 at 3:29 PM
Why It isn’t work with jQuery 1.3.x? Are your looking for It?
Thks for your great work!
July 7th, 2009 at 10:39 AM
Hi,
Thanks for this great plug-in. I am only dealing with a small(?) problem.
I have a asp.net website (Umbraco), with a top navigation bar.
The hierarchy is something like this:
> Home
-> About us
-> Development
-> Projects
-> Contact
When I open the site, the ‘Home’ is automatically loaded (the default page). But when I then click on one of the other links on the menu, it opens in a new window, after that, all other navigation click on the newly opened window behaves as expected with AJAX, except the home link. When I click on the newly opened window, it opens in another new window.
When I watched the source code, the class and target are set correctly. Any idea?
O yes, the main.master is like this:
The contentplaceholder will get id “Content”. That’s what I put in the target label (I tried also container, but doesn’t work properly either).
Hope you can help me out of this?
Many thanks in advance.