jquery ne met pas à jour DOM immédiatement?

Question

J'ai regardé quelques autres questions, et j'ai essayé quelques options, mais encore un peu de perte.

EDIT - JUSTE POUR AFFICHER L'APPEL AJAX ACTUAL 'ETRE ..

$.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; 
    } 
}); 

je la fonction de liaison jQuery AJAX suivante, où je veux montrer quelque chose est le chargement par exemple ..

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

Ceci est juste un exemple basique. J'ai utilisé une fonction addClass pour l'élément (#btnID est un div), mais encore une fois rien ne semblait se produire directement.

J'ai mis une instruction d'alerte dans la fonction pour tester que l'ajaxStart est en train de se déclencher, et cela semble être .. donc je devine mon manque de compréhension DOM et/ou jQuery est en faute! c'est-à-dire pourquoi aucune mise à jour/injection DOM n'est affichée immédiatement?

Des pointeurs/idées très appréciés!

Answer 1

Essayez coder votre méthode ajaxStart comme ceci:

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

Aussi, voir ce qui se passe lorsque vous simplifiez votre appel jQuery Ajax à ceci:

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

Si vous utilisez Firebug (vous » Si vous utilisez Firebug, n'est-ce pas?), cliquez sur l'onglet Console et voyez ce qui est retourné.

Answer 2

Je suppose que ce code est appelé après que l'utilisateur a cliqué sur un bouton. Dans ce cas, pourquoi vous ne procédez pas comme suit:

1. Avant l'appel Ajax vous faites: $ ('#' + btnID) .append ('chargement');
2. En cas de succès ou d'erreur, vous faites: $ ('#' + btnID) .remove();

Je suis sûr que cette approche fonctionnera.