Votre question

Navigation ajax et include de <script>

Tags :
  • Script
  • Programmation
Dernière réponse : dans Programmation
16 Juin 2010 22:58:09

Bonsoir !

J'utilise une navigation ajax sur mon site. J'en suis tres content tout va bien.
Le probleme est que depuis que j'utilise cela, j'ai mes charts qui ne fonctionnent plus !

vous pouvez atteindre le site sur http://www.avoclix.com
J'ai créé un compte test :
compte:test
mdp: azerty

Il faut que j'arrive a les faire fonctionner meme avec cette navigation.


Il semblerait que le probleme vienne du faite que dans ma div qui affiche le chart contienne un contenue entre les balise <script>. Et comme on affiche cela dans de l'ajax qui est lui meme du script. Ca ne fonctionne pas.

Voici ce qui affiche mon chart dans mon xhtml :

  1. <div id="chartdiv1" align="center" >
  2. FusionCharts. </div>
  3. <script type="text/javascript">
  4. var chart = new FusionCharts("js/Line.swf?ChartNoDataText=Please select a record above", "ChartId", "280", "144", "0", "1");
  5. chart.setDataXML("<chart bgSWF='charts/chart.png' canvasBorderColor='e0e0e0' lineColor='33373e' showShadow='1' shadowColor='bdbdbd' anchorBgColor='f1cc2b' caption='Your advertisement clicks' showLabels='0' numVDivLines='8' hoverCapBgColor='f7df39' decimalPrecision='4' formatNumberScale='0' showValues='0' divLineAlpha='20' alternateHGridAlpha='6'>{$myclicks}</chart>");
  6. chart.render("chartdiv1");
  7. </script>



D'ailleur lorsque j'arrive sur une page qui contient un chart via la navigation ajax, je chart ne s'affiche pas mais on a uniquement le contenu de entre les div. Mais pas le chart contenu dans les balise script.
Quelqu'un a une idée sur comment je pourrais faire ca ?

Merci d'avance !!

Autres pages sur : navigation ajax include script

17 Juin 2010 01:08:09

Tu peux montrer le bout de code qui fait l'appel ajax ?
m
0
l
17 Juin 2010 08:00:54

Alors j'ai mon contenu de page qui est dans ma nivigation ajax contenue entre ca :

  1. <div id="dynamic">
  2. <div id="ajax">
  3.  
  4.  
  5. <script language="JavaScript" src="js/FusionCharts.js"></script>
  6. //contenu de ma navigation ajax
  7.  
  8. </div>
  9. </div>


L'include du fichier js ne se fait que sur les pages ou il y a des charts a afficher.

Et voila mon fichier navigation.js

  1. $(document).ready(function(){
  2. $("#menu a").click(function(){
  3. page=($(this).attr("href"));
  4. $("#dynamic").fadeTo('normal',0.2).load(page+" #ajax").fadeTo('slow',1);
  5. $("#menu a").removeClass("current");
  6. $(this).addClass("current");
  7. return false;
  8. });
  9. });


En esperant que ça t'aide.
m
0
l
Contenus similaires
19 Juin 2010 03:20:15

A mon avis, apres le chargement de ta page via ajax, il faut parser le contenu récupérer pour repéré toute les balises <script>, récupérer leur contenu, et appliquer la fonction eval() sur ce contenu :/ 
m
0
l
19 Juin 2010 03:33:03

Je viens d'effectuer quelques recherche et à priori, avec le framework prototype, il existe un paramètre 'evalScripts' qui exécute le javascript des les pages chargées via ajax.
http://www.bonneville.be/post/AjaxUpdater-evalScripts-D...
http://www.prototypejs.org/api/string/evalScripts

Apres, je ne sais pas trop quel est le framework que tu utilises, mais je pense qu'il dois exister un équivalent dans chaque frameword.

D'ailleurs, dans les dernière version de jquery il semble que ça se fasse même automatiquement :
http://docs.jquery.com/Release:jQuery_1.2
Tput en bas de la page :
Citation :
This method is no longer necessary in jQuery - all scripts included in HTML strings are automatically evaluated when injected into the document. No substitute method is needed.
m
0
l
19 Juin 2010 21:28:27

merci pour tes réponses Seb. Je sens qu'on approche du but. Ca a l'air de fonctionnert avec evalScripts.
Maintenant il faut que j'arrive a le coder correctement.
J'ai essayé

  1. <div id="dynamic">
  2. <div id="ajax">
  3.  
  4.  
  5. <script language="JavaScript" src="js/FusionCharts.js"></script>[color=#ff2600].evalScripts();[/color]
  6.  
  7. <div id="chartdiv1" align="center" >
  8. FusionCharts. </div>
  9. <script>
  10. var chart = new FusionCharts("js/Line.swf?ChartNoDataText=Please select a record above", "ChartId", "280", "144", "0", "1");
  11. chart.setDataXML("<chart bgSWF='charts/chart.png' canvasBorderColor='e0e0e0' lineColor='33373e' showShadow='1' shadowColor='bdbdbd' anchorBgColor='f1cc2b' caption='Your advertisement clicks' showLabels='0' numVDivLines='8' hoverCapBgColor='f7df39' decimalPrecision='4' formatNumberScale='0' showValues='0' divLineAlpha='20' alternateHGridAlpha='6'>{$myclicks}</chart>");
  12. chart.render("chartdiv1");
  13. </script>[color=#ff2600].evalScripts();[/color]
  14. </div>
  15. </div>



Alors ce que ça me fait c'est rajouter .evalScripts(); apres mes charts comme un simple texte. En passant apr un chargement normal de la pgae les charts fonctionnent mais pas lorsque l'on passe par la navigation ajax.

Je pense que j'ai mal codé ça.
m
0
l
19 Juin 2010 22:17:24

Enleve les evalscript que tu as placé et essaye de remplacer ton code de chargement ajax par celui la :

  1. $(document).ready(function(){
  2. $("#menu a").click(function(){
  3. page=($(this).attr("href"));
  4. $("#dynamic").fadeTo('normal',0.2).load(page+" #ajax", function(){$("#ajax script").each(function(ind,obj){eval($(obj).text());});return false;}).fadeTo('slow',1);
  5. $("#menu a").removeClass("current");
  6. $(this).addClass("current");
  7. return false;
  8. });
  9. });
m
0
l
19 Juin 2010 23:45:36

Ca fait la meme chose Seb.
Ne fonctionne pas avec la nav AJAX.

Par contre il y a "#ajax script" dans ton code. Je n'ai pas de div avec ce nom.
Je ne sais pas si ça correspo,d à cela mais on ne sait jamais.

Merci en tout cas Seb de te pencher sur mon probleme. J'espere que tu va trouver.

Merci encore !

m
0
l
20 Juin 2010 00:39:58

Dans ton navigation.js tu as 2 fois le code :

  1. $(document).ready(function(){
  2. $("#menu a" ).click(function(){
  3. page=($(this).attr("href" ));
  4. $("#dynamic" ).fadeTo('normal',0.2).load(page+" #ajax", function(){$("#ajax script" ).each(function(ind,obj){eval($(obj).text());});return false;}).fadeTo('slow',1);
  5. $("#menu a" ).removeClass("current" );
  6. $(this).addClass("current" );
  7. return false;
  8. });
  9. });
  10.  
  11. $(document).ready(function(){
  12. $("#member a").click(function(){
  13. page=($(this).attr("href"));
  14. $("#dynamic").fadeTo('normal',0.2).load(page+" #ajax").fadeTo('slow',1);
  15. return false;
  16. });
  17. });


Le 1er n'est pas pris en compte vu que le 2eme le remplace
Met le 2eme en commentaire
m
0
l
20 Juin 2010 06:59:41

En faite le premier a pour source un click sur la barre du menu. (La div #menu a)

La deuxieme a pour source le menu gauche lorsque l'on est logué (la div #member a).

Si je la mets en commentaire, ça la retire et ça fonctionne mais ça n'utilise plus ajax du coup.
m
0
l
20 Juin 2010 14:23:43

ah oui.

Modifie aussi le 2eme de la même façon. C'est sur le menu de gauche que je fesais mes tests

  1. $(document).ready(function(){
  2. $("#member a" ).click(function(){
  3. page=($(this).attr("href" ));
  4. $("#dynamic" ).fadeTo('normal',0.2).load(page+" #ajax", function(){$("#ajax script" ).each(function(ind,obj){eval($(obj).text());});return false;}).fadeTo('slow',1);
  5. return false;
  6. });
  7. });
m
0
l
20 Juin 2010 19:52:38

je viens d'essayer et ça fait la meme chose. Tu as testé et ça fonctionne chez toi ?
Il doit y avoir autre chose que j'ai d'erroné.
m
0
l
24 Juin 2010 22:58:40

Je l'ai vu cette partie en faite mais je ne comprends pas ou je dois mettre ça ?

  1. var lafonction = XMLHttpRequest.responseText;
  2. var lescript = document.createElement('script');
  3. lescript.type='text/javascript';
  4. lescript.appendChild(document.createTextNode(lafonction));
  5. document.getElementsByTagName('head')[0].appendChild(lescript);


C'est du js donc il faut mettre ça dans un fichier .js chargé en page de base ?
m
0
l
a c 232 L Programmation
25 Juin 2010 01:07:02

Faut juste savoir que les lignes 2 à 5 permettent de créer un élément <script> avec le contenu de la réponse XMLHttpRequest.
Toi tu vas remplacer XMLHttpRequest.responseText par le contenu de ton appel script.
Je suppose que tu vas devoir faire une expression régulière afin de matcher ton <script> à l'intérieur de la réponse XML.

Et ça sera à exécuter juste après ton appel asynchrone.
m
0
l
Tom's guide dans le monde
  • Allemagne
  • Italie
  • Irlande
  • Royaume Uni
  • Etats Unis
Suivre Tom's Guide
Inscrivez-vous à la Newsletter
  • ajouter à twitter
  • ajouter à facebook
  • ajouter un flux RSS