Avatar billede dramsgaard Nybegynder
06. marts 2011 - 21:20 Der er 17 kommentarer og
1 løsning

Ajax og JavaScript fejl

Jeg har et JS script som virker fint indtil jeg skal bruge det på data jeg har hentet med AJAX - så får jeg fejl.
Fejl: 'null' er null eller ikke et objekt.

i linjerne:
if (m !="") {text.className = "cal_post";}
og
if (m !="") {text.className = "cal_post_Active";}

Jeg kan se, at 'className' bliver Null på de data der er hentet gennem AJAX, men ved ikke hvorfor - er der nogen der har et bud på en løsning??

function toggle(n,m,tekst) {
    var ele = document.getElementById(n);
    var text = document.getElementById(m);
    if(ele.style.display == "block") {
      if (document.FormCalendar.Submit.value == "Opdater"){
         
        document.FormCalendar.Overskrift.value = "";
        document.FormCalendar.tidspunkt.value = "";
        document.FormCalendar.dato.value = "";
        CKEDITOR.instances['Beskrivelse'].setData("");
        document.FormCalendar.cal_type.value = 2;
        document.FormCalendar.action="update.asp?method=Add";
        document.FormCalendar.Submit.value = "Opret";
          document.getElementById("cal_title").innerHTML ="Opret begivenhed<br /><br />";
      }
      else{
            ele.style.display = "none";
            if (m !="") {text.className = "cal_post";}
            }
        //text.innerHTML = "Vis "+tekst;
      }
    else {
        ele.style.display = "block";
        if (m !="") {text.className = "cal_post_Active";}
        //text.innerHTML = "Skjul "+tekst;
    }
}
Avatar billede erikjacobsen Ekspert
06. marts 2011 - 23:28 #1
Har du et element med id som i m-variablen?
Avatar billede dramsgaard Nybegynder
07. marts 2011 - 09:32 #2
ja, flg kode kalder funktionen og modtager output. Flg bliver samtidig også hentet gennem AJAX, og det er kun når jeg henter det gennem Ajax jeg får fejlen.

<div id="cal_post_56" class="cal_post" onclick="java script:toggle('toggleText56','cal_post_56','');" onMouseOver="java script:bg_color(this.id,'hover');" onMouseOut="java script:bg_color(this.id,'out');">
  <div style="width:130px; float:left;">
    <span id="cal_dato56">07-06-2011</span> <span id="cal_tid56"></span>
    <img src="pic/grafik/calendar_red.gif" width="15" height="9" style="padding-left:36px;" alt="Vinmøde" title="Vinmøde" />
    <input type="hidden" name="calTypeID" id="calTypeID" value="2" />
  </div>
  <div style="display:block; padding-left:130px;" id="cal_post_tekst_56">test2
  </div>
</div>

<div id="toggleText56" style="display:none;">
    <div class="calendar_box_inner"><span id="cal_besk56">Ingen beskrivelse!</span><div align="right" style="padding-top:5px;"> (Oprettet 06-03-2011 13:36:23 af ukendt)<br />[<a href="java script:void(0);" onClick="java script:updateCalendar('56');">Rediger</a> | <a href="update.asp?method=Delete&id=56" onclick="return confirm('Bekræft sletning af denne post. Du kan ikke fortryde!')">Slet</a>]</div>
    </div>
    <div style="background-image:url('pic/grafik/btn_cal.gif'); z-index:100; height:10px; background-repeat:no-repeat;margin-bottom:10px;">&nbsp;</div>
</div>
Avatar billede olebole Juniormester
07. marts 2011 - 14:28 #3
<ole>

- og hvad er værdien af variablen m? Prøv:

    function toggle(n,m,tekst) { alert(m)


/mvh
</bole>
Avatar billede olebole Juniormester
07. marts 2011 - 14:30 #4
- og prøv også at alert'e n ... jeg kunne forestille mig, at en af de strenge måske ikke indeholder, hvad du tror(?)
Avatar billede dramsgaard Nybegynder
07. marts 2011 - 21:40 #5
Værdierne er nøjagtig de samme hvad enten det er noget kode der er hentet gennem ajax som kalder funktionen eller om det er noget kode som er på siden on load.

n = toggleText56
m = cal_post_56
Avatar billede dramsgaard Nybegynder
07. marts 2011 - 21:46 #6
laver jeg tilgengæld flg: alert(text) giver det flg:

Før ajax:
[object HTMLDivElement]

Efter Ajax:
null
Avatar billede olebole Juniormester
07. marts 2011 - 21:55 #7
Ja, du bruger jo innerHTML - og så kommer man let til at overskrive referencer m.m.

Bruger man Ajax, formateres data som JSON eller XML på serveren. Når de ankommer til browseren, formateres data og indsættes med DOM i dokumentet. Det er således nok ikke Ajax, du bruger, men noget fra en af de mange turotial forfattere, der ikke selv har forstået hat af, hvad Ajax er  ;o)

Vil du bruge Ajax, bør du sætte dig rigtig grundigt ind i JavaScript, DOM, CSS (og evt. XML) - samt et serversprog
Avatar billede olebole Juniormester
07. marts 2011 - 22:05 #8
Du kan prøve dette eksempel og se, hvad der sker, når man ukritisk bruger innerHTML:


<script type="text/javascript">
function fooBar() {
    // Opret en reference til divet 'bar'
    var oBar = document.getElementById("bar");
    alert(oBar.innerHTML);
   
    // Tilføj noget ekstra indhold i divet 'foo'
    document.getElementById("foo").innerHTML += "<div>Endnu et div</div>";
    oBar.innerHTML = "noget andet";
   
    // Divet 'bar' er nu overskrevet - og 'oBar' ligger og roder i hukommelsen
    alert(oBar.innerHTML);
   
    // Divet med id="bar" er i virkeligheden et nyt div
    // - magen til det, du lige har overskrevet
    alert(document.getElementById("bar").innerHTML)
}
</script>

<div id="foo">Dette er divet foo
    <div id="bar">Dette er divet bar</div>
</div>

<button onclick="fooBar()">Test</button>

Avatar billede olebole Juniormester
07. marts 2011 - 22:12 #9
Du kan også teste denne kode i Firefox, Opera eller Safari:


<script type="text/javascript">
function fooBar() {
    document.getElementById("foo").innerHTML += "<div>Endnu et div</div>";
}
</script>

<div id="foo">
    <input id="bar" type="text" value="Skriv noget her ...">
</div>

<p>Skriv noget i feltet og tryk på knappen - og læg mærke til, at det du skrev slettes
    i browsere, der overholder denne del af standarderne (= alle andre end IE)</p>

<button type="button" onclick="fooBar()">Test</button>

Avatar billede dramsgaard Nybegynder
07. marts 2011 - 22:17 #10
men jeg bruger da ikke innerHTML på n,m eller text i funktionen, så hvorfor skulle du have indvirkning?

Hvad vil du foreslå istedet så?

På forhånd tak
Avatar billede olebole Juniormester
07. marts 2011 - 22:29 #11
Der er ingen tvivl om, at du overskriver noget. Ellers mister du ikke referencen til elementet. Jeg er ganske sikker på, du overskriver noget i forbindelse med det såkaldte 'Ajax'.

Det eneste fornuftige forslag, jeg kan komme i tanker om, skrev jeg ovenfor: "Vil du bruge Ajax, bør du sætte dig rigtig grundigt ind i JavaScript, DOM, CSS (og evt. XML) - samt et serversprog"
Avatar billede dramsgaard Nybegynder
07. marts 2011 - 22:54 #12
Scriptet jeg bruger til ajax er bare det standard som ligger på w3school's side

min serverside laver et SQL kald og looper som flg:

while not rs.eof
dato = rs("Dato_start")
if dato<> "" then
  dato = FormatDateTime(dato, vbShortDate)
  if len(rs("Dato_start"))>10 then
    tid = FormatDateTime(rs("Dato_start"), vbShortTime)
    format="style=""padding-left:1px;"""
  else
    tid =""
    format="style=""padding-left:36px;"""
  end if
end if

output=output&"<div id=""cal_post_"&rs("kalender.id")&" class=""cal_post"" onClick=""java script:toggle('toggleText"&rs("kalender.id")&"','cal_post_"&rs("kalender.id")&"','');"" onMouseOver=""java script:bg_color(this.id,'hover');"" onMouseOut=""java script:bg_color(this.id,'out');""><div style=""width:130px; float:left;""><span id=""cal_dato"&rs("kalender.id")&""">"&dato&"</span> <span id=""cal_tid"&rs("kalender.id")&""">"&tid&"</span> <img src=""pic/grafik/"&rs("ikon")&""" width=""15"" height=""9"" "&format&" alt="""&rs("type")&""" title="""&rs("type")&""" /><input type=""hidden"" name="""&calTypeID&""" id="""&calTypeID&""" value="""&rs("kalender_type.ID")&""" /> </div><div style=""display:block; padding-left:130px;"" id="""&cal_post_tekst_&rs("kalender.id")&""">"&rs("Tekst")&"</div></div>"

output=output&"<div id=""toggleText"&rs("kalender.id")&""" style=""display:none;""><div class=""calendar_box_inner"">"

if rs("kalender.Beskrivelse")<>"" then output=output&"<span id=""cal_besk"&rs("kalender.id")&""">"&rs("kalender.Beskrivelse")&"</span>" else output=output&"<span id=""cal_besk"&rs("kalender.id")&""">Ingen beskrivelse!</span>"
    output=output&"<div align=""right"" style=""padding-top:5px;""> (Oprettet "&rs("Kalender.Oprettet")&" af "&rs("Fornavn")
    if isnull(rs("medlem_id")) or rs("medlem_id")=0 then output=output&"ukendt"
    if rs("kalender.opdateret")<>"" then output=output&", opd: "&rs("kalender.opdateret")
    output=output&")<br />[<a href=""java script:void(0);"" onClick=""java script:updateCalendar('"&rs("kalender.id")&"');"">Rediger</a> | <a href=""update.asp?method=Delete&id="&rs("kalender.id")&""" onclick=""return confirm('Bekræft sletning af denne post. Du kan ikke fortryde!')"">Slet</a>]</div></div><div style=""background-image:url('pic/grafik/btn_cal.gif'); z-index:100; height:10px; background-repeat:no-repeat;margin-bottom:10px;"">&nbsp;</div></div>"

dato = ""
tid = ""
format=""
rs.MoveNext
Wend
    response.write output
Avatar billede erikjacobsen Ekspert
07. marts 2011 - 22:57 #13
Jo, men, w3school ved ikke noget om HTML, DOM og javascript, selv om det da givetvis ser sådan ud. Lad nu være med at fremføre dem som sandhedsvidne.

Som Ole skriver, så bruger man aldrig innerHTML (til andet end små tests, hvor det da ofte kan have en vis berettigelse).
Avatar billede olebole Juniormester
07. marts 2011 - 23:04 #14
Ja, w3schools.com er et af de sites, du virkelig skal passe på! Det propfyldt med alvorlige fejl, mangler og misforståelser. Vi har ved flere lejligheder her på Eksperten fundet op til 4-6 seriøse fejl pr. side ... hvilket er skræmmende meget, når man tænker på, hvormeget hans reklamer fylder i forhold til det egentlige indhold.

Specielt hans Ajax tutorial er én lang gang vås, som ikke har en k*ft med Ajax at gøre! Til gengæld er sitet ekstremt populært, hvilket medfører at kun de færreste har idé om, hvad Ajax er.

Netop på w3schools.com får man helt fejlagtigt fornemmelsen af, at data skal HTML formateres på serveren og indsættes i browseren med innerHTML. Gør man det, spilder man oceaner af server ressourcer - og som du selv har opdaget, så ødelægger det ofte resten af ens scripting, hvis man ikke er helt skarp i JS
Avatar billede dramsgaard Nybegynder
07. marts 2011 - 23:04 #15
Det var nu heller ikke min hensigt :-)

så i følgende skal jeg bruge en sti igennem DOM istedet for innerHTML eller hvordan?

function GetAjaxData(str, str2, str3)
{
var xmlhttp;
if (str=="")
  {
  document.getElementById("kalender").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("kalender").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("POST","ajax.asp?id="+str+"&vej="+str3,true);
xmlhttp.send();
}
Avatar billede olebole Juniormester
07. marts 2011 - 23:12 #16
Nej, du må begynde med at finde ud af, hvad DOM er. At forklare dig fra bunden, hvad Ajax er, og hvordan det bruges, tager lang tid og er slet ikke egnet for en E-tråd. Webkodning er et fag, man ikke lærer ved et par Google-opslag og et kvarter på Facebook  =)
Avatar billede olebole Juniormester
07. marts 2011 - 23:14 #17
- og du skal starte helt forfra med projektet. Både serverkode og klientkode skal skrives om fra bunden
Avatar billede dramsgaard Nybegynder
22. maj 2011 - 13:23 #18
har glemt at lukke

fandt ikke det jeg søgte, men hvis i vil have point, så smid et svar
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
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

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