Javascript via Ajax

Comment puis-je démarrer javascript via ajax?Javascript via Ajax

fichier html

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title>FusionCharts 3.0 Dashboard</title> 
<script language="JavaScript" src="../FusionCharts.js"></script> 
<script language="JavaScript" src="../PowerMap.js"></script> 
<script type="text/javascript"> 
function loadXMLDoc() 
{ 
    if (window.XMLHttpRequest) 
    { 
     xmlhttp=new XMLHttpRequest(); 
    } 
    else 
    { 
     xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
    xmlhttp.onreadystatechange=function() 
    { 
     if (xmlhttp.readyState==4 && xmlhttp.status==200) 
     { 
      document.getElementById("ajax").innerHTML=xmlhttp.responseText; 
     } 
    } 
    xmlhttp.open("POST","test.php",true); 
    xmlhttp.send(); 
} 
</script> 
</head> 
<body> 
<div id="chart3" align="center"></div><br /> 
<div id="ajax"></div> 
<input type="button" onclick="loadXMLDoc()" value="test" />  
</body> 
</html>

fichier php

<? 
$html = '<script type="text/javascript"> 
window.onload = function start() { 
    onClick(); 
} 

function onClick() { 
var myChart = new FusionCharts("../Charts/HLinearGauge.swf", "chart3", "580", "80", "0", "0"); 
myChart.setDataXML("<chart bgColor=\'FBFBFB\' bgAlpha=\'100\' showBorder=\'0\' chartTopMargin=\'0\' chartBottomMargin=\'0\'\n\ 
upperLimit=\'30\' lowerLimit=\'0\' ticksBelowGauge=\'1\' tickMarkDistance=\'3\' valuePadding=\'-2\' pointerRadius=\'5\'\n\ 
majorTMColor=\'000000\' majorTMNumber=\'3\' minorTMNumber=\'4\' minorTMHeight=\'4\' majorTMHeight=\'8\' showShadow=\'0\'\n\ 
pointerBgColor=\'FFFFFF\' pointerBorderColor=\'000000\' gaugeBorderThickness=\'3\'\n\  baseFontColor=\'000000\'\n\ 
gaugeFillMix=\'{color},{FFFFFF}\' gaugeFillRatio=\'50,50\'>\n\ 
<colorRange>\n\ 
    <color minValue=\'0\' maxValue=\'5\' code=\'FF654F\' label=\'z\'/>\n\ 
    <color minValue=\'5\' maxValue=\'15\' code=\'F6BD0F\' label=\'x\'/>\n\ 
</colorRange>\n\ 
</chart>"); 
myChart.render("chart3"); 
} 
</script> '; 

echo $html; 

?>

Source

2010-07-21 Jasem

Pourriez-vous nous donner plus de détails sur exactement ce que vous essayez d'accomplir et quels sont les problèmes que vous utilisez dans? – webbiedave

J'essaie de charger le widget de fusion chaque fois que je clique sur le bouton de test et javascript doit être dans un autre fichier – Jasem

En utilisant les frameworks JavaScript rendre les choses vraiment facile. Par exemple, si vous utilisez jQuery, vous pouvez faire ce que vous voulez de cette façon:

$.getScript("test.php");

Il vous donne quelques avantages ... par exemple, vous ne serez pas à vous soucier des problèmes de fuites de mémoire dans IE. Il fonctionnera sur la plupart des navigateurs Web et rendra votre code plus facile à lire.

Source

2010-07-21 21:07:58 Cristian

Vous devez probablement appeler la fonction souhaitée, c'est-à-dire onClick, manuellement après avoir défini innerHTML.

Source

2010-07-21 21:10:34

Pour commencer, vous définissez un événement window.onload Une fois la page chargée - au moment où l'utilisateur clique sur le bouton, cet événement aura été tiré depuis longtemps

Si vous utilisez jQuery , remplacez window.onload = function start() par $(document).ready(function(), puis ajoutez un ");" à la fin de la fonction.

Pour Prototype, utilisez document.observe("dom:loaded", function()

Bien qu'il serait probablement plus logique d'appeler simplement la fonction, ou même simplement supprimer la fonction et exécuter les instructions directement

Quant à la JS ne pas exécuter - I J'ai déjà connu ce problème, c'est parce que innerHTML n'exécute aucun JS inséré. Si vous utilisez jQuery, essayez $('ajax').append(xmlhttp.responseText) ou Element.insert($('ajax'), xmlhttp.responseText) pour Prototype. Malgré le fait que vous ayez implémenté vous-même l'appel AJAX, vous n'utilisez probablement aucune bibliothèque. Dans ce cas, il serait plus facile de rendre votre fichier PHP juste le JS sans les balises, alors juste eval(xmlhttp.responseText)

Si vous ne voulez pas faire cela, alors vous devrez faire une boucle sur tous les fichiers. tags de script dans la réponse X (HT) ML et eval leur contenu «manuellement»

Source

2010-07-23 23:10:08

Tout ce javascript que vous avez dans le fichier PHP, vous devez le mettre dans le fichier html. Eh bien, c'est comme ça que je le ferais au moins. Sinon, vous devrez utiliser la fonction live() de jQuery pour appeler les fonctions javascript que vous avez dans le fichier PHP.

Par exemple, votre balise de script dans le fichier HTML doit ressembler à ceci

<script type="text/javascript"> 
function Function4PHPHTML() { 
var myChart = new FusionCharts("../Charts/HLinearGauge.swf", "chart3", "580", "80", "0", "0"); 
myChart.setDataXML("<chart bgColor='FBFBFB' bgAlpha='100' showBorder='0' chartTopMargin='0' chartBottomMargin='0'\n 
upperLimit='30' lowerLimit='0' ticksBelowGauge='1' tickMarkDistance='3' valuePadding='-2' pointerRadius='5'\n 
majorTMColor='000000' majorTMNumber='3' minorTMNumber='4' minorTMHeight='4' majorTMHeight='8' showShadow='0'\n 
pointerBgColor='FFFFFF' pointerBorderColor='000000' gaugeBorderThickness='3'\n baseFontColor='000000'\n 
gaugeFillMix='{color},{FFFFFF}' gaugeFillRatio='50,50'>\n 
<colorRange>\n 
    <color minValue='0' maxValue='5' code='FF654F' label='z'/>\n 
    <color minValue='5' maxValue='15' code='F6BD0F' label='x'/>\n 
</colorRange>\n 
</chart>"); 
myChart.render("chart3"); 
} 
function loadXMLDoc() 
{ 
    if (window.XMLHttpRequest) 
    { 
     xmlhttp=new XMLHttpRequest(); 
    } 
    else 
    { 
     xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
    xmlhttp.onreadystatechange=function() 
    { 
     if (xmlhttp.readyState==4 && xmlhttp.status==200) 
     { 
      document.getElementById("ajax").innerHTML=xmlhttp.responseText; 
     } 
    } 
    xmlhttp.open("POST","test.php",true); 
    xmlhttp.send(); 
} 
</script>

, et vous avez l'AJAX, récupérer uniquement HTML à partir de ce fichier PHP .. Donc après avoir cliqué sur ce DIV et peuplez peu importe, vous avez déjà le Javascript existant prêt pour le nouveau html.

Source

2010-07-25 01:28:34 dockeryZ

-1

Essayez d'utiliser jquery.live()

Source

2010-07-25 04:53:32

La seule façon de le faire est par, à travers une manière ou d'une autre, eval() le script ing vous chargez via AJAX, dans l'appel AJAX.Les scripts ne sont normalement évalués que s'ils sont présents sur pageload, et le nouveau contenu chargé via le DOM/AJAX n'est pas évalué pour les scripts (d'une part, onload() a été lancé il y a longtemps) donc vous devez appeler manuellement . scripts vous AJAXing dans

Comme il a été mentionné ci-dessus, les cadres font plus facile - le evalScripts flag in Prototype, ou tout simplement le evalScripts function, sont vraiment bien pour cela dans mon expérience, et jQuery ou de live()getScript sont également une option.

Si vous n'utilisez pas un framework, vous devrez le faire manuellement en appelant le eval() sur le script que vous essayez de charger via AJAX. Donc, votre code ressemblerait à quelque chose comme ceci:

xmlhttp.onreadystatechange=function() 
{ 
    if (xmlhttp.readyState==4 && xmlhttp.status==200) 
    { 
     document.getElementById("ajax").innerHTML=xmlhttp.responseText; 
     eval(xmlhttp.responseText); 

    } 
}

Vous pouvez même pas besoin de régler le innerHTML si le Javascript est tout ce que vous utilisez pour. Un avertissement: en utilisant eval() devrait en principe vous méfier en raison de la possibilité d'attaques par injection. Les cadres ci-dessus effectuent des contrôles d'assainissement et de sécurité pour exécuter les scripts de manière plus sûre, mais c'est toujours une proposition risquée. Si vous le pouvez, vous devriez envisager de réécrire votre code pour que AJAX renvoie JSON ou une autre structure de données, et déplacez le javascript actuel dans la fonction de réception (où j'ai inséré le eval() ci-dessus) pour éviter de tels risques. Dans votre code, selon pourquoi vous devez avoir le Javascript dans l'autre fichier, vous pourriez probablement facilement passer les paramètres que vous générez le script dans un tableau JSON, et appelez le new FusionCharts() et mychart.render() dans votre appel AJAX. Cela ressemblerait à quelque chose comme ceci:

xmlhttp.onreadystatechange=function() 
{ 
    if (xmlhttp.readyState==4 && xmlhttp.status==200) 
    { 
     document.getElementById("ajax").innerHTML=xmlhttp.responseText; 
     cd = JSON.parse(xmlhttp.responseText); 
     var myChart = new FusionCharts(cd.chartPath, cd.chartID, cd.chartWidth, cd.chartHeight, 0, 0); 
     myChart.setDataXML(cd.dataXML); 
     myChart.render(cd.chartID); 
    } 
}

Avec votre AJAX retourné être:

{ 
    chartPath: "../Charts/HLinearGauge.swf", 
    chartID: "chart3", 
    chartWidth: "580", 
    chartHeight: "80", 
    dataXML: "<chart bgColor=\'FBFBFB\' bgAlpha=\'100\' showBorder=\'0\' chartTopMargin=\'0\' chartBottomMargin=\'0\'\n\ upperLimit=\'30\' lowerLimit=\'0\' ticksBelowGauge=\'1\' tickMarkDistance=\'3\' valuePadding=\'-2\' pointerRadius=\'5\'\n\ majorTMColor=\'000000\' majorTMNumber=\'3\' minorTMNumber=\'4\' minorTMHeight=\'4\' majorTMHeight=\'8\' showShadow=\'0\'\n\ pointerBgColor=\'FFFFFF\' pointerBorderColor=\'000000\' gaugeBorderThickness=\'3\'\n\  baseFontColor=\'000000\'\n\ gaugeFillMix=\'{color},{FFFFFF}\' gaugeFillRatio=\'50,50\'>\n\ <colorRange>\n\  <color minValue=\'0\' maxValue=\'5\' code=\'FF654F\' label=\'z\'/>\n\  <color minValue=\'5\' maxValue=\'15\' code=\'F6BD0F\' label=\'x\'/>\n\ </colorRange>\n\ </chart>" 
}

Source

2010-07-26 20:02:18 cincodenada

Javascript via Ajax

Répondre

Questions connexes