J’ai un appel ajax qui remplit une partie de ma page avec le code HTML renvoyé dans le rappel de réussite:
function LoadCurrentCourses(masterKey, status) { status = 'S'; $.ajax({ type: "GET", url: "/Home/LoadCurrentCourses/?masterKey=" + masterKey + "&status=" + status, dataType: "html", success: function (evt) { $('#currentCourses').fadeIn(1500, function () { $('#currentCourses').html(evt) }); }, error: function (req, status, error) { $('#currentCourses').html("Error occured resortingeving current courses
"); } });
}
le balisage #currentCourses a juste un en-tête et un fichier de chargement .gif dedans.
Current Courses
Le ajax est appelé depuis ma page principale sur doc.ready ():
$(document).ready(function () { var masterKey = '@Model.MasterKey'; //load degree overview LoadCurrentCourses(masterKey); });
Ce que j’essaie de faire, c’est que les données soient renvoyées. J’aimerais que le code HTML s’installe lentement dans la page principale, remplaçant ainsi le gif et l’en-tête. Pour le moment, tout fonctionne bien, tout est chargé et est remplacé, mais je n’arrive pas à comprendre où je devrais mettre la méthode jQuery .fadein ().
Des idées?
Vous devez charger le texte avant de passer en fondu
success: function (evt) { $('#currentCourses').html(evt); $('#currentCourses').fadeIn(1500); },
Vous devrez peut-être également supprimer ou masquer ce conteneur avant de procéder à un fondu en fond d’écran, sinon il semblerait que rien ne se passe et que vous ne chargez que les nouvelles données.
Devrait être comme:
success: function (evt) { $('#currentCourses').html( evt ).fadeIn(1500); }
Fondu après que l’élément est .fadeIn()
, sinon appeler .html()
à l’intérieur du rappel .fadeIn()
entraînera:
fade--(fade ends)-->--(HTML applied)