Ajaxify – Support v2.0

Friday, December 12th, 2008 | Author: MaX

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

For advanced paid support or special requests. Contact me through the contact form.

Known issues:

Stop ajaxify excuting based on onStart function return.
Fix false warning “warning: target “#Ajaxifytemp” couldn`t be found”
Fix back button on first ajaxify call.

Feature requests:

Loading Images via ajaxify.
Encode non safe characters in url’s before sending the request.
Change the page title based on the loaded content.

For advanced paid support or special requests. Contact me through the contact form.

__________________________________________________________________________

How to make ajaxify compatible with jquery v1.3.0 and higher?.

Open jquery.ajaxify.js with your preferred editor.
Go to line 58. You will see var ver = jQuery.fn.jquery.split(‘.’);

Mark it, and go down until you reach line 62. So the full text will be:

var ver = jQuery.fn.jquery.split('.');
if(ver[0] < 1 || ver[1] < 2 || ver[2] < 6){
jQuery.ajaxifylog('Error: Your jQuery version is old. Version 1.2.6 or newer is required.');
return false;
}

Comment it or delete it. its your choice.

Category: jQuery

You can follow any responses to this entry through the RSS 2.0 feed. Responses are currently closed, but you can trackback from your own site.

415 Responses to “Ajaxify – Support v2.0”

Pages: [1] 2 3 4 5 6 7 8 9 10 11 … 21 » Show All

Alexey
December 12th, 2008 at 3:49 AM
It happend! Thanks MaX!

Miraploy
December 14th, 2008 at 8:55 PM
Great plugin!

Can the target take jquery selectors?

I want to select #comment > container, for each comment.

That is: I have multiple links in multiple comments. When I click that link, I want the target to be the parent comment of that link. Is there a way to set the target like that?

Thanks.

MaX
December 14th, 2008 at 9:07 PM
There is many ways. the best way is to let you container have an id and the target is that id. you have to let your server side help with this, the id must be smething unique like the comment id in your server side. the code will look something similar to this:
<div id="c<? echo $id; ?>">
<a href="link.html" target="#c<? echo $id; ?>">Click</a>
</div>

in that way you will ajaxify your all comments with the same call.

Harshal Shah
December 15th, 2008 at 1:56 PM
Great plugin Max. Thanks. I’ve a special situation where I am stuck. Some of the links are of “<a href="*/delete/*" rel="nofollow"> nature. I just want to add a confirm dialogue box for all the delete requests. Before using ajaxifying I used to …
```
$(delete_link_selector).click(function(e){
   if (confirm("Are you sure?"))
        $(#target_selector).load( $(this).attr("href") )
});
```
Is there a way to do this w/ Ajaxify ?

Thanks.

MaX
December 16th, 2008 at 3:04 AM
Thanks Harshal,

You have just made me remember that I forgot to fix v1 issue in v2 that you could use. If the issue were fixed you can add your code like that:
$(delete_link_selector).ajaxify({
onStart:function(){
if (!confirm(“Are you sure?”))
return false; // otherwise, the code will continue executing
}
});

if you would like to use it that way. open the plugin (uncompressed version) and replace “current.onStart(current);” with :

var start = current.onStart(current);
if(start===false)
return false;

about line 238. You can do it in another way. without editing the source code:

$(delete_link_selector).click(function(e){
if (confirm(“Are you sure?”))
$(this).ajaxify({
event:false,
target:”#target_selector”
});
});

Tom
December 16th, 2008 at 3:46 AM

MaX,
Thanks to you, I got everything almost working. The only last thing that doesn’t seem to be working is including the loading image when using multiple tagToload. When I use a single tagToload and a single target, it works. Here’s my code:

$(document).ready(function() { 
  $('#topNav_menu a').ajaxify({
         tagToload: { '#content .module .module_content .text':'
#content .module .module_content',										  '#leftNav .nav': '#leftNav'},				         loadHash: 'attr:rel',					         loading_img: 'imgs/loader.gif'				         
   }); 
});

Thanks in advance,

Tom

MaX
December 16th, 2008 at 2:43 PM
Yah, thats normal. Neither target nor loading_target has been set. Use loading_target option. This will make your image appear in that target.

Tom
December 16th, 2008 at 7:01 PM
Is it possible to have a loading image in multiple targets – for example, as in the code above, I’d like to have a loading image for the left nav, as well as for the content module? Or is it 1 loading image per function?

Thanks,

TOm

MaX
December 16th, 2008 at 7:13 PM
Take a look at metadata example. and use loading_target instead of title. if it didn’t solve your problem, you have to set up your own loading function by using onStart and onComplete events.

Cody
December 18th, 2008 at 2:00 PM
I’m considering an implementation of Ajaxify. I have several questions:

1. Is it possible to append a string to the url requested? So , for example, if I had:

text

Ajaxify would actually request content from:

example.com/link?query=here

Is there a way to make this happen?

2. Does this history plugin used by ajaxify support bookmarking? The example on the demo site does not. If not, do you forsee any trouble if I were to use another Jquery history plugin that does support bookmarking?

3. Is there a way to jump to the top of the page upon click?

4. Is there a way to unfocus (blur) on click? So any hovered items return to there normal state upon click?

I appreciate all your work on ajaxify! Thanks in advance if you have the time to respond to these questions

Cody
December 18th, 2008 at 2:02 PM
Sorry, wasn’t thinking that my comment would have the code parsed. The first question is if there is a link whose href is “example.com/link”, is there a way to make Ajaxify actually load the content from “example.com/link?query=here”?

MaX
December 18th, 2008 at 4:48 PM
Well, thats a lot of questions

1- Yes, you have params option that will send page parameters to the server.
You can use params as a string like:
..
params:’action=here’,
..
Or as a function, like as I did in flexigrid example.

2- Yes it does support bookmarking. The problem is in the demo page that the test links are in second level (demo.php > history page > test links). While the plugin only support 1st level. To see the demo action you have to click on a test link (link1, 2 or 3) then reload the page by clicking “History & Bookmarking” or opening it in a new tab. you will see then that that test link that was clicked will load again automatically. And modify it as you wish. just keep my name as the original creator for the plugin .

3- here is a simple way:
…
onStart:function(){
scroll(0,0);
}

4- I can’t tell what are exactly wants to do. but may be you are looking for something like this:
…
onStart:function(op){
$(op.object).bind(‘blur’,function(){
//some code here.
})
});
…
If you have anymore questions, you are welcome.
}

Cody
December 18th, 2008 at 5:17 PM
Max,

Wow, that was quick. Thanks for the rapid answers. I will play with this tonight and test it on my site and report back here with what I find

Cody
December 18th, 2008 at 9:37 PM
Well, I couldn’t wait until tonight. Been playing with it for about two hours now It’s working great, and thats with me knowing practically zero javascript:

http://nationalcitypd.com/

With javascript enabled there are no page loads anymore. Navigation is extremely fast now! At first I was gonna use TagToLoad, but then I changed my template server side to use a query string to narrow down the content for less download time.

Bookmarking isn’t perfect, but thats a jscript limitation. History is buggy sometimes, still trying to track down the reasoning. Plus I uncovered a nasty Chrome opacity bug I have to narrow down and report.

Have a couple more questions if you dont mind:

———

1. Reference my fourth question above, the issue is that if I am hovering over a submenu and click a link, the new content loads in the background but I am still hovered in the menu. I would like to cancel the hover state, exit the menu if you will, to not cover up the new content. Hope that explains it

2. With the metadata plugin, by default Ajaxify uses the class element. Is there a parameter to tell Ajaxify to use another element, or are we stuck with class?

3. The scroll to top function you gave me above worked excellent. However, I wanted it to scroll smooth, so I tried to implement this plugin:

http://demos.flesler.com/jquery/scrollTo/

By using this code in Ajaxify:

onStart:scrollTo( {top:’0px’, left:’0px’},

Didn’t work. I tried within a function also:

onStart:function(){
scrollTo( {top:’0px’, left:’0px’}, 800 );
},

Am I doing something wrong, or are the scripts simply incompatable (I know very little jscript ).

———

So now, without javascript, a normal site. With jscript, a super snappy no page load site. I just wish bookmarks worked with the real URLs, but I understand that is a javascript limitation (for security reasons prob.).

Anyway, sorry for the long post, and thanks again for Ajaxify!

Steve
December 19th, 2008 at 10:53 AM
Just want to start off by saying great work on this plugin. I have an issue however that I can’t seem to figure out. Here is what I have. I have a row of image thumbnails that link to a page called showImage.php?album=albumname&image=imagename. All this page does is takes the $_GET vars and outputs an . I am trying to use the animation effects but it doesn’t seem to work properly. If I click on an image it shows up in my #imageHolder container but the “effects” are not applied. However if I click the same thumbnail a couple of times the effects begin to work for that image. Any Ideas? Thanks again for this great plugin.

J
December 19th, 2008 at 9:39 PM
I’m having a lot off difficulty getting the history hash stuff to work. I have links that are just hashes, so href=”#link”, but it never seems to work correctly. Can you tell me what I’m doing wrong? I have defined loadHash:’attr:href’, and load the history.js plugin. The URL changes, but nothing ever gets loaded, I even define link:”linktopage.php”.

Thanks for your help,
~J

MaX
December 20th, 2008 at 1:42 AM
Cody, I would like to thank you for using ajaxify in an appropriate way. Your SEO has not been affected. javascript unsupported browsers still can navigate your site normally
and you have just added a new features that will accelerate navigatin, reduce server bandwidth and loading it in cool way.
I was going to write a full article about these things. but you were faster

Bookmarking isn’t perfect, but thats a jscript limitation. History is buggy sometimes, still trying to track down the reasoning. Plus I uncovered a nasty Chrome opacity bug I have to narrow down and report.

Well, Hashing technique is the best way to do it so far. Integrating history was the most difficult part in ajaxify programming. And I the final results were ok. if you believe that history still have some bugs. try to know the procedures you did to produce those bugs and let me know to check it myself.
And about chrome. first of all. chrome still in its first releases (if not beta as I remember) so its normal. besides there really no chrome users compared with other browsers. I think you should not worry about this.

1- it seems like a bug for me as it doesn’t always happen.
try the scenario I used in yahoo widget example. expect that you need to move $(‘#tabs .selected’).removeClass(’selected’); to the onComplete event.

2- No, add this line before ajaxify call
$.metadata.setType(‘attr’,'data’);
And HTML will be:
<li data="{some:’random’, json: ‘data’}" class="someclass">…</li>
here is the docs: http://docs.jquery.com/Plugins/Metadata

3- from the plugin examples. it seems that it needs a html object to bind the click event.
try this: add at the top of your page <div id="scroll"></div>
and this before ajaxify call
$(‘#scroll’).scrollTo( {top:’0px’, left:’0px’}, 800 );
and in ajaxify
onStart:function(){
$(‘#scroll’).click();
}

You are welcome dude

MaX
December 20th, 2008 at 2:14 AM
Steve, This is because the animate function was fired before the image gets downloaded to browser cache. And it will work (after couples of clicks ) when images gets cached.
try this:
//i will suppose that the effect is fading
animateOut:{opacity:0}
//and no animateIn.
and onSuccess event add this,
$(op.target + ‘ img’).bind(‘load’,function(){
$(op.target).fadeIn(op.animateInSpeed);
});

And tell me the result.

J, if the href=”#link” . what is the url of the page then.??
href attr have a higher priority than link option. you have to set the page url in the href attr so it can load the page.
try it step by step . dont use load hash until you find that ajaxify works correctly. and enable ajaxify debugger. this will help you too.
if the problem still unresolved, post your code here.

Steve
December 20th, 2008 at 6:11 AM
Max thanks for the quick reply. Here is the code I tried but however it did not work.
```
$(".ajaxify").ajaxify({
	target: '#imageHolder',
	animateOut:{opacity:0},
	animateInSpeed:300,
	onSuccess: function(){
		$(op.target + 'img').bind('load',function(){
		$(op.target).fadeIn(op.animateInSpeed);
		});
	}			
});
```
I don’t know if this correct I am fairly new to Java and Jquery and struggling with the syntax. I am getting an error in my Error Console after clicking on a thumbnail.

op is not defind – and it says the error is with the
$(op.target + ‘ img’).bind(’load’,function(){ line of code. Thanks for the help.

MaX
December 20th, 2008 at 10:30 AM
two mistakes. onSuccess function doesn’t have the argument and the selector must hav a space before img. try this:
$(“.ajaxify”).ajaxify({
target: ‘#imageHolder’,
animateOut:{opacity:0},
animateInSpeed:300,
onSuccess: function(op){
$(op.target + ‘ img’).bind(‘load’,function(){
$(op.target).fadeIn(op.animateInSpeed);
});
}
});