Chargement d'un script sur site dynamique

Marsh Posté le 15-02-2011 à 12:31:25

Bonjour a tous !
Voila j'ai un petit soucis de chargement d'un script java.
Jai fait un site dynamique a l'aide de Ajax, le menu est fixe et ne se recharge pas. Seul le contenu de la page change.
Or sur un de ces contenus, un script doit se charger pour creer un menu accordeon (que j'utilise pour répertorier une liste de pays, qui quand on clique dessus nous affiche des informations.)

Seulement, si j'attends le chargement de la page principale, les scripts se chargent, puis quand je veux acceder au contenu, le menu accordeon (fait en javascript) est completement déroulé, sans pouvoir cliquer dessus (en gros la chargement du script n'a pas eu lieu, ou est figé) , mais par contre quand je rafraîchis la page et je n'attends pas la fin de chargement pour aller voir le contenu, le script marche bien, le menu accordeon fonctionne parfaitement.

Je ne sais pas si c'est une histoire de chargement dynamique des scripts, mais j'ignore comme résoudre ce probleme.

Je précise, le script qui bloque est celui appelé "accordion.pack.js"

Script de mon index.php avec Ajax+script

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tour du monde</title>

<script type="text/javascript">
/*On crée un élément html script*/
var script = document.createElement('script');
/*On spécifie le type de script de la balise script*/
script.type = 'text/javascript';
/*On indique la source du javascript à charger dynamiquement*/
script.src = 'accordian.pack.js';
/*On ajoute le script dans le head de la page courante pour charger le script*/
document.getElementsByTagName('head')[0].appendChild(script);
</script>


<link href="style.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
</head>

<body bgcolor="#583C05">
<font color="#FFFFFF">

<script type="text/javascript" src="accordian.pack.js"></script>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>

<script type="text/javascript">
function envoieRequete(url,id)
{
var xhr_object = null;
var position = id;
if(window.XMLHttpRequest) xhr_object = new XMLHttpRequest();
else
if (window.ActiveXObject) xhr_object = new ActiveXObject("Microsoft.XMLHTTP" );

// requete désirée
xhr_object.open("GET",url, true);
xhr_object.onreadystatechange = function(){
if ( xhr_object.readyState == 4 )
{
// div ciblée
document.getElementById(position).innerHTML = xhr_object.responseText;
}
}
// dans le cas du get
xhr_object.send(null);

}
</script>
<body onload="new Accordian('basic-accordian',5,'header_highlight');">

Je me demande si c'est pas non plus cette question de <body onload>

Script de mon contenu listepays.html

Code : HTML - Sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Simple Javascript Accordions - by www.dezinerfolio.com</title>
<style type="text/css">

<script type="text/javascript">
function envoieRequete(url,id)
{
var xhr_object = null;
var position = id;
if(window.XMLHttpRequest) xhr_object = new XMLHttpRequest();
else
if (window.ActiveXObject) xhr_object = new ActiveXObject("Microsoft.XMLHTTP" );

// requete désirée
xhr_object.open("GET",url, true);
xhr_object.onreadystatechange = function(){
if ( xhr_object.readyState == 4 )
{
// div ciblée
document.getElementById(position).innerHTML = xhr_object.responseText;
}
}
// dans le cas du get
xhr_object.send(null);

}
</script>

#basic-accordian{
border:5px solid #EEE;
padding:5px;
width:800px;
position:absolute;
z-index:2;

}

.accordion_headings{
padding:5px;
background:#3C0;
color:#FFFFFF;
border:1px solid #FFF;
cursor:pointer;
font-weight:bold;
}

.accordion_headings:hover{
background:#00CCFF;
}

.accordion_child{
padding:15px;
background:#583C05;
}

.header_highlight{
background:#00CCFF;
}

</style>
<script type="text/javascript" src="accordian.pack.js"></script>
</head>
<body onload="new Accordian('basic-accordian',5,'header_highlight');">

Quelqu'un a t'il une idée ?

Merci d'avance pour vos réponse

Marsh Posté le 15-02-2011 à 12:31:25

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed

Name *

Email *

URL

Message *