Navigation en ajax et script js dans les balises head

barbuslex
Javascript

Bonjour,

J'aimerais créer une navigation en ajax sur mon site. Jusqu'à là rien de bien compliqué pour un modeste développeur.
Seulement sur mon site les scripts js sont dans les balises <head> et certaines pages ont des scripts js différents par rapport aux autres pages.
Exemple:
Accueil.php => include/js/accueil.js
Article.php => include/js/carroussel.js

Une fois l'appel ajax effectué est il possible de charger les scripts js présents dans les balises <head> de la page et de les charger ?

Voici mon scénario :
Je suis sur Accueil.php : Ok
Je clique sur un Article : Ok
L'appel ajax se déclenche (appel de la page Article.php) : Ok
Récupération du contenu du body de la page Article.php : Ok
Remplacement du body de Accueil.php par le body de Article.php : Ok
==> Chargement du script include/js/carroussel.php : Pas Ok :(

Merci d'avance,
++

11 réponses

Vallyan
Réponse acceptée

Pour ajouter un block script a ton head en asynchrone:

var script= document.createElement('script');
script.type= 'text/javascript';
script.src= ' /* l'url de ton script */ ';
document.head.appendChild(script);
Vallyan
Réponse acceptée

Oui, il charge et exécute le script.

Ce que je ferais, c'est une série de balises <script> avec une class '.superkiki' a la fin du body que tu charges, comme tu devrais le faire. Après chaque ajax, parcours ces tags et ajoute les script un a un. A vu de pif ca devrait ressembler a:

$('.superkiki').each(function(){
    var script= document.createElement('script');
    script.type= 'text/javascript';
    script.src= $( this ).attr('src');
    document.head.appendChild(script);

});

Alternativement tu peux aussi mettre ta liste d'url en li dans une div en display=none et faire un 

$('#divCachée lu li').each( /* ... */ );

L'idée c'est juste d'avoir tes script dans un element du DOM facile a récupérer et a parcourir

Vallyan
Réponse acceptée

Note que si tu fais ca la méthode .load() risque de ne pas fonctionner pour cette raison:
jQuery uses the browser's .innerHTML property to parse the retrieved document and insert it into the current document. During this process, <u>browsers often filter elements from the document such as <html>, <title>, or <head> elements.</u> As a result, the elements retrieved by .load() may not be exactly the same as if the document were retrieved directly by the browser.

Utilise $.ajax() ou $.get(), plutot, qui ne devraient pas poser de pb.

barbuslex
Auteur

Ok merci.
Dès que je rajoute ce script de cette manière est-ce que cela va l'exécuter ou juste l'ajouter dans le DOM ?

Mais j'aimerais en fait récupérer l'url du script de manière dynamique (par l'intermédiaire de mon appel ajax) car il y en a plusieurs (pas que carroussel.js).
Cela est il possible ?

barbuslex
Auteur

Ok merci beaucoup.

Encore une dernière question.
Comment puis-je faire pour récupérer le contenu des balises head de la page Article.php en ajax ?

Vallyan

Regarde la méthode $.load(). Si il y a quelque chose après l'url, jQuery le considère comme un selecteur et ne va charger que cet élément.

$('selecteur DOM de ton document courant').load('ajax.php head');
barbuslex
Auteur

Oui mais dans ce cas cela m'oblige donc à faire 2 appels ajax. 1 pour le head et 1 pour le body.

N'y aurait il pas un moyen de charger les 2 en même temps en un seul appel ajax ?

Vallyan

Ben charge toute ta page et fais le trie ensuite

barbuslex
Auteur

Ok merci pour tout !

Dans ce cas est ce qu'il serait pas mieux de remplacer carrément tout le contenu du head avec le nouveau contenu récupéré en ajax ?

Vallyan

bah je sais pas vraiment si c'est mieux. Ca me parait pas bien difficile de tester, au pire, pour voir ce qui marche le mieux ...

barbuslex
Auteur

Oki je vais tester tout ça !

Merci pour ta précieuse aide en tout cas ;)