Forum

Moderiert von:
Forum Index
Entwicklerforum
     Entwicklungs Support
     Sidebox + Ajax-Technik
Hilfe anzeigen
Hilfe anzeigen

Seite 1 2 3 nächste Seite 


Autor Druckerfreundliche DarstellungSidebox + Ajax-Technik
Freespacer

Registriert: 03.10.2006
Beiträge: 205
Wohnort: Essen


Sende eine Private Nachricht an Freespacer
Geschrieben: 08.12.2006 05:27

Hallo,

es geht in erster Linie, um den Feature Wunsch von Boby im BT #974, aber auch prinzipiell die AJAX-Technik.

Wir wissen ja alle, dass jedes große Content-Management-System lange Ladezeiten mit sich bringt. Ich habe vor, die Ajax-Technik in OPN zu integrieren, um die Aktualisierung der gesamten Webseite zu unterbinden und gleichzeitig die Effektivität zu erhöhen.

Die AJAX-Technik habe ich bereits fertig und das Nachladen von Daten per POST- und GET-Methode ohne Aktualisierung der gesamten Seite funktioniert in allen modernen Browsern (FF/IE/Opera) soweit.

Jetzt zu meinem Problem.

Gibt es in OPN eine Funktion, die nur den Inhalt der Sitebox/Centerbox neu baut und die geänderten Parametern an das jeweilige Modul übertragt?

Für dieses Vorhaben brauche ich für die Sitebox und Centerbox ein "Ajax"-Zugang oder soll ich sagen ein "ONLY-Content"-Zugang in OPN. Gibt es da eine Möglichkeit oder muss man sich da was zusammen basteln?

Gruß

Sebastian


Zitieren Druckerfreundliche Darstellung nach oben
stefan
Beiträge: 2435
Wohnort: Münster


Sende eine Private Nachricht an stefan
ICQ
Geschrieben: 08.12.2006 05:57

nun das ist ein grösseres unterfangen. ich habe mir hier auch schon mal eine AJAX class genaut die auch entsprechend geht, allerdings bin ich dann ebenso auf einproblem gestossen das dann in die struktur einzubetten von opn

du hast da mehere probleme

sideboxen
diese kannst du per class abruf dir holen das ist unkritisch

centerbox
eingeschränkt möglich s. dazu inline box da mach ich das ja

aber was ist mit dem modul selbst also der index seite eines modules da has du ein problem

ebenso was nützt dir nur der ccontent es soll sich ja was verändern und auch nicht wieder alles übertragen werden. beispiel umschalten eines schalters da willst dan doch ned die ganze side/centerbox übertragen also brauchst dazu auch noch art interface

aber vielleicht ist deine classe ja anderes aufgebaut zeigt doch mal.


Zitieren Druckerfreundliche Darstellung nach oben
Freespacer

Registriert: 03.10.2006
Beiträge: 205
Wohnort: Essen


Sende eine Private Nachricht an Freespacer
Geschrieben: 08.12.2006 06:52

stefan schrieb am 08.12.2006 um 05:57:55 Uhr folgendes:

nun das ist ein grösseres unterfangen. ich habe mir hier auch schon mal eine AJAX class genaut die auch entsprechend geht, allerdings bin ich dann ebenso auf einproblem gestossen das dann in die struktur einzubetten von opn


Na, dann bin ich ja auch nicht alleine.

stefan schrieb am 08.12.2006 um 05:57:55 Uhr folgendes:

du hast da mehere probleme


Das habe ich mir schon fast gedacht.

stefan schrieb am 08.12.2006 um 05:57:55 Uhr folgendes:

sideboxen
diese kannst du per class abruf dir holen das ist unkritisch


Tolle Idee, und wie mache ich das in einem Standalone-Script? Da fangen doch erst die Probleme an.

stefan schrieb am 08.12.2006 um 05:57:55 Uhr folgendes:

centerbox
eingeschränkt möglich s. dazu inline box da mach ich das ja


Inlinebox??? Also, mir wäre ein vollständiger Neuaufbau wie auch teilweiser Aufbau der jeweiligen Centerbox lieber. Ganz ehrlich. In der Centerbox kann man noch viele andere Container einbetten und diese zum Aktualisieren zwingen, so ist das nicht.

stefan schrieb am 08.12.2006 um 05:57:55 Uhr folgendes:

aber was ist mit dem modul selbst also der index seite eines modules da has du ein problem


Schön wäre es, wenn es kein Problem ist.

stefan schrieb am 08.12.2006 um 05:57:55 Uhr folgendes:

ebenso was nützt dir nur der ccontent es soll sich ja was verändern und auch nicht wieder alles übertragen werden. beispiel umschalten eines schalters da willst dan doch ned die ganze side/centerbox übertragen also brauchst dazu auch noch art interface


STOP!!! Wirf bitte nicht alles durcheinander.
Ich zähle mal hier auf, wo man Ajax in OPN verwenden kann und wie OPN darauf reagieren soll.

1. Einstellungen wie Admin-Menü, Benutzer-Daten, werden per Ajax aktualisiert. Die OPN-Seite wird dabei nicht komplett geladen, sondern nur die Einstellungen werden transferiert und entsprechend wie die WAITING-BOX eine Info an den User übermittelt, dass die Einstellung gespeichert wurde.

2. Centerbox/Sidebox: Manchmal muss der komplette Content der Centerbox/Sidebox aktualisiert werden (Siehe Kalender). Man kann auch für alle anderen Centerbox/Sidebox einzelne Container aktualisieren bzw. nachladen.

Betrifft Content: OPN muss die Daten und den Content aufbereiten, dass kann man mit JavaScript alleine nicht machen, da jeder Browser auf JavaScript anders reagiert. Bei den Eingabefeldern, etc. sieht es anders aus. Der Aufbau eines kompletten Contents will ich nicht alleine auf JavaScript stützen, dann lieber der Tranfer von XHTML+Daten per PHP bzw. OPN. Dieser macht nur zu einem kleinen Teil aus.

stefan schrieb am 08.12.2006 um 05:57:55 Uhr folgendes:

aber vielleicht ist deine classe ja anderes aufgebaut zeigt doch mal.


PHP-Klasse ist gut, ich bin noch im Anfangsstadium. Ich konnte höchsten mit einem kleinem JavaScript, in OPN eingebunden, einen Teil des Contents nachladen oder auch entsprechend ersetzen. Dieses JavaScript wird später noch sehr stark erweitert. Dafür habe ich den SPAN-Tag mit einer ID genommen (unsichtbarer Container) und innerhalb der Sidebox/Centerbox gelegt und innerhalb des SPAN-Tags habe ich den eigentlichen Inhalt vom Modul geladen. Nur beim Nachladen des Content mit dem Aufbau des OPN-Moduls bin ich auf ein Hinternis gestoßen.

Aber so wie ich die Sache jetzt sehe, müssen noch einige Funktionen in OPN integriert werden, damit dieser den Content (ob alles oder auch nur ein kleiner Teil) mit Parameterübergabe des jeweiligen Moduls ein neuen Content baut.

Jetzt bin ich am Überlegen, wie man das am Besten ohne größeren Aufwand hinbekommt.

Gruß

Sebastian


Zitieren Druckerfreundliche Darstellung nach oben
stefan
Beiträge: 2435
Wohnort: Münster


Sende eine Private Nachricht an stefan
ICQ
Geschrieben: 08.12.2006 07:35

ok ich bin ein etwas anderen weg gegangen. die class dient mir dazu das ich php funktionen per ajax aufrufe. somit kann ich den 2ten teil (das verändern von daten) einfach realisieren nur ist da die struktur in opn noch nicht für ausgelegt.


Zitieren Druckerfreundliche Darstellung nach oben
Freespacer

Registriert: 03.10.2006
Beiträge: 205
Wohnort: Essen


Sende eine Private Nachricht an Freespacer
Geschrieben: 08.12.2006 08:32

stefan schrieb am 08.12.2006 um 07:35:18 Uhr folgendes:

ok ich bin ein etwas anderen weg gegangen. die class dient mir dazu das ich php funktionen per ajax aufrufe. somit kann ich den 2ten teil (das verändern von daten) einfach realisieren nur ist da die struktur in opn noch nicht für ausgelegt.


Äh, kannst du mir die Klasse mal zeigen, irgendwie werde ich aus deiner Antwort nicht wirklich schlau.

Hier ist zur Zeit mein kleines Ajax-Script:

function ajax_init() {
     var xmlHttp = false;
     var msxmlhttp = new Array(
               'Msxml2.XMLHTTP',
               'Msxml2.XMLHTTP.3.0',
               'Msxml2.XMLHTTP.4.0',
               'Msxml2.XMLHTTP.5.0');
     for (var i = 0; i < msxmlhttp.length; i++) {
          try {
               xmlHttp = new ActiveXObject(msxmlhttp<em>);
          } catch (e) {
               xmlHttp = null;
          }
     }
     if(!xmlHttp && typeof XMLHttpRequest != 'undefined') {
      xmlHttp = new XMLHttpRequest();
     }
     if(!xmlHttp) { alert('XMLHttpRequest not supported!'); }
     return xmlHttp;
}     

function ajax_content_change(moduleid,xmldata) {
     document.getElementById(moduleid).innerHTML = xmldata;
}

function ajax_get_data(moduleid,requestpath,methode,getpostdata) {
     var xmlHttp = new ajax_init();
     var xmldata;
     if (xmlHttp) {
          if(methode == 'GET') { requestpath = requestpath + "?" + getpostdata; }
          xmlHttp.open(methode, requestpath, true);
          xmlHttp.onreadystatechange = function () {
               switch (xmlHttp.readyState) {
                    case 0 : // UNINITIALIZED
                    case 1 : // LOADING
                    case 2 : // LOADED
                    case 3 : // INTERACTIVE
                         break;
                    case 4 : // COMPLETED
                         xmldata = xmlHttp.responseText;
                         ajax_content_change(moduleid,xmldata);
                         break;
                    default : ; // ERROR STATUS
               }
          };
          if(methode == 'POST') {
               xmlHttp.setRequestHeader(
                    "Content-Type",
                    "application/x-www-form-urlencoded");
               xmlHttp.send(getpostdata);
          } else if(methode == 'GET') {
               xmlHttp.send(null);
          }               
     }
}


Dieses Script ist zwar klein und wird vom Browser in der Regel nur 1x geladen. Ein PHP-Script ohne Ajax müsste für jede Änderung komplett angestossen werden.

Das o.g. Script ist nur die Struktur, laßt sich aber noch viel weiter ausbauen und verfeinern. Mit diesem Script kannst du kleine wie auch große Sachen verändern. Da brauchst du für das Aktualisieren und/oder das Austauschen des Contents/Settings auch keine großartige PHP-Klasse. Gesendet wird ja grundsätzlich mit POST. Das o.g. Script läßt auch GET-Methode zu.

Im Modul brauchst du nur folgenden Code einfügen:

<a href="#" onclick="ajax_get_data('calendar','".$opnConfig['opn_url']."/modules/calendar/plugin/sidebox/calendar/main.php."','POST','date=2007-01-01&time=12:00:00')>Gehe zu Januar 2007</a>


Beim Draufklicken wird das Request an OPN abgesetzt. Leider ist OPN noch nicht in der Lage die Daten zu verarbeiten und ein neues Content zurück zu schicken, um das vorhandene Content zu ersetzen bzw. zu aktualisieren.

Hört sich eigentlich sehr simple an.

Was schlägst du für die Änderungen an OPN vor?

Gruß

Sebastian


Zitieren Druckerfreundliche Darstellung nach oben
stefan
Beiträge: 2435
Wohnort: Münster


Sende eine Private Nachricht an stefan
ICQ
Geschrieben: 09.12.2006 11:37

wo man das an setzt ist eine gute frage da ja wenn du z.b. sideboxen senden wilst diese mit einer id versehen werden müssen damit du mit

document.getElementById("sideboxid1").innerHTML = val;

entsprechedn die die daten auch setzen kannst also den inhalt, im theme das einzubauen wäre da dann recht einfach, da das aber aus opn kommen soll ist das im theme nicht zu machen.

bliebe nur ein div um jede box mit der id der box zu setzen. dann ändert sich aber die verschachtelungs tiefe auch nicht wirklich schön, nur wenn das sein soll das sehe ich da nicht wirklich einen anderen weg



Zitieren Druckerfreundliche Darstellung nach oben
stefan
Beiträge: 2435
Wohnort: Münster


Sende eine Private Nachricht an stefan
ICQ
Geschrieben: 09.12.2006 17:14

if(methode == 'GET') { requestpath = requestpath + "?" + getpostdata; }

was machst du bei codierten urls ?


Zitieren Druckerfreundliche Darstellung nach oben
Freespacer

Registriert: 03.10.2006
Beiträge: 205
Wohnort: Essen


Sende eine Private Nachricht an Freespacer
Geschrieben: 09.12.2006 18:33

stefan schrieb am 09.12.2006 um 11:37:23 Uhr folgendes:

wo man das an setzt ist eine gute frage da ja wenn du z.b. sideboxen senden wilst diese mit einer id versehen werden müssen damit du mit

document.getElementById("sideboxid1").innerHTML = val;

entsprechedn die die daten auch setzen kannst also den inhalt, im theme das einzubauen wäre da dann recht einfach, da das aber aus opn kommen soll ist das im theme nicht zu machen.

bliebe nur ein div um jede box mit der id der box zu setzen. dann ändert sich aber die verschachtelungs tiefe auch nicht wirklich schön, nur wenn das sein soll das sehe ich da nicht wirklich einen anderen weg


Die Sidebox selbst, will ich keine ID legen. Denn es kann ja auch sein, dass in der Sidebox nur ein bestimmter Inhalt ausgetauscht werden sollte und nicht gleich alles. Das heißt, diese SPAN-Tag (es können auch mehrere sein) kann beliebig in der Sidebox festgelegt werden.

DIV-Tags würde ich hier nicht verwenden, diese Container werden auch noch als Platzhalter verwendet, das heißt CSS-mäßig müsste man auch noch formatieren. Bei den SPAN-Tags sind es eben unsichtbare Container bzw. Container die auf die Formatierung der Webseite nicht auswirkt.

Probiere mal folgendes ohne CSS aus:

<div>Inhalt 1</div><div>Inhalt 2</div><div>Inhalt 3</div>
<br />
<span>Inhalt 1</span><span>Inhalt 2</span><span>Inhalt 3</span>


Du siehst, dass bei DIV-Container ohne CSS umgebrochen wird. Daher bevorzuge ich lieber SPAN-Container und läßt sich auch innerhalb eines Textes einbetten ohne die Struktur des Textes zu zerstören.

Auszug aus de.selfhtml.org im Bezug auf DIV-Tags:

Dieses allgemeine Element bewirkt nichts weiter als dass es in einer neuen Zeile des Fließtextes beginnt. Ansonsten hat es keine Eigenschaften.


Auszug aus de.selfhtml.org im Bezug auf SPAN-Tags:

Analog zum div-Element, das andere Block-Elemente enthalten kann, gibt es ein Element, das Text und andere Inline-Elemente enthalten kann, selbst aber keinerlei Eigenschaften hat und nichts bewirkt.


Mein Kopf raucht schon und sucht fieberhaft nach einer Lösung für unser Problem. Aber ich habe bereits an einer Lösung für Centerbox/Sidebox gedacht:
- das Ajax-Script greift auf das Hauptscript INDEX.PHP zu. Dort wird per POST neben den anderen Variablen noch die Variable ajax=true und z.B. module=/modules/calendar übertragen. Somit weiß OPN eigentlich schon, was gefordert wird. Denn Rest muss eine Ajax-Funktion in den Modulen den gewünschten Inhalt zurück geben. Somit wird nur der teilweise oder auch komplette Inhalt zurückgegeben.

Einen anderen Weg kenne ich noch nicht. Aber wenigstens ist es ein Ansatz und wir müssen OPN nicht komplett umbauen, sondern nur ergänzen.

stefan schrieb am 09.12.2006 um 17:14:20 Uhr folgendes:

if(methode == 'GET') { requestpath = requestpath + "?" + getpostdata; }

was machst du bei codierten urls ?


Die Inhalte der Variabeln werden vorher von PHP urlencode() geparst und entsprechend in den HTML-Code eingebaut.

Bei Formularen wird eben JavaScript mit diesem Befehl encodeURL() helfen müssen.

Ich habe schon bereits weitere Funktionen in die Ajax.js eingebaut. Er kann jetzt auch mit HTTP-Codes umgehen. Das Ansprechen einer Statusbox wie "Daten werden geladen" bzw. "Daten nicht gefunden!" oder auch "Fehler in der Übertragung" wird angezeigt. Ähnlich wie jetzt die Wartebox, jedoch wird diese Box in Zukunft auch umgebaut.

Gruß

Sebastian


Zitieren Druckerfreundliche Darstellung nach oben
stefan
Beiträge: 2435
Wohnort: Münster


Sende eine Private Nachricht an stefan
ICQ
Geschrieben: 09.12.2006 19:04

du ich hab da auch schon was, ich habe entsprechende routien hinzugefügt bis auf die url codierung würde das gehen

und mit codierten urls rede ich nicht von HTML von der von durch opn codierten


Zitieren Druckerfreundliche Darstellung nach oben
stefan
Beiträge: 2435
Wohnort: Münster


Sende eine Private Nachricht an stefan
ICQ
Geschrieben: 09.12.2006 19:10

unter develop-demos hab ich mal ne demo dazu gebaut


Zitieren Druckerfreundliche Darstellung nach oben
sortieren nach
Seite 1 2 3 nächste Seite 

Hilfe anzeigen
Hilfe anzeigen
Vorheriges Thema:  Abhängigkeit der Module
Nächstes Thema:  Developer-Doku

Gehe zu:

Benutzername:
 
Sicherheits-Code
Sicherheits-Code
Neu laden