Ajaxify links with a particular class using jquery

Question

Is it possible to load all the links with class 'ajax' without refreshing the page? The complete body content should be changed, the page title and the url should so it can be bookmarked.

@Dogbert that script is massive for what effectively should a few lines of jQuery. edit- The example on the sites homepage doesn't even work. — Dunhamzzz, Jul 28 '11 at 10:51
@Dunhamzzz, it does but you have to tick the checkbox. Agreed though, too much. — rickyduck, Jul 28 '11 at 11:04

score 3 · Accepted Answer · answered Jul 28 '11 at 10:43

3

$('a.blah').click(function(e){
    e.preventDefault;
    $.get('page.html', function(data){
        $('body').html(data);
    });
});

That is probably the simplest way, replace blah with your class, and page.html with your page.

answered Jul 28 '11 at 10:43

rickyduck

4,030
14
58
93

Dunhamzzz · Answer 2 · 2011-07-28T10:50:07.090

2

This should work for all links with a certain class, 'target' is the id of your main content div. It requires no editing of your current mark up.

$('.class').click(function(e) {
    e.preventDefault();
    $('#target').load($(this).attr('href'));
});

edited Jul 28 '11 at 10:50

answered Jul 28 '11 at 10:43

Dunhamzzz

14,682
4
50
74

For the difference between my response and Dunhamzzz, read this: http://stackoverflow.com/questions/1246137/ajax-jquery-load-versus-jquery-get – rickyduck Jul 28 '11 at 10:52
1

@rickyduck .load is fine for OPs needs? – Dunhamzzz Jul 28 '11 at 10:56
1

thought it relevent to highlight the difference for future ref, knowledge is key! $.load is fine though, I'd use $.load in this instance – rickyduck Jul 28 '11 at 10:58
But can i change the page title and url with this? – esafwan Jul 28 '11 at 11:04
1

Yeah, depends how you want to do it, it will require some jQuery knowledge. Personally, I'd put the page title in the ` – Dunhamzzz Jul 28 '11 at 11:07

Ajaxify links with a particular class using jquery

2 Answers2