Mit Ajax aktuelle Seite nachladen

[hawkmaster]

Hallo zusammen,
ich bin noch Ajax Anfänger.
Ich möchte gerne folgendes erreichen:
Wenn man in einer Auswahlliste (<select>) auf einen Eintrag doppelklickt, dann soll die aktuelle Seite neu geladen werden, bzw. eine GET Variable angehängt werden.
Bisher habe ich es so, dass man bei einem Klick auf einen Button eine PHP Datei includiert. Um die Bedienung einfacher zu machen, würde ich gerne zusätzlich mit einem Doppelklick arbeiten.
Bisher sieht es so aus:

  
if (isset($_POST["image_jobsettings_x"])){  
...  
include('test.php');  
}  

Jetzt möchte ich zusätzlich noch:
if( (isset($_POST["image_jobsettings_x"])) OR (isset($_GET['JobSettings'])) ){

Versucht habe ich das mit Ajax:

echo "<select name="sel_jobs" size="10" ondblclick="showJobSettings();">\n";

  
function GetXmlHttpObject()  
{  
if (window.XMLHttpRequest)  
  {  
  // code for IE7+, Firefox, Chrome, Opera, Safari  
  return new XMLHttpRequest();  
  }  
if (window.ActiveXObject)  
  {  
  // code for IE6, IE5  
  return new ActiveXObject("Microsoft.XMLHTTP");  
  }  
return null;  
}  
  
var xmlhttpJobsettings;  
function showJobSettings(){  
xmlhttpJobsettings=GetXmlHttpObject();  
if (xmlhttpJobsettings==null)  
  {  
  alert ("Browser does not support HTTP Request");  
  return;  
  }  
var url="test.php";  
url=url+"?JobSettings=yes";  
xmlhttpJobsettings.onreadystatechange=stateChangedJobsettings;  
xmlhttpJobsettings.open("GET",url,true);  
xmlhttpJobsettings.send(null);  
}  
  
function stateChangedJobsettings()  
{  
if (xmlhttpJobsettings.readyState==4)  
{  
//document.getElementById("txtHint").innerHTML=xmlhttp.responseText;  
}  
}  
  

Ich sehe zwar im Firebug das bei einem Doppelklick eine Variable "JobSettings=yes" angehängt wird, aber die Seite wird nicht neu geladen, also auch nicht ausgewertet.

Was mache ich falsch?
Brauche ich überhaupt die Funktion stateChangedJobsettings()?
Ich möchte ja keinen Text anzeigen oder sowas ähnliches.

vielen Dank und viele Grüße
hawk

[Micha]

Hallo hawkmaster,

Wenn man in einer Auswahlliste (<select>) auf einen Eintrag doppelklickt, dann soll die aktuelle Seite neu geladen werden

Wenn die gesamte Seite eh neu geladen werden soll, dann scheint AJAX doch das falsche Mittel der Wahl zu sein - meinst nicht?

Mit freundlichem Gruß
Micha

[hawkmaster]

Hallo Micha,

Wenn die gesamte Seite eh neu geladen werden soll, dann scheint AJAX doch das falsche Mittel der Wahl zu sein - meinst nicht?

hmm, das kann schon sein.
Nur, wie kann ich dann mittels eines Doppelklicks auf einen Listen Eintrag die PHP Seite neu laden und dabei eine weitere Datei includieren?
Ich möchte ja eigentlich nur das gleiche realisieren wie wenn ich auf einen Button klicke und POST auswerte:

if (isset($_POST["image_jobsettings_x"])){

Hast du einen anderen Vorschlag?

vielen Dank und viele Grüße
hawk

[Micha]

Hallo hawkmaster,

Ich möchte ja eigentlich nur das gleiche realisieren wie wenn ich auf einen Button klicke und POST auswerte:

Dann sende das Form einfach noch einmal ab. JavaScript kennt die Methode http://de.selfhtml.org/javascript/objekte/forms.htm#submit@title=submit(), welche Du in Deiner Funktion, die beim Doppelklick ausgeführt wird, aufrufen könntest und das Formular absendest. Alternativ ginge auch http://de.selfhtml.org/javascript/objekte/location.htm#href@title=location.href, wobei Du den Link dann selbst "zusammenbauen" müsstest.

Mit freundlichem Gruß
Micha

[hawkmaster]

Hi Micha,
nochmals Danke für deine Hilfe.
Ja, du hast Recht, mit location.href ist es einfacher.
So klappt jetzt zumindest das die Seite neu geladen wird.

  
function showJobSettings(){  
  var Ziel = "http://localhost/app1/test.php?JobSettings=yes";  
  window.location.href = Ziel;  
}  

Ich glaube jedoch ich muss meine Idee sein lassen.
Das Problem ist nämlich das ja jetzt zwar die Seite neu geladen wird, aber der selektierte Eintrag aus der Liste in der der Doppelklick gemacht wird, geht verloren.

vielen Dank und viele Grüße
hawk

[JürgenB]

Hallo hawkmaster,

Das Problem ist nämlich das ja jetzt zwar die Seite neu geladen wird, aber der selektierte Eintrag aus der Liste in der der Doppelklick gemacht wird, geht verloren.

teile dem Script mit, welcher Selekt gewählt wurde; das Script kann ihn dann http://de.selfhtml.org/html/formulare/auswahl.htm#listen_vorselektiert@title=vorselktieren.

Gruß, Jürgen

[hawkmaster]

Hallo Jürgen
danke auch für deine Hilfe.

Ein bischen weiter bin ich nun:
Jetzt übergebe ich der Funktion noch den selektierten Value.

<select name="sel_jobs" size="10" ondblclick="showJobSettings(this.value);">

da der Value vielleicht Sonderzeichen haben kann, habe ich mal versucht mit encodeUri() zu kodieren:

  
function showJobSettings(jobval){  
//alert(jobval);  
var Ziel = encodeURI("http://localhost/app1/test.php?JobSettings=yes&JobSettingsValue="+jobval);  
window.location.href = Ziel;  
}  

Das klappt soweit.
Nur weiss ich nun nicht wie ich mit PHP dies wieder decodieren kann?
Versucht habe ich:

  
jsonStr = stripslashes ($_GET['JobSettingsValue']);  
$json = json_decode ($jsonStr);  
echo $json;  
  
oder aber auch:  
  
echo stripslashes(nl2br($_GET['JobSettingsValue']));  
  
if(isset($_GET['JobSettingsValue'])){  
$complete = $_GET['JobSettingsValue'];  
}else{  
$complete = $_POST['sel_jobs'];  
}  

Hast du eine bessere Idee?
vielen Dank und viele Grüße
hawk

[hawkmaster]

Hallo zusammen,

ich habe es nun doch noch hinbekommen.
mit "encodeURIComponent()"

vielen Dank an Alle für die Hilfe.

viele Grüße
hawk

[hotti]

hi,

Brauche ich überhaupt die Funktion stateChangedJobsettings()?

Verstehe den asynchronen Request ;-)

Also es gibt ein Ereignis, wenn sich was ändert mit dem XHR-Objekt:

XHR.onreadystatechange = empfangsfunktion;

In der empfangsfunktion fragst Du den Status des XHR-Objekts ab, z.B. so wie Du das auch machst (machn se alle):

function empfangsfunktion(){
 if(XHR.readyState == 4){
if(XHR.status == 200){ // response ist angekommen, callback(); }
else{ // kein Status 200 vom Server }
 }
}

Das, was Du bei Status 200 kriegst ist die Response, an der Stelle gehört normalerweise die Funktion hin, welche die Response in das DOM einbaut, das ist die "custom callback function". Beachte dabei, dass der Browser ein bischen braucht, um innerhalb der callbackfunction die Response zu rendern. Du kannst an dieser Stelle (s.oben bei status 200) _nicht sofort_ auf die Response zugeifen, musst also eine callbackfunktion haben zum Darstellen der Response im Dokument (Rendering).

Hotti

Danke Struppi!

[Struppi]

function empfangsfunktion(){
if(XHR.readyState == 4){
if(XHR.status == 200){ // response ist angekommen, callback(); }
else{ // kein Status 200 vom Server }
}
}

Du hast immer noch nicht verstanden was die callback Funktion ist/macht. Das hier ist nach wie vor die Eventfunktion. Die im Prinzip auch sowas wie eine callback Funktion ist, aber benötigt wird um diese Technik überhaupt einsetzen zu können.

Der Trick ist der, dass du eben nicht nur die empfangsfunktion aufrufst, sondern dort eine Funktionsreferenz.

Das, was Du bei Status 200 kriegst ist die Response, an der Stelle gehört normalerweise die Funktion hin, welche die Response in das DOM einbaut, das ist die "custom callback function". Beachte dabei, dass der Browser ein bischen braucht, um innerhalb der callbackfunction die Response zu rendern.

Nein, Nein und 1000 Mal Nein, das ist falsch, das hatzte ich dir aber gestern schon mehrmals gesagt.

Les doch noch mal die Änderungen von mir an deinem Beispiel durch, dort wird eine Callbackfunktion eingesetzt, es ist die Funktion wriDoc und wenn diese aufgerufen wird, kannst du alles machen mit dem Response was nötig ist. Die callback Funktion ist NICHT receiver!

Struppi.

[hawkmaster]

Hallo Struppi, Hallo Hotti,

» Nein, Nein und 1000 Mal Nein, das ist falsch, das hatzte ich dir aber gestern schon mehrmals gesagt.

Hmm, jetzt bin ich noch mehr verwirrt.
Ist denn nun Ajax überhaupt sinnvoll bei meinem Vorhaben oder doch eher wie Micha meinte mit einem normalen "location.href" ?

vielen Dank und viele Grüße
hawk

[Struppi]

Hmm, jetzt bin ich noch mehr verwirrt.

Meine Antwort bezieht sich nicht auf deine Frage.

Ist denn nun Ajax überhaupt sinnvoll bei meinem Vorhaben oder doch eher wie Micha meinte mit einem normalen "location.href" ?

halte ich auch für sinnvoller, wenn es um ganze Seiten geht.

Struppi.

[JürgenB]

Hallo hawkmaster,

Ist denn nun Ajax überhaupt sinnvoll bei meinem Vorhaben oder doch eher wie Micha meinte mit einem normalen "location.href" ?

wenn du die ganze Seite neu laden willst, ist meiner Meinung nach AJAX nicht sinnvoll.

Gruß, Jürgen

[hotti]

hi,

..es ist die Funktion wriDoc und wenn diese aufgerufen wird, kannst du alles machen mit dem Response was nötig ist.

Genau das ist die Crux: Du kannst innerhalb der _callbackfunktion()_ alles mit der response nachen, was Du willst. Nicht jedoch innerhalb der Empfangsfunktion().

Btw., was mich am WE ausgebremst hat, waren so neue Begriffe und das Rendering. Ich habe Deine Hinweise gwissenhaft verarbeitet und objektorientiert umgesetzt. OOP war nicht das Problem, OOP kenne ich seit 15 Jahren. Du kannst das seit gestern nachmittag gerne auf http://rolfrost.de/cgi-bin/alib.cgi nachlesen.

Und nochmal: Ein dickes Dankeschön an Dich! Ans Forum natürlich auch und den Artikel von Molily.

Hotti

[Struppi]

..es ist die Funktion wriDoc und wenn diese aufgerufen wird, kannst du alles machen mit dem Response was nötig ist.

Genau das ist die Crux: Du kannst innerhalb der _callbackfunktion()_ alles mit der response nachen, was Du willst. Nicht jedoch innerhalb der Empfangsfunktion().

Auch dort, aber dort musst du abfragen welchen Status der Repsonse hat.

Btw., was mich am WE ausgebremst hat, waren so neue Begriffe und das Rendering. Ich habe Deine Hinweise gwissenhaft verarbeitet und objektorientiert umgesetzt. OOP war nicht das Problem, OOP kenne ich seit 15 Jahren. Du kannst das seit gestern nachmittag gerne auf http://rolfrost.de/cgi-bin/alib.cgi nachlesen.

Auch wenn du hier mit Objekten arbeitest, wirklich OO ist das aber nicht. Du benutzt das Objekt mehr oder weniger nur, um Parameter zu sparen. Wirkliche sinnvolle Aufgaben erledigen die Objekte nicht. Von so Dingen wie Kapselung gar nicht zu sprechen.

Struppi.

[dedlfix]

Hi!

..es ist die Funktion wriDoc und wenn diese aufgerufen wird, kannst du alles machen mit dem Response was nötig ist.
Genau das ist die Crux: Du kannst innerhalb der _callbackfunktion()_ alles mit der response nachen, was Du willst. Nicht jedoch innerhalb der Empfangsfunktion().

Dann werd doch endlich mal konkret, was bei dir zwar nicht direkt in der Empfangsfunktion, stattdessen aber in einer davon aufgerufenen Funktion, gemacht werden kann. Bisher ergaben deine Bemühungen nur den Eindruck ab, dass du irgendwas verkehrt zu machen scheinst. Aber was du das konkrete Problem ist, zu dem du eine Lösung gesucht hast, ist (für mich) bisher nicht nachvollziehbar.

Lo!

[dedlfix]

Hi!

Bisher ergaben deine Bemühungen nur den Eindruck ab, dass du irgendwas verkehrt zu machen scheinst. Aber was du das konkrete Problem ist, zu dem du eine Lösung gesucht hast, ist (für mich) bisher nicht nachvollziehbar.

Wenn mir das inzwischen doch selbst und richtig klar geworden ist, ich also recht zwischen deinen Zeilen im anderen Faden lese, fehlte dir lediglich die Abfrage des readyState im onreadystatechanged-Eventhandler. Du hast einfach ungeachtet des readyState die Response zu verarbeiten versucht, was misslang, weil sie zunächst noch nicht da ist. Du musst deinen Eventhandler so lange aufrufen lassen, bis readyState == 4 ist. Dann kannst du die Response sofort und ohne weitere Verzögerungen verarbeiten.

if (xhr.readyState == 4){
  if (xhr.status == 200) { callback(xhr.responseText;) }
  else { aobj.errstr = 'Server anwortet nicht'; }
}

Es ist rein technisch nicht erforderlich, das callback(xhr.responseText); ins Spiel zu bringen.

if (xhr.readyState == 4) {
  if (xhr.status == 200) {
    foo = readParams(xhr.responseText);  // stellvertretend für deine erste Zeile der callback-Funktion
    ...
  } else{ aobj.errstr = 'Server anwortet nicht'; }
}

Der Callback kann aus anderen strukturellen Gründen sinnvoll sein, aber er ist nicht zwingend notwendig.

Lo!