Ajaxify – Support v1.0

Friday, October 03rd, 2008 | Author: MaX

Any Comments, bugs , feature request about Ajaxify, please post it here.

Known issues:

links that has this form <a href=”#”> doesn’t load. See solution
live query and load hash enabled produce infinte loops.

Feature requests:

These features will be implemented in the next versions.

Rebinding ajaxify automatically to the new created elements from the loaded page.

Category: jQuery

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

110 Responses to “Ajaxify – Support v1.0”

David Ferguson
October 8th, 2008 at 10:42 PM
I was looking for a full list of all ajaxify options and could not find them. Also, I was wondering if there was an easy way through ajaxify to make jquery rebind to all new items created in ajaxify?

For instance, if I have a div container named #content, and I use ajaxify to load a new page into that div that has jquery code implemented in it as well, is there an easy way to rebind all events?

MaX
October 9th, 2008 at 1:24 AM
I was going to write the full options list. but I got too busy these days. I will try to write it ASAP. But for now, you can open ajaxify.js in the normal version and see the options.

You have two ways to bind new created elements to ajaxify:
1) You could use an external plugin that do the job. for example : live query http://plugins.jquery.com/project/livequery
with a little modification for ajaxify calling:

$(“.ajaxify”).livequery(function() {
$(this).ajaxify();
});

2) Or add the ajaxify calling lines to the page that are going to be loaded again.

xasima
October 16th, 2008 at 6:25 PM
hello, i want to change the value of the ajaxify parameters dynamically. I mean I want to specify that link needs to be constracted from the additional attribute (rel) of the A tag.

I know I need to change the ‘link’ options somewhere. Probably i can do this in onStart() event trigger.

But i don’t know how to get the access to this options. This is due to my lack of knowledge on jquery and js. would you please hint me?

MaX
October 16th, 2008 at 6:39 PM
Hi xasima,

Its simple. open ajaxify.js (normal version) and go to line 41. You will find this:
current.link = $(this).attr(‘href’).replace(/^#/, “”) || current.link;
Add this line after it:
current.params = $(this).attr(‘rel’) || current.params;
Thats it

Thorsten
October 20th, 2008 at 1:02 PM
Hi MaX,
I actually do have some difficulties with IE and this plugin. In Opera or Firefox it works well, but IE does not stop loading. Are there any known issues about this problem?

MaX
October 20th, 2008 at 4:14 PM
Not at all. No one has reported any kind of this issue. may be there is a miss configuration somewhere. Could you please open the examples (online) and test it with your IE?
I’m wating the results.

Thorsten
October 20th, 2008 at 4:47 PM
There’s probably a miss configuration on my site – due to my too little knowledge on jquery and js. Your examples page works in my IE without any problem.

My testdriven page is this. Would you like to test it with your IE? Thanks a lot.

Thorsten
October 20th, 2008 at 5:16 PM
Your examples are working well in my IE.

Perhaps I made a mistake with your plugin due to my too little knowledge on jquery and js.

Would you like to test it? This site: http://konigorski.net/test/ does work in any browser, but not in IE.

Thanks a lot.

MaX
October 20th, 2008 at 8:37 PM
I have visited your page. you haven’t made any mistake and the problem is in IE.

I have added this code in line 42 to see what is the requested link.

alert($(this).attr(‘href’));

The results were:
FireFox: #
Opera: #
IE: http://mydomain.com/page.html#

(the a tag was like this: <a href="#"></a>)
I hate this stupid browser

I guess, I have to rewrite the replace pattern in my plugin so it can work properly on this piece of sh***.
But for now, don’t add the # mark in your href. add the page link or don’t add the href attr at all to the ‘a’ tag if you are willing to specifiy it from the script (…link: ‘url’,…..).

Have a nice day

Thorsten
October 20th, 2008 at 9:19 PM
Thank you very much. I agree with your statement to IE – why do people use ist at all?

HitoriX
October 21st, 2008 at 1:25 AM
Hello =D
First I want to thank the plugin, because looking something like this for months and was not able to find something good.

However, it is not all roses. I tried to use the option to hash”, However, it does not work as I want = /
The problem is: when you click the link that will open
in div “conteudo-centro” he opens in a new window, and
only then open the div cited above.

The HTML of the link is this:
<a title="Equipe" rel="nofollow"> ? Equipe</a>

I put the call as follows:
```
$ ( '# hash'). ajaxify (( 
    loadHash: true, 
    target:".conteudo-centro', 
    ));
```
Where can I have wrong? = /
I do not see where … unless it is the file that I use
to include, however, be difficult to think that o.o

Sorry for my English … Google’s translation, you know?
Brazilian …

MaX
October 21st, 2008 at 1:58 AM
Hello HitoriX,

Thank you for the compliment.
However, there is more than issue in your code.
- you haven’t specified the link that is going to be loaded in the href or link option.
- in your target code …target:”.conteudo-centro’,… the quotations does’t end as they are different.
- also in the same line you have an extra comma at the end.

please review your code carefully and use something to debug like firebug to diagnose the errors.
And about the language. dont worry. english is not my native language too

HitoriX
October 23rd, 2008 at 12:05 AM
Sorry, is that I put everything on Google, including codes, and he added the ” XD

I tried to mistakes, but how am beginner, not thought = /
Well, here is the page of tests, if you want to give a
look: http://www.aliabrasil.net/fsdf9s4fr98ew4rtretregh8526ds1f9ds/testes/

I hope it will be easy to resolve, because I come looking something like this for months = /

For now, thank you;)

MaX
October 23rd, 2008 at 1:15 AM
I took a look. you have alot of missing things.

follow the steps below and tell me the results:
- The correct code is:
<script type="text/javascript">
$(‘.ajax’).ajaxify({
loadHash: true,
target: ‘.conteudo-centro’
});
</script>
- add the class “ajax” to every ‘a’ tag in your page.

note: external links can’t be ajaxified

HitoriX
October 23rd, 2008 at 2:22 AM
The error remains the same = /
The link testing is the “Equipe”, click it and you’ll see
it will open a new page and not in the “.conteudo-centro” =/

Is it the file that I use to include the pages?
If you want to take a look at it … i uploaded it in HTML format…
http://www.aliabrasil.net/fsdf9s4fr98ew4rtretregh8526ds1f9ds/testes/d4w984d89w4r89geg47r8g4rh_includes.html

MaX
October 23rd, 2008 at 2:29 AM
try this code as the prev pne was converted by word press

<script type="text/javascript">
$(".ajax").ajaxify({
loadHash: true,
target: ".conteudo-centro"
});
</script>

HitoriX
October 23rd, 2008 at 2:33 AM
The error remains =/

MaX
October 23rd, 2008 at 2:27 PM
You have to wrap the calling with ready(). try this one.
<script type="text/javascript">
$(document).ready(function() {
$(".ajax").ajaxify({
loadHash: true,
target: ".conteudo-centro"
});
});
</script>

HitoriX
October 23rd, 2008 at 10:58 PM
It worked *-*
Thanks man, you saved my website =D
You can be sure it will have a dedication in the section of credits \o/
Thanks, you are the best *-*

BrainLessX
October 27th, 2008 at 11:07 PM
Ajaxify is a good plugin.
I have just one question left…
Isn’t it possible for internal links to open in the same div.

As example:
In my menu, i open home.php,
in home.php are some different links like (contact.php).

What i want to happen is that contact.php from the page home.php loads in de same div.

I tried some different things like target attribute with div name, give the links with ajaxify target of the div.

Please give me some help

MaX
October 27th, 2008 at 11:13 PM
I have answered this question alot

See this: http://max.jsrhost.com/2008/10/03/ajaxify-support/#comment-7

BrainLessX
October 27th, 2008 at 11:57 PM
Ok,
Tommorow i will give it another try!
I’m now done with working today.
In your comment you send me to #comment-7, but when i click i get comment #2.
Thanks for your fast reply!

BrainLessX
October 28th, 2008 at 5:11 PM
5th try
Why is my reply not posted?
I still get it not working.
http://www.jaspermeijaard.com/Ajaxify_edit/example.html is a link where’s my online version.
I don’t kno what’s wrong, please give me some advice.
The pages who are gonna be loaded in the divs? Can i include in that page a etc. ? Will the jquery, ajaxify handles this like a own page?

MaX
October 28th, 2008 at 8:01 PM
Sorry about that. Akismet identifed you as a spammer
Try removing the include lines for jquery and ajaxify from linktest.html. They are already in the DOM. just the calling function in that page.

DeaDSouL
October 30th, 2008 at 10:38 AM
thanks a lot for this amazing plugin.. its just awesome..

I have a problem with ajaxify… actually the link i need to ajaxify it is not static..
for ex.
…
link: ‘?option=modify&oper=edit&id’+dsID,
…

the dsID is changing every time i select a row..
and i couldn’t just make it..

here is my post about how to pass the id from jqGrid to Ajaxify:

i tried many time, just useless…

best regards

MaX
October 30th, 2008 at 4:12 PM
Could you please post a link so I can debug it.

DeaDSouL
October 30th, 2008 at 8:02 PM
sure bro
here is the link
http://www.trirand.com/blog/?page_id=18/help/how-to-pass-the-rows-id-to-ajaxify/page-1

MaX
October 30th, 2008 at 8:05 PM
I mean an example or test page. not a link to the forum

DeaDSouL
October 30th, 2008 at 10:21 PM
well, i don’t have hosting to do that.. but i can show you my example source..
```
jQuery(document).ready(function(){
    …..
    jQuery(”#dsEdit”).click( function() {
        var dsID = jQuery(”#dsTable”).getGridParam('selrow');
        if( dsID == null ) return null;
        $('#dsEdit').ajaxify({
           target: '#dsAjaxImages',
           link: '?dsOption=modify&amp;dsOper=edit&amp;id='+dsID,
            onSuccess:
                function(){
                    startTiny()
                }
         });
    });
    …..
});
```
the link i need to ajaxify it is not static link.. it changes each time i select a row from jqGrid thats why i need this line to above the ajaxify function
var dsID = jQuery(”#dsTable”).getGridParam('selrow');

the problem is if i click on the edit link it won’t work (the first time) but the second tme it will..

hope you understand my problem well ..

best regards.

MaX
October 30th, 2008 at 10:30 PM
I have already understood you.
try this one :

jQuery(document).ready(function(){

jQuery(”#dsEdit”).click( function() {
var dsID = jQuery(”#dsTable”).getGridParam(’selrow’);
if( dsID == null ) return null;
$(‘#dsEdit’).ajaxify({
target: ‘#dsAjaxImages’,
link: ‘?dsOption=modify&dsOper=edit&id=’+dsID,
onSuccess:
function(){
startTiny()
}
}).click();
});

});

dont copy and paste as you did before
notice the click() event trigger at the end of ajaxify function.

DeaDSouL
October 30th, 2008 at 11:22 PM
lol

thanks a lot bro..
i’ll try it now

best regards

DeaDSouL
October 31st, 2008 at 12:04 AM

bro, i tried many times.. playing with it and changing many things.. no point..

tried this one..

jQuery("#dsEdit").click( function() {
	var dsID = jQuery("#dsTable").getGridParam('selrow');
	if( dsID == null ) return null;
	$('#dsEdit').ajaxify({
		target: '#dsAjaxImages',
		link: '?dsOption=modify&amp;dsOper=edit&amp;id='+dsID,
		onSuccess:
			function(){
				startTiny()
			}
	}).click();
});

also tried to put this params: ‘id=’+dsID,
and it didn’t work

tried to play with link
<a href="#" rel="nofollow">{dsLANG.EDIT}</a>
and
<a href="?dsOption=modify&dsOper=edit" rel="nofollow">{dsLANG.EDIT}</a>

nothing happened!!

the only one seems to work is this

$('#dsEdit').ajaxify({
	target: '#dsAjaxImages',
	link: '?dsOption=modify&amp;dsOper=edit&amp;id='+<strong>jQuery("#dsEdit").click( function() { jQuery("#dsTable").getGridParam('selrow'); })</strong>,
	onSuccess:
		function(){
			startTiny()
		}
});

but it returns [object Object]

thanks again bro

MaX
October 31st, 2008 at 12:12 AM
I think the problem was that you need two clicks to open a link.
if this is what you need, the above code must work.
but if you still trying to add a dynamic id to the link it should be like this:

function id(){
//do some code here, maybe you want to call jqgrid
return id;
}

$(‘#dsEdit’).ajaxify({
target: ‘#dsAjaxImages’,
link: ‘?dsOption=modify&dsOper=edit&id=’+id(),
onSuccess:function(){
startTiny()
}
});

DeaDSouL
October 31st, 2008 at 12:16 AM
i tried to make a function to get the id
and call it from ajaxify like how you said
but it didn’t work and here is my code

jQuery(document).ready(function(){

$(’#dsEdit’).ajaxify({
target: ‘#dsAjaxImages’,
link: ‘?dsOption=modify&dsOper=edit&id=’+dsGetId(),
onSuccess:function(){
startTiny()
}
});

});

function dsGetId() {
var dsID = jQuery(“#dsTable”).getGridParam(’selrow’);
return dsID;
}

the problem once i do that is: the ajaxify won’t work at all

any ideas..

sorry bro

DeaDSouL
October 31st, 2008 at 12:19 AM
sorry i mean it returns null

MaX
October 31st, 2008 at 12:22 AM
There must be something wrong in jqGrid on this line( bug, wrong use,… whatever)
jQuery(”#dsTable”).getGridParam(’selrow’);

try to remove it and make it direct return like this:

function dsGetId() {
return 5; //return id 5 for example
}
it should work.

DeaDSouL
October 31st, 2008 at 12:29 AM
guess you right.. it works

i think it because of this line
jQuery(“#dsTable”).getGridParam(’selrow’);

should be inside the
jQuery(“#dsEdit”).click( function() {

to work..

but is there anyway to call the ajaxify
i mean like a function or something..
like, instead of making getTheId()
how about if we make ajaxifyThisId(id)

thanks a lot..

MaX
October 31st, 2008 at 12:43 AM
As I told you before, you can fire ajaxify once the row has been clicked by adding the click() trigger. So your code should look something like this.

jQuery(”#dsEdit”).click( function() {

function id(){
return jQuery(”#dsTable”).getGridParam(’selrow’);
}

$(this).ajaxify({
target: ‘#dsAjaxImages’,
link: ‘?dsOption=modify&dsOper=edit&id=’+dsID,
onSuccess:
function(){
startTiny()
}
}).click();

Another method:
if jqGrid supports events. make a function that adds the id of each row to its href once it finish loading. if you can make this idea work you can then use ajaxify normaly.

DeaDSouL
October 31st, 2008 at 1:02 AM
but brother.. once i add this .click();
the ajaxify doesn’t work at all..

please check it..

thanks

MaX
October 31st, 2008 at 2:55 PM
it works for me.
Could you please send me the whole files and pages you are using so I can test it in my way.
I will try to make them work without interacting each other.

DeaDSouL
October 31st, 2008 at 8:59 PM
sure bro..
just tell me what is your email..?

MaX
November 1st, 2008 at 1:50 PM
Ok. I have sent an email….

william
November 5th, 2008 at 12:52 AM
is there a way to load 2 div elements on a page…

im currently busy with a site.. normal nav stuff nothing spectacular.. sp was thinking. if i use ajaxify with tagToload: ‘#content’ part… then if the user doesnt have javascript it will fail poroperly and hes just gonna go about with page reloads… but the problem comes in..

also need to change another element on the page “navright” which is basicaly like a heading field.

with tagToload: ‘#content’ it will load all the #content contents to #content on the first page when you click the link… any way to get it to load another # tag into the same spot out side of ‘#content’?

the posibilities of this plugin are incredible congrats on it. im green with jealousy hehehe

william
November 5th, 2008 at 12:54 AM
lol ok this is a spam post… i forgot to click the “notify me of followups” box… sorry guys. and need to know when somone responds with a solution heheh

spesbar
November 6th, 2008 at 11:08 AM
I used the ajaxify method. works fine in firefox but in IE, it keeps
giving me js error “Invalid character”.
The page is loaded but the js error is prompted everytime the page is
displayed.

What I did is this :
For example:
a.jsp is a listing page and in the file I have a link that will call
edit.jsp.
in a.jsp i added :

$(document).ready(function() {
$(‘.ajaxify’).ajaxify(); });

and called edit.jsp by using

Is this the correct way? Like I said, the page is displayed as
intended. The only setback is the js error in IE.

Thank you in advance.

spesbar
November 6th, 2008 at 1:32 PM
Hi again

i found out the problem. nothing to do with the jquery/ajaxify thing.. my fault..since i use jsp include for the files, i failed to notice that i called the same script for calendar twice. remove one and now it works beautifully… thanks

MaX
November 6th, 2008 at 3:49 PM
Hi William,

if i use ajaxify with tagToload: ‘#content’ part… then if the user doesnt have javascript it will fail poroperly and hes just gonna go about with page reloads

Yes, it will fail. you have to handle this sitution from the server side.
Use “params” option to determine wether the user has requested the page from ajax or as normal http request.
I will write an article about this soon.

with tagToload: ‘#content’ it will load all the #content contents to #content on the first page when you click the link… any way to get it to load another # tag into the same spot out side of ‘#content’?

If you mean multiple tagToload. Sorry, it is not supported yet. you have to wait until version 2 comes out. or just edit it by your self.

william
November 6th, 2008 at 4:23 PM
heheh thanks for the response… dont think im ok enough with jquery stuffs to be messing around with editing your plugin (time constraints so will take longer to do)

ive decided to move away from using the plugin with the site tho. thought it was just my IE that “freaked” out… ran it through a test box here at work similer results.. works fine clicking from page A to page B then to page A again… but soon after that IE just gets stuck and crashes… or as the test box did…. makes a clicking sound (the click a link sound) insesintly till a ctrl + alt + del stops it…

opera works fine. never the less… awesome plugin

MaX
November 6th, 2008 at 10:26 PM
There is no reported issue about IE. Could you provide me your test box so I can investigate whats wrong?

william
November 6th, 2008 at 10:55 PM
you have an IM or email? dont want to fill up this page hehehe

sameer
November 7th, 2008 at 9:25 PM
hi,

thanks for this great plugin. I have a quick question. Is there a way of combining this plugin with RSH or the jquery history plugin?

Just a thought.

MaX
November 7th, 2008 at 9:58 PM
well,
I think yes. but I haven’t tried it yet.
its already planned to integrate history plugin in ajaxify in version 2.0

HitoriX
November 19th, 2008 at 3:19 AM
Look at me here again ^^”
I have a new problem. The problem this time is
following:

I have a link called “contato”, and within that link
there is a link to the “FAQ”. To call the page using
ajax in the same element, I used the following code:
```
$(document).ready(function() {
$(".ajax").livequery(function() {
$(this).ajaxify();
loadHash: true,
target: ".conteudo-centro"
});
});
```
But the error. The same error that happened before … the
page opens in a new tab =/
But if I remove that part:
loadHash: true,

Opens normal … what can I do you keep using
the “hash”, and can use the code I’m using? =/

HitoriX
November 19th, 2008 at 3:21 AM
I forgot the exemple page: http://www.aliabrasil.net/fsdf9s4fr98ew4rtretregh8526ds1f9ds/testes/

MaX
November 19th, 2008 at 3:43 PM
The function is called incorrectly. you have to call it like this:
$(“.ajax”).livequery(function() {
$(this).ajaxify({
loadHash: true,
target: “.conteudo-centro”
});
});

And you are using the live query. so you don’t have to wrap the function with $(document).ready anymore.

HitoriX
November 20th, 2008 at 1:01 AM
Huuuummm … I did what you said, but now when click on “Contato”, he is infinitely reloading =/
Look: http://www.aliabrasil.net/fsdf9s4fr98ew4rtretregh8526ds1f9ds/testes/
I tested this in Opera, Firefox, IE and Google Chrome ‘-’

Johnny
November 21st, 2008 at 3:30 AM
Hey Max,
Nice plugin and good support. I am wondering if there’s a way to combine the tagTolad and loadHash, so you can load multiple sections from the same file while providing a bookmark for each.
Thoughts?

MaX
November 21st, 2008 at 4:44 AM
“HitoriX”

Try using $(document).ready() instead of live query and tell me the results.

“Johnny’

Thanks johnny. multi tags to load has been implemnted already in the next release while I’m still not sure how and why you wants to combine it with loadHash?

Johnny
November 21st, 2008 at 8:04 PM
If I had this structure:
Page 1
Page 2
div A
div B
div C
Page 3

and I want to call a specific div within a page, say div B within page 2. I can do it using tagLoad. Now say I want to be able to send the link of just that instance (link to “page 2 div b” or “page 2 div c” and so on). I will need a way to combine the tagLoad and loadHash so it can be done for any combo. Is that possible?

HitoriX
November 21st, 2008 at 11:27 PM

That way?

$(document).ready()
$(".ajax").livequery(function() {
$(this).ajaxify({
loadHash: true,
target: ".conteudo-centro"
});
});

The problem continues =/

MaX
November 22nd, 2008 at 12:02 AM
No, that way.
$(document).ready(function() {
$(‘.ajax’).ajaxify({
loadHash: true,
target: “.conteudo-centro”
});
});

MaX
November 22nd, 2008 at 12:08 AM
Got it Johnny, but why do you want this feature anyway. is there an example of an application that uses this scenario ?

HitoriX
November 22nd, 2008 at 12:29 AM
She opens a new page in there .. =/

http://www.aliabrasil.net/fsdf9s4fr98ew4rtretregh8526ds1f9ds/testes/

MaX
November 22nd, 2008 at 12:34 AM
I clicked “Contato” and it seems works fine to me!!

HitoriX
November 22nd, 2008 at 1:03 AM
http://www.aliabrasil.net/fsdf9s4fr98ew4rtretregh8526ds1f9ds/testes/#paginas/principal/contato.php

Click “Antes de entrar em contato conosco, leia o FAQ.
Talvez sua dúvida já esteja solucionada lá ”
Down there…

Johnny
November 22nd, 2008 at 1:45 AM
I am planning a project and wanted to know if this would work. I did a little playing around but couldn’t get it to go. I can break the content out into separate files to get the desired effect. I just wanted to know if it was possible (because the fact that I couldn’t make it work, doesn’t mean it shouldn’t work).

MaX
November 22nd, 2008 at 3:38 AM
HitoriX

There is an issue using live query with enabled loadHash.
You have two options:
recall the function in the new loaded page.
or use live query with loadHash = false

This issue will be fixed in the next release.

Johnny

tagToload is a filteration function actually. I mean if you have specified “#div” in tag to load. the function will extract this tag from the loaded data. you cant just actually request a tag from a server. so, I recomend you. break your contents. it would be much easier, time and bandwidth saver.
You can still do this from the server side. with playing in “params”.

HitoriX
November 22nd, 2008 at 7:07 PM
And as I do that?
Type…
```
$(document).ready(function() {
$(".ajax").ajaxify({
loadHash: true,
target: ".conteudo-centro"
});
});
```
So? ‘-’
If so … continues to give problems =/

ivus
November 26th, 2008 at 10:15 AM
following on from this comment

See this: http://max.jsrhost.com/2008/10/03/ajaxify-support/#comment-7

I did what the solution said and it worked… kinda. It works in that the links from the newly loaded page were ajaxified, but each time that page reloads, it seems to refresh itself an exponential amount of time.. first time loads perfectly, second time – loads the page 7 times, thrid time – loads the page 21 times …. and it gets worse for each load, subsequently slowing the whole site down….

Have you ever run into this problem?

Great script by the way.

MaX
November 26th, 2008 at 3:53 PM
Is loadHash option turned on ? if so, please read this http://max.jsrhost.com/2008/10/03/ajaxify-support/#comment-78

As you may know.I’m working on v2. loadHash has been enhanced much more than the current version. so I recommened everyone to wait that version.
Approximate release date is 15/12/08.

ivus
November 27th, 2008 at 12:31 AM
i’ve set loadhash to off, but it still isn’t working. I’m also not using Live Query if that’s any help.

MaX
November 27th, 2008 at 12:39 AM
Any test page?

ivus
November 27th, 2008 at 12:42 AM
yes, but it’s behind some security, if you email me I’ll send them across to you privately. thanks

ivus
November 27th, 2008 at 1:57 AM
OK, in case anyone else is having the same issue as I was, here is the solution..

1 – In the main ajaxified page you have the following setup

$(document).ready(function() {
$(“.ajaxify”).ajaxify({
loadHash: false});
});

and you use

<a href="someURL.html" rel="nofollow">Link</a>

to make you pages load into a div “main_content”

2 – the newly loaded page need to be setup with a new instance of the element call.

$(document).ready(function() {
$(“.ajaxify2″).ajaxify({
loadHash: false});
});

remembering to also change the class reference on all the links inside the loaded page.

<a href="someURL.html" rel="nofollow">Link</a>

Good luck and thanks again to MaX for helping me work through this problem.

MaX
November 27th, 2008 at 2:02 AM
You are welcome ivus.

HitoriX
November 29th, 2008 at 1:29 AM
Thank you Max =D
I will be hoping the new version.

And speaking of it … what she will again?
What’s new in it? I’m curious ^^

MaX
November 30th, 2008 at 12:52 AM
As everybody knows, it will support histroy, multi tagToload. Other features still unannounced (little secret). But I assure you, “she” will have a new beautiful dress

Kenneth
December 4th, 2008 at 3:03 PM
Just wanting to know if it is possible to add transition animation when ajaxify calls up a new page.

Joseph Ghassan
December 5th, 2008 at 9:16 AM
Hi Max,

Thanks for this great plugin!

How can I use this plugin to load images Asynchronously ?

I have the image like follows :

I have a list of 8 images and I want to load them asynchronously when the page loads.

Any help will be highly appreciated.

Thanks

Joseph Ghassan
December 5th, 2008 at 9:17 AM
Here is the format of the HTML :

MaX
December 7th, 2008 at 1:27 PM
Hi Kenneth

Yes, you can. onStart and onComplete events will let you add your animation effects. I recommend you to wait more couple of days to see whats new in v2.0 about this.

Joseph

ajaxify was not made for this purpose. and really have no idea how you can do it with ajaxify. May be you are looking for sometthing similar to “jQuery cycle plugin”

Kenneth
December 8th, 2008 at 9:47 PM
Awesome, any estimate on when 2.0 will be mad available? Not that I’m anxious or anything… just have this site to complete and your plugin is making it a snap… just need those transitions.

Thanks for your great work on the plugin!

Kenneth
December 8th, 2008 at 10:50 PM

I tried something like this… but it doesn’t work. Can you guide me in the right direction?

$('a[name=about]').ajaxify({
   link: 'about.html',
   target: '#content',
   tagToload: '#content',
   loadHash: true
   onStart:function(){
		$(current.where).slideUp('slow');
		},
	onComplete:function(){
		$(current.where).slideDown('slow');
		}
   });

Kenneth
December 9th, 2008 at 8:57 AM

ok… I got it workin!

Here’s the code

$('a[name=index]').ajaxify({
   link: 'home.html',
   target: '#content',
   tagToload: '#content',
   loadHash:true,
	onStart:function(){
	$('#content').slideUp('slow');
	},
	onComplete:function(){
	$('#content').slideDown('slow');
	}
   });

Alexey
December 9th, 2008 at 12:40 PM
Max, thank you very much for this great plugin! It really cool! Please continue your project. I hope that second version will be available soon. Thank you!

Alexey
December 9th, 2008 at 1:48 PM
Max, please give me little support about the next question:
In accordance with structure of drupal cms I want keep js functions in behaviors which are registered in the Drupal.behaviors object (which is document ready object). All registered behaviors are run on ready. And this is my ajaxify call:

Drupal.behaviors.myCoolBehavior = function(context) {
$(‘a[href*="/edit"]‘).ajaxify();
}

This is done that behavior is attached only once to a given element.

Code should also be updated if it adds AJAX/AHAH loaded content. Developers implementing AHAH/AJAX in their solutions should call Drupal.attachBehaviors() after new page content has been loaded, feeding in an element to be processed, in order to attach all behaviors to the new content.

But in every page I have recursion of this request:

GET http://www.mysite/somepage=&ajax=true

How I can call .ajaxify(); without recursion?

Thank you, and sorry for my english )

MaX
December 10th, 2008 at 12:42 AM
Thank you everybody for your support. v2.0 will be available before the end of this week.

Alexey

Sorry, I couldin’t understand your question.? could you explain it more? or may be asking your question to a drupal forum would give you a better support.

Tom
December 10th, 2008 at 9:47 AM
MaX,
I’m just starting with AJAX and jQuery and you’re framework is exactly what I was looking for! Thanks for the great work!

I do have a question as I’m not able to get something to work (more because of my ignorance): My website is driven from index.php where several functions are called to build the content on the website. Thus what I need is Ajaxify to grab only the “#main_content” contents of index.php and display it again in the same div (“#main_content”). This is the code I’m using:
```
$(document).ready(function() { 
		 $('.ajaxify').ajaxify({
			tagToload: '#main_content',
			target: '#main_content'
                   }); 
		});
```
But the ‘#main_content’ ends up loaded with the entire page EXCEPT for what’s supposed to be in the original ‘#main_content’.

Any suggestions?

Thanks again!

Tom

Alexey
December 10th, 2008 at 12:57 PM
MaX, can you tell me how can I stop loading page, because in my case this function is give me recursion, and when I load some tag it always give me cycled request “GET” with content of loading page, which never stop. I want to stop execution of loading function on onComplete callback, when content loaded. what I must write here?

$(‘a[href*="/add/"]‘).ajaxify({
onComplete: function(){
// what I must write here to stop recursion ?
}
});
Thanks!

Tom
December 11th, 2008 at 7:16 AM
To follow up on my own question – I downloaded the code for your example and was playing with it. It appears that tagToload works fine if the contents being grabbed are from a different page than the one where the JS is called. This would be consistent with the problems I am having on my own website.

Any ideas on how to get this work within one site?

Thanks,

Tom

MaX
December 12th, 2008 at 3:12 AM
Tom,

Could you please tell me what is the form of the link. And direct or by a href attribute?. By the way v2.0 has just released. try it may it will just work fine with you.

Alexey

There is nothing to do to stop ajaxify from calling. It appears that there is something fires ajaxify event consequently. may something back from drupal functions . what is your ajaxify event anyway?.

Alexey
December 12th, 2008 at 4:12 AM
MaX
My event loading tag from another page. I am trying to find solution how to rebind ajaxify event to link which loaded in new content from tag, and I dont want to use any others big plugins as live query etc …

MaX
December 12th, 2008 at 4:21 AM
I don’t think that live query is a big plugin. Another solution is to unbind ajaxify from the tag then rebind it. something like this:
$(‘.ajax’).unbind(‘click’, $.ajaxify);
$(‘.ajax’).ajaxify();

Tom
December 12th, 2008 at 1:37 PM
I can’t wait to try this… Thanks a lot. I’ll let you know if I was able to resolve the previously mentioned issue I was having.

Thanks again!

Tom
December 12th, 2008 at 1:39 PM
Again, thanks for the great job. I did try it tonight and I’m still having troubles. I would appreciate if you could take a look at my testing code to see if (which is most likely) I’m doing something wrong:

Untitled Document

$(document).ready(function() {
$(‘.ajaxify’).ajaxify({
tagToload: ‘#main_content’,
target: ‘#test’
});
});

Click the link below to make the AJAX call
<a href="test.htm" rel="nofollow">Click here</a>
this should stay where it is
Default Content

Content to load

Basically, what the above code is supposed to do – at least that’s what I was thinking – is that the content from “main_content” will be duplicated and placed inside the test div. This, however, doesn’t happen. Instead, the content of the test div is erased.

Any help on this would be appreciated!

Thanks!

Tom
December 12th, 2008 at 1:39 PM
One more question: is there a way to access the target/tagToload div when they’re nested? For example, consider

. Now I’d like to specify the child of parent1 as the target.

Thanks in advance for your help!

Tom

MaX
December 12th, 2008 at 2:43 PM
Thanks Tom, But please, post your question in the appropriate post next time.
It appears that your ‘a’ tag doesn’t have an ajaxify class. I don’t know wether this is your problem or not. but if the class was correct. Ajaxify will load test.html and then search for #main_content and inject it in #test.
I hope this helped you.

And the code for your second question was removed by WP. Please send it encoded or send it via the contact form.

Tom
December 13th, 2008 at 4:34 AM
MaX,
the code from the first question was also removed by WP, so I’m including the code sections for both of my questions:

1)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="jquery.ajaxify.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(‘.ajaxify’).ajaxify({
tagToload: ‘#main_content’,
target: ‘.test’,
loadHash: ‘attr:rel’
});
});
</script>
</head>
<body>
<div id=’other’><h2>Click the link below to make the AJAX call</h2>
<a rel=’link1′ class="ajaxify" href="test.html">Click here</a></div>
<div id="content">this should stay where it is
<div class=’test’>Default Content</div>
</div>
<div id="main_content">Content to load</div>
</body>
</html>

2) How can I set tagToload child of parent2?
<div id=’container’>
<div id=’parent1′><div class=’child’></div></div>
<div id=’parent2′><div class=’child’></div></div>
</div>

Thanks and sorry for posting in the wrong blog previously.

Tom

MaX
December 13th, 2008 at 4:45 AM
I have tested you code. and it appears it works fine.
I saved your code as “test.htm”. And when I clicked “Click here”, ajaxify replaced “Default Content” with “Content to load” and the page became has two “Content to load” . isn’t that what are you trying to do?
And for you second question you could write as “#main_content #parent1 .child”
jquery selector is almost exactly as CSS.

MaX
December 13th, 2008 at 4:48 AM
And to use lodHash you have to add history plugin to your page.
Enabling ajaxify debugger will help you to setup your call correctly
add $.AjaxifyDebug = true; before start calling ajaxify.

ivus
January 19th, 2009 at 7:49 AM
Hi Max,

I’ve got this new problem now…

I’m trying to integrate this script with PHP, the PHP part is all sorted, but trying to redirect using the ajaxify script poses a few problems.

$(“.ajaxify”).ajaxify({
link: ‘/index.php?option=com_onlinecourse&view=appraisal&Itemid=2&course_id=’,
target: ‘#main_content’,
tagToload: ‘#main_content’,
loadHash:true
});

all this seems to do is refresh the page.. not sure how to fix it.

MaX
January 21st, 2009 at 2:53 AM
What is your server output?

ivus
January 21st, 2009 at 3:00 AM
it just reloads the entire page, is that what you mean? I need a way for the ajaxify to execute via javascript, not mouseclick? is that possible?

MaX
January 21st, 2009 at 3:06 AM
I recommend you to upgrade to version 2.0. In v2 you can set event to false to fire ajaxify on demand.

NetzKnecht
January 22nd, 2009 at 9:17 PM
Hey Max,

with some modifications of your script i’ve got a solution for my problem – if you are interested in, i will send it to you by mail because it is a bit more extensive to post it here?!

Hello ivus,

i dont have a problem solving for you, but a very usefull advice if you want to load the content of an element in the same or in other words if “target” and “tagToload” is the same element:
open the “jquery.ajaxify.js”-script and go to the function “jQuery.ajaxifLoad” (near by line 226), search and replace the first code-snipped with the second. now only the content of the “tagToload” is disyplayed in the “target”.
the originalcode would nest the “tagToLoad” inside the “target”.

Here an example what will happen without the modification:
```
b??
??z{
```
Replace:
??.?????N?hi?Z?

with
??.?????N?hi?Z?

Libertarian Greetz from germany – sorry for the bad english,
NetzKnecht

NetzKnecht
January 22nd, 2009 at 9:20 PM

Arrrgh, i’ve used the wrong “code”-tag… sorry for the doublepost max.

Here an example what will happen wihout the modification:
<div id="#main_content"><div id="#main_content">Your Content</div></div>

Replace:

if(current.tagToload){
		data = '<div>'+data+'</div>'; //wrap data so we can find tags within it.
			if(typeof current.tagToload == 'string'){
					jQuery.ajaxifyManip(current,jQuery(data).find(current.tagToload)); 					
			}else if(typeof current.tagToload == 'object') {
					jQuery.each(current.tagToload, function(tag, target) {
						if(jQuery(data).find(tag).size())
							jQuery.ajaxifyManip(target,jQuery(data).find(tag)); 
						else
							jQuery.ajaxifylog('Warning: Tag "'+tag+'" couldn\'t be found.');
						
					});
			}
		
		}else{

with

if(current.tagToload){
		data = '<div>'+data+'</div>'; //wrap data so we can find tags within it.
			if(typeof current.tagToload == 'string'){
					jQuery.ajaxifyManip(current,jQuery(data).find(current.tagToload).html());			
			}else if(typeof current.tagToload == 'object') {
					jQuery.each(current.tagToload, function(tag, target) {
						if(jQuery(data).find(tag).size())
							jQuery.ajaxifyManip(target,jQuery(data).find(tag).html());
						else
							jQuery.ajaxifylog('Warning: Tag "'+tag+'" couldn\'t be found.');
						
					});
			}
		
		}else{

MaX
January 22nd, 2009 at 9:21 PM
What was the problem anyway?. I would like to see what have u done. it could be useful for others.

Juan
September 13th, 2009 at 1:43 AM
Hi Max,
I’m using your script, works wonderfully, but I have a
doubt … Ajaxify be combined with Flash?

I activate a link using flash?

Rodrigo
April 16th, 2010 at 7:23 PM
Hello I love this plugin

well my doubt is the following call to the page within a target
# ConPAG ok but the prob is on the page because I want the whole
navigation is within the # conPag but he is giving stick “loadHash” and so
works in IE

the example is so

main page:

xxxx link calls the page in # conPAG yyyy yyyy has links on the page I
wanted to continue in the # conPAG

yyyy page but also has other functions as I proceed to
able to work this way