Ajax Medical Specialist Needed [Solved by Hakjoon]

Pat64 · 2011-07-20 13:11:02

Hi Folks.

I’m trying to ajaxify the categories listener on the front page of txp-fr.net website.

Right. After some hours of work, all necessary processing stuff is ready now (articles categories filter, ajax page display and pagination).

So. I’ve got a problem ;) Here is my jQuery script:

<script>
$(document).ready(function() {
	$('a.category').click(function() {
		$('#column-outer').addClass('cat-list gradient');
		$.get('cat_page_lister',{
			cat:$(this).attr('id')
			},function(data) {
				$('#column-outer').html(data);
			}
		);
		return false;
	});
	$('a.cat-paginate').click(function() {
		$.get('cat_page_lister',{
			cat:$(this).attr('rel'),
			page : $(this).attr('id')
			},function(data) {
				$('#column-outer').html(data);
			}
		);
		return false;
	});
});
</script>

The first $('a.category').click(function() works fine, as expected. The second one $('a.cat-paginate'.click(function() doesn’t work at all! And I can’t figure why.

Even if I had a test alert('Click detected) just after this function, I haven’t anything. Its first time I’m trying to use Ajax, so I’m not very pleased with it.

Note: var process = $(this).attr('href') is a variable which contain my PHP query grabbed from link href attribute (?cat=my-category&page=2)

Could you tell me where I failed? Thanks lot by advance, folks.

Working solution by Hakjoon (aka The Boss) :

<script>
$(document).ready(function(){
	$('body').delegate('a.category', 'click', function(e){
		$.get('cat_page_lister',{
			cat: $(this).attr('id')
			},function(data){
				$('#column-outer').html(data);
			}
		);
		$('#column-outer').addClass('cat-list gradient');
		e.preventDefault();
	});
	$('body').delegate('a.cat-paginate', 'click', function(e){
		var process = $(this).attr('href');
		$.get('cat_page_lister',{
			cat: $(this).attr('rel'),
			page: $(this).attr('id')
			},function(data){
				$('#column-outer').html(data);
			}
		);
		e.preventDefault();
	});
});
</script>

Edit: For readers, the article is updated to a better understanding.

Last edited by Pat64 (2011-07-21 07:37:49)

hakjoon · 2011-07-20 14:14:28

return false; does a lot of stuff related to event propagation and bubbling that depending on the structure of you page could cause issues. Try switching to event.preventDefault() instead.

Some reading

Not sure if this is your problem.

Pat64 · 2011-07-20 14:27:08

Patrick thanks to reply.

I’lm going to try this and tell you the result.

Cheers,

Pat64 · 2011-07-20 14:48:46

OK. I’d made some tests.

@Patrick:

I’ve got results now: 1st function works with Ajax. 2nd function doesn’t work with Ajax but into browser. Any solutions?

Edit: code above changed with hakjon’s advices.

hakjoon · 2011-07-20 20:18:55

Was poking around on the site. I don’t see a a.cat-paginate when the page loads. I only see it once I pick a category. If that is the case the listener is never attached because it doesn’t have anything to attach to. When the link comes in after the ajax it is a new node so it does not have the event listener attached.

You need to either re-attach the listener everytime the DOM changes or use event delegation. To reattach the listener all the time you can use jQuery.live or you cna use jQuery.delegate()

Event Delegation is a preferable pattern because adding and removing listeners can lead to memore leaks in older IE’s.

Pat64 · 2011-07-20 20:43:01

Well explained Patrick. Thanks.

I’ll study your advices tomorrow. Then, I’ll try to adapt the script.

Again, thank you wasted your time mate. I found a good book about jQuery (beginners to Ninja, SitePoint editor) I’m going to read it ;)

However, with your 2 posts, I learned at lot!

Best regards,

Pat64 · 2011-07-21 06:52:50

Yeah. Patrick I think really you are a jQuery Ninja (or an Ajax Medical Specialist :).

Man, it’s perfect now. I would like to thank you for your efficient advices without you I can’t realize the expected effect.

Thanks again. (Initial code above corrected).

Best regards,

P.S. I like your punk music

Last edited by Pat64 (2011-07-21 17:12:15)

Textpattern CMS

Textpattern CMS support forum

#1 2011-07-20 13:11:02

Ajax Medical Specialist Needed [Solved by Hakjoon]

#2 2011-07-20 14:14:28

Re: Ajax Medical Specialist Needed [Solved by Hakjoon]

#3 2011-07-20 14:27:08

Re: Ajax Medical Specialist Needed [Solved by Hakjoon]

#4 2011-07-20 14:48:46

Re: Ajax Medical Specialist Needed [Solved by Hakjoon]

#5 2011-07-20 20:18:55

Re: Ajax Medical Specialist Needed [Solved by Hakjoon]

#6 2011-07-20 20:43:01

Re: Ajax Medical Specialist Needed [Solved by Hakjoon]

#7 2011-07-21 06:52:50

Re: Ajax Medical Specialist Needed [Solved by Hakjoon]

Board footer