CODEWITHSUNDEEP
javascriptjquerydom
Dav.id
Dav.id

Reputation: 2797

jquery not updating DOM immediately?

I have looked through a few other questions, and tried a few options, but still a bit of a loss.

EDIT - JUST TO SHOW THE ACTUAL AJAX CALL BEING MADE..

$.ajax({
    type: 'GET',
    url: 'AJAXget/getPostcodeCheck.ashx',
    data: 'postcode=' + postcode,
    async: false,
    timeout: 10000,
    success: postcodeCallback,
    error: function () {
        alert('Sorry, there was an issue contacting the server.. please retry.');
        return;
    }
});

I have the following jQuery AJAX bind function, where I want to show something is loading for instance..

$('#' + btnID).bind('ajaxStart', function () {
    $('#' + btnID).append('<div>loading</div>');
});

This is just a basic example.. I did use an addClass function to the element (#btnID is a div), but again nothing seemed to happen directly.

I have put an alert statement in the function to test that the ajaxStart is being triggered, and it does seem to be.. so I am guessing my lack of DOM understanding and/or jQuery is at fault! i.e. why any DOM update/injection is not being shown immediately?

Any pointers/ideas much appreciated!

Upvotes: 2

Views: 3595

Answers (2)

S P
S P

Reputation: 4643

I assume this code is called after user clicks a button. In that case, why you don't do the following:

  1. Before the Ajax-call you do: $('#' + btnID).append('loading');
  2. On Success or Error, you do: $('#' + btnID).remove();

I'm sure that approach will work.

Upvotes: 1

Phil.Wheeler
Phil.Wheeler

Reputation: 16848

Try coding your ajaxStart method like this:

$('#' + btnID).ajaxStart(function() {
  $(this).append('<div>loading</div>');
});

Also, see what happens when you simplify your jQuery Ajax call to this:

$.get('AJAXget/getPostcodeCheck.ashx', { postcode: postcode }, function(data) {
  //$('#yourResultElement').html(data);
  console.info(data);
});

If you're using Firebug (you're using Firebug, right?), click the Console tab and see what's returned.

Upvotes: 1

Related Questions