Question

I am trying to create an ajax call, but it does not work, the link is not even disabled.

My Jquery:

$('table th a').click(function(e) {
                var a = $(this).closest('a');
                $.ajax({
                        type: GET,
                        url: a.attr('href'),
                        data: a.serialize(),
                        success:function(msg){
                $('#formcontent').html(msg);
                                }
return false
                });

Part of my HTML:

<div id="formcontent">

Navn
Feature 1
Feature 2
Feature 3
Feature 4
Feature 5

</div>

Answer 1

1. “GET” (your type parameter), needs to be a string:

   type: "GET",
   

2. serialize() is for form elements, not anchor tags… what are you trying to achieve with it?

3. And one I missed (as pointed out by ace in his answer), return false; in inside the AJAX call, not inside the click handler. (added for answer-completeness, not to steal anything away from ace!)

As for problems which won’t stop the snippet working, but should be fixed:

1. $(this).closest('a'); is completely redundant. Use $(this) instead.

2. Instead of binding handlers to numerous elements (lots of work!) bind it to a single element instead, using either live() or delegate()

   $('table').delegate('th a', 'click', function(e) {
       var a = $(this);
       $.ajax({
           type: 'GET',
           url: a.attr('href'),
           data: 'something',
           success: function(msg) {
               $('#formcontent').html(msg);
           }
           return false
       });
   });