Comment puis-je appeler une fonction javascript pour exécuter quand innerHtml change avec Ajax?

Question

J'utilise Ajax pour changer le innerHtml d'un div en utilisant onclick sur un lien. J'ai besoin d'appeler une fonction javascript après que le fichier soit récupéré du serveur et remplace le contenu de la div. Comment puis-je faire ceci?

<div id="thisDiv"> 
<a href="this.php" onclick="ajaxfunction('thisfile.php','thisDiv');return false;">link</a> 
... 
</div> 

La fonction ajaxfunction remplace le innerHtml de thisDiv avec thisfile.php.

Merci d'avance!

Answer 1

Si vous voulez le faire de manière asynchrone, le plus simple est d'utiliser une bibliothèque. Prototype et jQuery sont de bons choix. Ils fournissent tous les deux des fonctions AJAX qui prennent des options de rappel, de sorte que vous pouvez rendre différentes sorties dans de nombreux cas différents. Par exemple, vous pouvez effectuer une action en cas de succès, une autre en cas d'échec, une autre en cours d'exécution ou des actions pour chaque code d'état HTML.

Answer 2

Je pense que la meilleure façon, en supposant que vos requêtes AJAX sont asynchrones, est d'ajouter un paramètre de rappel à votre fonction, qui sera exécuté lorsque la requête se termine.

Puisque vous ne mentionnez pas la bibliothèque JavaScript soit posté votre ajaxfunction, je suppose que vous pourriez faire des demandes de XHR brutes, le cas échéant, vous pouvez par exemple:

function ajaxfunction (url, elementId, callback) { 
    var xhr = new XMLHttpRequest(); 
    xhr.open("GET", url, true); 
    xhr.onreadystatechange = function(){ 
    if (xhr.readyState == 4) { 
     if (xhr.status == 200) { 
     document.getElementById(elementId).innerHTML = xhr.responseText; 
     callback(); // the content has been loaded to the DOM, executing callback 
     } else { 
     alert('error'); 
     } 
    } 
    }; 
    xhr.send(null); 
} 

Et vous pouvez utiliser la fonction comme celui-ci (noter que je ne recommande pas du tout l'événement JavaScript en ligne utilisation obligatoire pour HTML):

<a href="this.php" 
onclick="ajaxfunction('thisfile.php','thisDiv', otherFn);return false;">link</a> 

la méthode recommandée:

<a href="this.php" id="linkId">link</a> 

---

window.onload = function() { 
    // Event binding... 
    document.getElementById('linkId').onclick = function() { 
    ajaxfunction('thisfile.php','thisDiv', function() { 
     alert('Content retrieved, this is the callback!'); 
     return false; 
    }); 
    }; 
    // .... 
}; 

Pour un exemple plus complet, afficher le code de votre ajaxfunction.