Avatar billede a330 Nybegynder
20. februar 2012 - 11:35 Der er 15 kommentarer og
1 løsning

Executing embedded JavaScript efter innerHTML

Hej kan ikke få Executing embedded JavaScript efter mit call, hvordan gør jeg lige det??
min kode:
  <script type="text/javascript">
function fetchData(str)
{
if (str=="")
  {
  document.getElementById("datacontainer").innerHTML="";
  return;
  }
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("datacontainer").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","data-fetchdata.php?dato="+str,true);
xmlhttp.send();
}
</script>

Scriptet som skal køres på den side jeg henter:
<div  id="gaugeDiv"></div>
                  <script type="text/javascript">
                    into the div
                    var gauge = bindows.loadGaugeIntoDiv("gauge.xml", "gaugeDiv");
                    var t = 0;
                    var interval = 100;
                function updateGauge() {
                    t += interval;
                    var value =50;
                    gauge.needle.setValue(value);
                    gauge.label.setText(Math.round(value));
                }
                setInterval(updateGauge, interval);
               
           
  </script>';
Avatar billede olebole Juniormester
20. februar 2012 - 16:25 #1
<ole>

Det kan du ikke. JavaScript importerer du sådan:

var oScr = document.createElement("script");
oScr.setAttribute("type", "text/javascript");
oScr.setAttribute("src", "minFil.js");
document.getElementsByTagName("head")[0].appendChild(oScr);

Derudover bør du undgå at bruge innerHTML med mindre, du er seriøst stærk i scripting. Det kan i modsat fald have ganske alvorlige, uforudsete bivirkninger.

At hente data, som er HTML-formateret har i øvrigt intet med Ajax at gøre - selvom mange misvisende tutorials gør det. De pågældende tutorials er skrevet af folk, som aldrig selv har lært/forstået teknikken

/mvh
</bole>
Avatar billede a330 Nybegynder
21. februar 2012 - 11:33 #2
Ok det var trist..

Det jeg forsøger at opnå er, hvis man vælger en dato henter man den efterfølgende data i mysql som er tilknyttet den dato, og viser den på en graf med javascript....?

Det skal siges at min kendskab til javascript er lig nul!

Har lavet mit kald om til:
<script type="text/javascript">
    function fetchdata(datoen) {
            $.ajax({
            url: "test-data.php",
            context: document.body,
              data: "dato="+ datoen,
            success: function(responseText) {
                $("#response-div").html(responseText);
                $("#response-div").find("script").each(function(i) {
                    eval($(this).text());
                });
            }
        });
    };
</script>
Avatar billede olebole Juniormester
21. februar 2012 - 11:49 #3
Det er altid en rigtig skidt fremgangsmåde at HTML-formatere data på serveren, når der bruges Ajax - og det strider direkte mod hele idéen bag Ajax. I stedet XML- eller JSON-formaterer man data, før de sendes tilbage til klienten.

Da man begyndte at bruge Ajax, brugte stortset alle JSON-løsninger funktionen eval. Det er alle libraries heldigvis gået bort fra, da eval generelt er en kæmpe foræring til folk, der ønsker kompromitere sikkerheden.

Hvis du spørger mig (eller enhver anden seriøs JS'er), er der derfor på alle måder tale om en dårlig løsning.

Sæt dig ind i XML eller JSON og brug det til at formatere data med på serveren. Derefter kan du parse responsen og oprette og indsætte elementer med DOM. Det kan du også bruge jQuery til.

Til scriptet bør du bruge den fremgangsmåde, jeg viste ovenfor. Under alle omstændigheder bør du smide eval meget langt væk!

Du slipper dog under ingen omstændigheder udenom at sætte dig grundigt ind i JavaScript  =)
Avatar billede a330 Nybegynder
22. februar 2012 - 16:15 #4
Ok tak for svaret.

Lad os sige jeg gør det  enten med XML eller json, vil jeg kunne opnå det jeg vil, altså at parse hele min dynamiske php fil med javascript i og derefter får det afviklet med et Ajax call?
Avatar billede olebole Juniormester
22. februar 2012 - 16:38 #5
Nej. Script hentes på den måde, jeg viser i #1. Med Ajax henter du rå data med - og HTML-formaterer dem på klienten.

Du kan sagtens udskrive en dynamisk JS-fil på serveren. Prøv at skrive denne kode i en fil, du kalder test.php:

<?php
header('Content-Type: text/javascript; charset=utf-8');

$time = date('d.m-Y H:i:s');
$js_text = 'Dette er en tekst, som er skrevet '.$time;

echo <<<JS_END

var sometext = "$js_text";
alert(sometext);

JS_END;
?>

- og denne i en fil, du kalder test.html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
#jsImport {
    cursor: pointer;
}
#jsImport:hover {
    color: #c00;
    text-decoration: underline;
}
</style>
<script type="text/javascript">
function importJS() {
    var oScr = document.createElement("script");
    oScr.setAttribute("type", "text/javascript");
    oScr.setAttribute("src", "test.php");
    document.getElementsByTagName("head")[0].appendChild(oScr);
}
</script>
</head>
<body>

<p>
    <span id="jsImport" onclick="importJS()">Klik her og importer JavaScript</span>
</p>

</body>
</html>

Det fungerer helt fint
Avatar billede a330 Nybegynder
22. februar 2012 - 17:18 #6
Det virker, men burde jeg ikke kunne dette her også?

document.write('<strong>Hello World</strong>');
Avatar billede olebole Juniormester
22. februar 2012 - 17:33 #7
Nej, document.write overskriver hele dokumentet, når metoden kaldes, efter dokumentet er loaded. Den er totalt ubrugelig - med ganske få undtagelser
Avatar billede olsensweb.dk Ekspert
22. februar 2012 - 19:25 #8
@a330 faldt lige over dette lib , og ville lige lege lidt, med det har desværre den ulempe det kræver HTML5 (canvas), men det bliver jo en del af standarten i år.

du kan jo for html compabilitet i IE mindre end IE 9 bruge http://code.google.com/p/html5shiv/ eller http://remysharp.com/2009/01/07/html5-enabling-script/ (det er det sammen script) selv bruger de excanvas.original.js

jeg har lavet en demo, hvor jeg henter nogle data fra serveren fra pågældende år og retunerer mine rå data JSON indcodet, decoder dem client side og ligge det ud hvor jeg skal bruge det.

demo: http://experten.olsensweb.dk/957790/
source: http://experten.olsensweb.dk/957790/graph.zip
nb: alle de externe js filer ligger i den pakke man downloader fra http://www.rgraph.net
licens info: RGraph is free to use on non-commercial websites such as personal blogs, educational, charity or government websites - you don't need to buy a license

ellers må du vende tilbage med hvilke js graph lib du anvender, hvordan ser dine data ud
Avatar billede olebole Juniormester
22. februar 2012 - 19:57 #9
@ronols: Umiddelbart virker det, som om spørger bruger Bindows, og så kan det godt blive problematisk at i blande den slags kode.

Da Bindows i høj grad bygger på XML giver document.write i øvrigt slet ikke mening, da den metode ikke bør kunne bruges under XML - eller XHTML flavors
Avatar billede olsensweb.dk Ekspert
22. februar 2012 - 20:41 #10
bindows!! aldrig hørt om det AJAX Framework (men der er selvføgelig en hel del jeg ikke har hørt om), jeg troede faktisk det var en fejl da spørgeren skrev det i #0
men det er vist ikke så udbredt hvis man søger på google 430.000 svar til sammenligning jquery 106.000.000 svar, så hvis spørgeren ikke skriver i ren js, bør spørgeren nok satse på jquery,
til data overførsels format vil jeg anbefale JSON, da det er ca 8% mindre end tilsvarende XML
Avatar billede olebole Juniormester
22. februar 2012 - 21:24 #11
Bindows er egentlig ikke født som et Ajax framework. Det er fra før, Ajax teknikken blev formuleret. Oprindelig var det et forsøg på at lave et Windows lignende GUI SDK for business applikationer.

SDK'et (frameworket) er skrevet af et par af de helt store JS-legender, Emil Eklund og primært Erik Arvidsson. Det er en viderudvikling af det ligeså legendariske WebFX projekt, som var en samling af det, vi idag ville kalde widgets - tree view, grid view, date picker, tab pane, slider, menu, etc.

Det er vanskeligt for ikke at sige umuligt at forestille sig moderne widgets til webbrug uden pionerarbejdet med WebFX og Bindows. At der så er andre libraries - herunder jQuery - der har overhalet de to indenom, siger ikke meget om alle disse libraries kvalitet. Der bliver jo også spist langt flere lørdagskyllinger og fiskepinde, end der bliver spist kronkalvemedaljoner med morkelsauce  =)
Avatar billede olebole Juniormester
22. februar 2012 - 21:29 #12
En anden og meget væsentlig forskel på Bindows og f.eks. jQuery er, at Bindows aldrig (fejlagtigt) har være opreklameret som et framework, der gjorde, at man ikke behøvede et grundigt kendskab til de bagvedliggende teknologier og teknikker. Formodentlig er det også her, man skal lede, hvis man vil finde årsagen til jQuery's enorme popularitet
Avatar billede a330 Nybegynder
23. februar 2012 - 09:27 #13
@ronols

Det ser meget interessant ud, jeg leger lidt med det, om kommer tilbage om en dag eller to!
Avatar billede olsensweb.dk Ekspert
24. februar 2012 - 10:55 #14
@a330 her er en til du kan lege med, jeg skulle også lige prøve highcharts det har jo den "ulempe" at det kræver jquery, men som du skrev i http://www.eksperten.dk/spm/956328 #6 vil du baserer det på highcharts

demo  http://experten.olsensweb.dk/957790/Highcharts/
source http://experten.olsensweb.dk/957790/Highcharts/Highcharts.zip
nb de 2 externe js filer er taget fra Highcharts pakken
Avatar billede a330 Nybegynder
24. februar 2012 - 19:15 #15
@ronols

Det var lige hvad jeg havde brug for, virker perfekt. Samtidig har det også løst et andet problem jeg havde med Highcharts. Så du har sparet mig for mange timers arbejde!!

Læg et svar!

@olebole
Tak for alle indput, må nok tager mig sammen til at lære lidt mere javascript ;-))
Avatar billede olsensweb.dk Ekspert
24. februar 2012 - 22:01 #16
du får et svar her
det meste af den er lavet ud fra Highcharts-2.2.0.zip examples\bar-basic, og så en lille smugle AJAX på, din næste udfordring er at lave arrayet serverside, det skal jo generares ud fra data der kommer fra en db går jeg ud fra.

nb jeg har lavet lidt små ændringer i http://experten.olsensweb.dk/957790/Highcharts/

i function Graph(msg){

series: [{
        name: aTmp[0]['name'], // 'Year 1800',
        data: aTmp[0]['data'],  //[107, 31, 635, 203, 2]
    }, {
        name: aTmp[1]['name'], //'Year 1900',
        data: aTmp[1]['data'], //[133, 156, 947, 408, 6]
    }, {
        name: aTmp[2]['name'], //'Year 2008',
        data: aTmp[2]['data'], //[973, 914, 4054, 732, 34]
}]


lavet om til
series: aTmp
for at værer uafhæning af antal dataset

og
if(lng>1){

lavet om til
if(lng>0){
da jeg gerne ville kunne nøjes med kun 1 datasæt
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester