Question

I am trying to load html asynchronously using jQuery ajax function. But I for some reason, it only works if async is false. I am using code sample from jQuery website, I don’t see why it wouldn’t work?
I am using Firefox browser, I tried it in IE 8, async: true works there.

Alert shows that data is empty:

$.ajax({
                url: 'test.html',
                async: true,
                success: function (data) { alert(data); }
            });

Data comes back with content of test.html :

$.ajax({
                url: 'test.html',
                async: false,
                success: function (data) { alert(data); }
            });

Strangely enough this makes it work:

var response =    $.ajax({
                url: 'test.html',
                async: true,
                success: function (data) { alert(data); }
            });

            alert(response);

What’s going on here?

Answer 1

OK, figured it out: ajax call was firing on button click, but that button was submiting the form, so the whole page was reloading. Adding “return false;” to click event to prevent button from submitting the form made the difference.