Comment rafraîchir / recharger le contenu d'une div en jQuery/Ajax ?
Avec AJAX, il est typiquement possible de recharger une partie de la page sans avoir à recharger entièrement une nouvelle page.
Le principe des requêtes AJAX est d'effectuer des requêtes vers le serveur en parallèle du déroulement d'une page web sans la quitter. Il est donc possible de recharger une partie de la page sans avoir à recharger entièrement une nouvelle page. La bibliothèque JQuery facilite l'écriture de ce code.
Pour recharger une partie de la page suite à une soumission d'un formulaire, il faut ajouter une fonction qui s'exécutera sur l'événement submit du formulaire. Dans cette fonction, on récupérera l'URL à laquelle soumettre le formulaire en récupérant la valeur de l'attribut action.
Pour les données contenues dans le formulaire, la méthode serialize de JQuery permet justement de sérialiser les données dans une variable pour les transmettre directement dans un appel AJAX. Lancez ensuite l'appel AJAX et, sur l'événement success (qui s'exécute lorsque l'appel AJAX a correctement fonctionné), remplacez le contenu du formulaire par le résultat de l'appel.
:$(document).ready(function(){
$(function(){
$('#formulaire').submit(function(e){
e.preventDefault();
var formulaire = $(this);
var post_url = formulaire.attr('action');
var post_data = formulaire.serialize();
// On peut ajouter une image de chargement pour faire patienter l'internaute
$('#loader3', formulaire).html('<img src=../../images/ajax-loader.gif />Please wait...');
//Appel AJAX
$.ajax({
type: 'POST',
url: post_url,
data: post_data,
success: function(msg) {
//Affichage du formulaire avec un effet
$(form).fadeOut(800, function(){
form.html(msg).fadeIn().delay(2000);
});
}
});
});
});
});
Pour effectuer un simple rechargement d'une division (sans soumission du formulaire), vous pouvez utiliser la méthode load de JQuery :$(#myDiv).load(location.href+ #myDiv>*,);
Ce code rechargera l'intérieur de la division avec le contenu original appelé avec l'URL.