Javascript se ne izvede

8 naročnikov

Uporabljam klasičen način Ajaxa, po vnosu podatkov kličem JS funkcijo, katera pokliče PHP program. Ta generira HTML, ter vrne na ustrezen <DIV ID=xx></DIV>.

Med to vrnjeno HTML kodo je tudi JS, konkretno koda za Google Chart. Problem je, da se ta koda ne izvede, torej da se graf ne nariše. Tudi če je samo alert(??); se ne izvede. Če to kodo shranim v HTML datoteko in poženem, se JS izvede (sintaksa je torej pravilna).

Prosim za kak nasvet.

Očitno sem se prezgodaj veselil, da vidim luč na koncu tunela. Dejstvo je, da imam graf (kodo) že sedaj na osnovni strani… Glede na prejšnje ugotovitve, sem postavil sleep(1000) pred klicanje drawChart(). Funkcija sleep ustavi vso izvajanje, tudi funkcije, ki so bile klicane pred tem (izračun in klicanje PHP z vrnitvijo podatkov). Prestavil sem sleep v funkcijo drawChart, enako vse stoji in se po premoru izvede v istem vrstnem redu: torej graf pred podatki s strežnika. Kakšen nasvet prosim.

function sleep(milliseconds) {
var start = new Date().getTime();
for (var i = 0; i < 1e7; i++) {
if ((new Date().getTime() - start) > milliseconds){
break;
}
}
}

Zakaj enostavno tam kjer nastavis $("div").html(serverResponse); za temle ne kličeš še funkcije drawChart(); ... Verjetno nekje ko prepišeš html, ki si ga dobil od strežnika tudi pushneš not v div.. Če to nardiš samo še enkrat kliči draw funkcijo..

Jaz mislim da si se zadeve lotil z napačnim pristopom.
Kako bi jaz naredil:
1. Komplet ta spodnji DIV bi skril pri prvem loadu, bi pa hkrati že pripravil tabelo in vsa ta polja, prav tako div za graf itd
2. na ajax success bi potem iz prejetega JSON napolnil polja v tej tabeli preko jQuery
3. Poklical chart api s prejetimi podatki, da se izriše graf
4. prikazal spodnji div

Če tega ne moreš narediti, poizkusi mogoče z dinamičnim insertanjem iframe-a v spodnji div (npr da ima div id=graphdiv, v str je pa URL do strani, ki renderira to spodnjo tabelo):
$("#graphdiv").html("<iframe src='"+str+"'></iframe>");

@wingback
Če želim imeti graf(e) med podatki, ki pridejo s strežnika, mora z njimi priti tudi ustrezni DIV… Poskusil sem z dva klica funkcije za graf, rezultat kot da bi klical enkrat. Kopiral sem funkcijo pod drugim imenom in klical eno za drugo – podobno, kot da kličem samo eno. Ko dam sleep v prvo – kot da se izvede samo prva (samo en premor), dam sleep samo v drugo – kot da se izvede samo druga, ko dam sleep v obe – kot da se izvede samo ena…

Sem šel dejansko kodo pogledat zdej :) Če prav vem je pri XMLHttpRequest "onload", ko se dejansko konča klic. Jaz bi na tvojem mestu namesto onreadystatechange al kaj je že, dal onload in v delu funkcije kjer je document.getElementById("txtHint1").innerHTML=xmlhttp.responseText;
dodal še drawChart().

Hope will help. :)

@wingback

DELA!

Sicer ne vem zakaj... kar me ni še povsem osrečilo. Na strani bo 7+1 (7 enakih in en skupni) graf. Mislim da bo šlo tako, da bo PHP formiral podatke z ustreznimi DIV-i, ter JSON datoteke z podatki za vsak graf. Vsak graf bo imel svojo funkcijo, ki bo klicala svoj PHP, ki bo samo prebral podatke z formiranih datotek, nato narisala graf.

Hvala vsem, če zašteka, bom pa spet...

Malo off topic. Ni mi jasno ko pravite da se javascript, ki ga vrne response, ne izvaja. Imam kodo, ki preko ajax klica prikaže primeren popup. Vsak popup ima svojo kodo in ta koda vsebuje tudi javascript. Do sedaj se mi je ta koda vedno izvajala. V čemu je razlika, da meni dela?

jQuery.ajax({
  type: "POST",
  url: urlAction,
  data:"",
  success: function(response){
    jQuery("body").append(response);
  }
});

Se opravičujem za pozen odgovor.

@ernest1a hvala za tvojo izkušnjo. Če bi mi uspelo to uporabit, bi mi večkrat prišlo prav.

Stran sedaj deluje (po ukrepih, ki jih je predlagal @wingback) in je tudi na spletu. So težave z IE, ki izvaja input onchange="Func()" type="range" drugače kot drugi (Croma, FF in Opera). Ko vlečemo drsnik se ob vsaki spremembi kliče funkcijo, ne šele, ko drsnik spustimo. Zato pogosto zašteka. Razmišljam o zmanjšanju števila grafov… Če se malo pošalim, zdaj pri IE deluje celo preveč.

Pošiljam PHP skripto. Če jo shraniš na strežnik in pokličeš LOCALHOST/skripta.php , boš dobil graf.
Poskusi to izvesti z Ajax-em.

<?php
echo '<script type="text/javascript" src="https://www.google.com/jsapi"></script>'.chr(13).chr(10);
echo " <script type='text/javascript'>".chr(13).chr(10);
echo " google.load('visualization', '1', {packages:['corechart']});".chr(13).chr(10);
echo " google.setOnLoadCallback(drawChart);".chr(13).chr(10);
echo " function drawChart() {".chr(13).chr(10);
echo " var data = google.visualization.arrayToDataTable([".chr(13).chr(10);
echo " ['Annuity (Month)', 'Interest', { role: 'style' } ],".chr(13).chr(10);
echo "['Monthly',121674.8,'#5D8BB7'],";
echo "['Acc Monthly',102198.24,'#721846'],";
echo "['Semi-monthly',121427.22,'#8CB85E'],";
echo " ['Bi-weekly',120653.72,'#A75EB8'],";
echo "['Acc Bi-weekly',101389.01,'#B8A75E'],";
echo "['Weekly',120541.06,'#5EB8A7'],";
echo "['Acc Weekly',101283.82,'#0D3B67']";
echo " ]);".chr(13).chr(10);
echo "".chr(13).chr(10);
echo " var options = {".chr(13).chr(10);
echo " title: 'Karkoli',".chr(13).chr(10);
echo " bar: { groupWidth: '100%' },".chr(13).chr(10);
echo " legend: { position: 'none' }".chr(13).chr(10);
echo " };".chr(13).chr(10);
echo "".chr(13).chr(10);
echo " var chart = new google.visualization.BarChart(document.getElementById('alldiv'));".chr(13).chr(10);
echo "".chr(13).chr(10);
echo " chart.draw(data, options);".chr(13).chr(10);
echo " }".chr(13).chr(10);
echo " </script>".chr(13).chr(10);
echo "".chr(13).chr(10);
echo " <div id='alldiv' style='width: 100%; height: 300px;'></div>".chr(13).chr(10);
?>

Tole je malce zgrešen pristop: ne generiraj celotne kode na strežniku, da bi jo potem izvajal clientside. Serverside zgeneriraj samo array podatkov, ki jih potem naložiš v tole knjižnico.

Primer: http://www.encodedna.com/google-chart/load-google-chart-with-dynamic-data-using-jquery-ajax.htm

Sicer je serverside napisan v C#, ampak poanta je ista.