[Party]

hallo leute ich habe mich dieses Wochenende mit ajax beschäftigt und mich an meine neue page dran gemacht und einwenig getestet.

test

so wenn man nun auf biographie klickt dann kommt normalerweise ein NOOBSLIDE effekt aber der funktioniert nach dem request nicht?

test

hier ist die datei was hinterlegt ist diese funktioniert....
kann ich dies irgendwie lösen das es nach dem html request trotzdem funktioniert?

das ist hier der code vom Ajax request:

<script language="JavaScript">
function createRequestObject() {
  var ro;
  var browser = navigator.appName;
  if(browser == "Microsoft Internet Explorer"){
	ro = new ActiveXObject("Microsoft.XMLHTTP");
  }else{
	ro = new XMLHttpRequest();
  }
  return ro;
}
 
var http = createRequestObject();
 
function doScript(url) {
  document.getElementById("content-three").innerHTML = '';
  document.getElementById("content-two").innerHTML = '<div style=top:50%;margin-top:-20px;position:absolute;margin-left:130px;><img src="http://forum.jswelt.de/images/loader.gif"><br>loading...</div>';
  http.open('get', url);
  http.onreadystatechange = handleResponse;
  http.send(null); 
  return false;
}


function handleResponse() {
	if(http.readyState == 4){
		var response = http.responseText;
		document.getElementById("content-two").innerHTML = response;
	}
}
</script>

hier der html eintrag:

<li><a class=biographie   href="biographie.php" onclick="return doScript(this.href);">Guide</a></li>

sitze nun schon 5 stunden da und suche im internet aber finde leider nichts... und das ist ziemlich deprimierent da ich weiterkommen möchte
vielen dank für eure bemühungen.

[[Elite-|-Killer]]

Fehler 1: Der HTML Doctype hat in der angefragten Datei nichts zu suchen, da ja nur ein Bestandteil der Seite angefragt wird. Wird i.d.R. in der Regel als XML, Textdatei oder JSON an das Script übergeben.
Fehler 2: Es wird JavaScript mitgeliefert. Ich habs jetzt zwar nur überfolgen aber http://docs.mootools...st/Request.HTML das dürfte die Lösung sein.

[Party]

hallo danke für deine antwort. also das mit dem fehler 1 werde ich gleich ausbessern hab ich eigendlich nur zum testen probiert.

zu fehler 2. kannst du mir genau sagen was du in der doku meinst also welchen punkt genau? hab ich mir auch schon angeschaut aber nicht wirklich schlau geworden wo mein fehler liegt...

vielen dank für die bemühung.

wenn ich
response = http.responseText gegen response = http.responseJavaScript austausche dann kommt immer die fehlermeldung undefine..... meintest du das?

Dieser Beitrag wurde von Party bearbeitet: 25. August 2008 - 18:08

[zwutz]

kleiner Hinweis am Rande: AJAx sollte eigentlich nicht dazu verwendet werden, ganze Seiten zu laden.
Du nimmst dem User so die Möglichkeit, einzelne Seiten zu bookmarken (was ja auch das Problem bei Frames ist) und zerstörst das Prinzip, das hinter dem Zurück-Button des Browsers liegt. Wenn ein User da draufklickt erwartet er normalerweise den letzten Zustand der Seite vorzufinden und nicht wieder bei Google oder sonstwo zu landen.
Außerdem

darüber hinaus ist deine Webseite zwar hübsch, aber unbenutzbar. Hat man eine andere Schriftgröße als die von dir vorgegebene, ist der Text unlesbar, bei mir sind aktuell gute 80% des möglichen Platzes ungenutzt, andererseits wird aber trotzdem Text abgeschnitten, bei einer Schriftgröße, die ich ohne Brille nicht lesen könnte und ohne JS ist deine Seite nahezu unbenutzbar (was man bei der Entwicklung von AJAX-Anwendungen immer im Hinterkopf behalten sollte).

Also das Design, so schön es auch ist, solltest du überdenken. Und auch ajax solltest du nicht für alles einsetzen, wo es sich grad anbietet. Zum ausprobieren: ja, aber nicht online

Zum Thema (will ja nicht so sein):
mit AJAX lieferst du in der Regel eine XML-Datei zurück, die du mit Javascript parst und entsprechende Elemente erzeugst und somit die Seite veränderst.
Auf innerHtml solltest du verzichten. Es funktioniert zwar, wirft aber eventuell im nachhinein Probleme auf

um zum Beispiel innerhalb des body-tags eine Überschrift nebst Absatz zu erzeugen geht man DOM-gerecht wie folgt vor:

var headerText = document.createTextNode( "Überschrift" );
var paragraphText = document.createTextNode( "Lorem Ipsum schieß mich tot" );

var header = document.createElement( "h1" );
var paragraph = document.createElement( "p" );

paragraph.appendChild( paragraphText );
header.appendChild( headerText );

document.getElementsByTagName( "body" )[0].appendChild( header );
document.getElementsByTagName( "body" )[0].appendChild( paragraph );

weitergehende Lektüre zum Thema Nodes: http://de.selfhtml.o...bjekte/node.htm

[Party]

danke für die antwort.

ich wollte eigendlich mal was neues ausprobieren und damit ich ajax kennen lerne hab ich mir das mal zum thema gemacht. da es sich um eine private homepage handelt habe ich mir schon ein konzept überlegt das für mich persönlich in frage kommt. da ich selbst das zurück geklicke hasse und nicht mag und da meine zielgruppe nur ein paar kollegen sind die diese meinung teilen hab ich mich dafür entschieden...

was hat aber dein code mit meinem problem zu tun das JS mit den requests nicht funktioniert? verstehe ich da was falsch

[zwutz]

Zitat (Party: 26.08.2008, 00:03)

ich wollte eigendlich mal was neues ausprobieren und damit ich ajax kennen lerne hab ich mir das mal zum thema gemacht. da es sich um eine private homepage handelt habe ich mir schon ein konzept überlegt das für mich persönlich in frage kommt. da ich selbst das zurück geklicke hasse und nicht mag und da meine zielgruppe nur ein paar kollegen sind die diese meinung teilen hab ich mich dafür entschieden...

deine Sache

Zitat (Party: 26.08.2008, 00:03)

was hat aber dein code mit meinem problem zu tun das JS mit den requests nicht funktioniert? verstehe ich da was falsch

du übergibst eine komplette, eigenständige Datei zurück und das ist der Grund, warum es zu Fehlern kommt.
Du musst eine XML-Datei zurückgeben, die vll so aussieht:

<?xml version="1.0" encoding="ISO-8859-1" standalone="yes"?>
<biographie>
   <script>alert( "Some JS-Functions" );</script>
   <body>
	  <h1>Überschrift</h1>
	  <h2>Überschrift 2</h2>
	  <p>Some text <a href="#">with a link</a></p>
   </body>
</biographie>

diese parst du dann mit JS und fügst den Inhalt dann entsprechend dort ein, wo er hin soll... Dürfte fertige Libs dafür geben, aber nachdem du es lernen willst schadet es nicht, das ganze von Grund auf mal selber gemacht zu haben

Allerdings solltest du vorher deine div-suppe entfernen. Macht die Sache nachher einfacher....
achja: ist eine gute Gelegenheit, sich mit XHTML zu beschäftigen
folgende Sachen sind nämlich nicht erlaubt, wenn du mit XML arbeitest:

<span></span> //leere Nodes
<br> bzw. <img src="blubb.jpg"> // Nodes ohne schließendes Gegenstück
//stattdessen
<br /> und <img src="blubb.jpg" /> // leerzeichen vor / beachten

das erspart dir eine menge Traffic und der Validator läuft nicht Amok, wenn er deine Seite sieht (du kannst froh sein, dass deine Seite überhaupt angezeigt wird, so wie sie derzeit ist)

[Party]

danke für deine antwort ich werde mal sehen ob ich das mit dem js so hinbekomme die nacht ist ja noch lange

[Party]

mhm habe jetzt schon auf einigen seiten gelesen das man bei dem bestehenden ajax code einfach eine evalScript oder so einfügen müsste danach ladet er die JS datei nach oder so irgendwie. stimmt das bzw geht das mit meinem CODE da oben? hab es jetzt auf deine art probiert in xml aber spätestens beim dem wo du geschrieben hast ich muss das dann noch durchparsern stehe ich an.......

[[Elite-|-Killer]]

Zitat (Party: 26.08.2008, 01:17)

mhm habe jetzt schon auf einigen seiten gelesen das man bei dem bestehenden ajax code einfach eine evalScript oder so einfügen müsste danach ladet er die JS datei nach oder so irgendwie. stimmt das bzw geht das mit meinem CODE da oben? hab es jetzt auf deine art probiert in xml aber spätestens beim dem wo du geschrieben hast ich muss das dann noch durchparsern stehe ich an.......

Ja, das stimmt, deshalb ja auch mein Link zu der MooTools Funktionsreferenz.

Zitat

Options:
update - (element: defaults to null) The Element to insert the response text of the Request into upon completion of the request.
evalScripts - (boolean: defaults to true) If set to true, script tags inside the response will be evaluated.
evalResponse - (boolean: defaults to false) If set to true, the entire response will be evaluated.

Hier wird ja die Möglichkeit beschrieben, dass das nachgeladene JavaScript auch ausgeführt wird.

Zitat (zwutz: 25.08.2008, 22:48)

kleiner Hinweis am Rande: AJAx sollte eigentlich nicht dazu verwendet werden, ganze Seiten zu laden.
Du nimmst dem User so die Möglichkeit, einzelne Seiten zu bookmarken (was ja auch das Problem bei Frames ist) und zerstörst das Prinzip, das hinter dem Zurück-Button des Browsers liegt. Wenn ein User da draufklickt erwartet er normalerweise den letzten Zustand der Seite vorzufinden und nicht wieder bei Google oder sonstwo zu landen.

Das stimmt nur teilweise. Ich persönlich erstelle seit ca. einem Jahr auch alle Websites ausschließlich auf Ajaxbasis (hat ab und an ja auch einen Trafficvorteil für den Nutzer) achte allerdings darauf, dass die Browserhistory funktioniert (was ja dank den meisten JS-Toolkits problemlos möglich ist) und erlaube dem User auch zu bookmarken oder Links in einem neuen Tab zu öffnen. In meinen Augen spricht deshalb in den meisten Fällen absolut nichts dagegen Inhalte ausschließlich per Ajax nachzuladen auch wenn es große Teile der Seite sind, solange man es sauber macht und die Grundfunktionalität des Browsers erhalten bleibt. Zudem kann man es ja bei intelligenter Programmierung dennoch mit deaktiviertem JavaScript in vollem Funktionsumfang nutzen.

Dieser Beitrag wurde von [Elite-|-Killer] bearbeitet: 26. August 2008 - 01:22

[[Elite-|-Killer]]

Naja, hätte eigentlich ein Edit werden sollen und kein Post, aber was solls.
Hab den Text im Vorpost angehängt, wenn ein Moderator so frei ist und das hier löschen würde

Dieser Beitrag wurde von [Elite-|-Killer] bearbeitet: 26. August 2008 - 01:22

[Party]

danke für deine antwort ihr helft mir sehr weiter.

@Elite Killer
ja ich hab das natürlich schon gesehen nur ich weis leider nicht wo ich das bei mir im JS code einbauen soll. Funktioniert leider nicht...

var myHTMLRequest = new Request.HTML([evalScripts]);

function createRequestObject() {
  var ro;
  var browser = navigator.appName;
  if(browser == "Microsoft Internet Explorer"){
	ro = new ActiveXObject("Microsoft.XMLHTTP");
  }else{
	ro = new XMLHttpRequest();
  }
  return ro;
}
 
var http = createRequestObject();

function doScript(url) {
  document.getElementById("content-three").innerHTML = '';
  document.getElementById("content-two").innerHTML = '<div style=top:50%;margin-top:-20px;position:absolute;margin-left:130px;><img src="images/loader.gif"><br>loading...</div>';
  http.open('get', url);
  http.onreadystatechange = handleResponse;
  http.send(null); 
  return false;
}


function handleResponse() {
	if(http.readyState == 4){
		var response = http.responseText;
		document.getElementById("content-two").innerHTML = response;
	}
}

[Party]

so hab das problemchen mittlerweile gelöst lade einfach das JS nach.

andere frage @[Elite-|-Killer] wie machst du es das die seite dann ohne ajax auch funktioniert bzw die requests? kann man das irgendwie abfragen ob js aktiv ist oder nicht? und dann einfach eine 2te seite bauen mit iframes?

[[Elite-|-Killer]]

Ob JavaScript aktiviert ist lässt sicht indirekt ganz leicht feststellen (und somit kann man einem Benutzer ja auch sagen, dass er es aktivieren soll). Ein Beispiel für die Aufforderung zur Aktivierung von java script:
a) Man baut sich einen Divider oder sonst was, das den Benutzer darauf hinweist, dass JavaScript für den Besuch der Website erforderlich ist und gibt diesem eine ID
b) Beim Body Tag einfach mit Hilfe von onload="" den Divider wieder ausblenden
-> JS aktiv: Der User sieht nichts
-> JS deaktiviert: Der User sieht, dass er es aktivieren soll
Ebenso kann man ja bei einem Intro oder Login oder was auch immer dem Server zukommen lassen ob der Nutzer es nun aktiviert hat oder nicht.

Des weiteren gibt es den guten alten <noscript> Tag der das alternativprogramm zu deaktiviertem JavaScript beinhaltet.

Ebenso kann man auch mit <a href="foo.html" onclick="bar">FooBar</a> den xmlHttpRequest aufrufen (onclick). Ist JavaScript an tritt der onclick Event ein und das ganze wird per xmlHttpRequest geladen und man beendet anschließent die Verarbeitung. Ist JavaScript aus wird es mit dem onclick Event sowieso nichts und der Browser ruft den Link ganz normal mittels href auf. So gehts mit und one JavaScript beim User. Auf features wie Suche mit Suggest-Lists muss der benutzter hald verzichten, wenn er JS deaktiviert hat.