Question

Can somebody tell me what’s wrong with the following code? It always updates to a new page, instead of the “content” div. Thanks.

This is a test:<br />
   <a href="/form" onclick="return updateContent()">Click me</a>
     <div id="content">
       Update here.
   </div>

<script>
function updateContent() {
  $.ajax({
    type: 'GET',
    url: $(this).attr('href'),
    success: function(data) {
      $('#content').html(data);
    };
 });
};
</script>

Answer 1

Liang Tang. You have syntax error in your javascript code here:

success: function(data) {
  $('#content').html(data);
};

there is no need ; after }. Anyways, this is the correct answer. Also don’t use internal events like onclick in your HTML markup. Let’s javascript/jquery handle them for you.

This is a test:<br />
<a href="form.html" id="link">Click me</a>
<div id="content">
Update here.
</div>

<script>
$(function () {
    $('#link').bind('click', function (e) {
        e.preventDefault();

        $.ajax({
            type: 'GET',
            url: $(this).attr('href'),
            success: function(data) {
              $('#content').html(data);
            }
         });
    });
});
</script>

Explanation
1. I give your link an specific ID. So I can access it in jquery code.
2. In the click event of link, I cancel the link behaviour (with e.preventDefault())