[Core] Ajax Funktionen

[Jens-A. Koch]

Eine kurze Zusammenfassung der Aktivitäten im Bezug auf die Ajax-Implementation:

Stöbern durch verschiedene Libraries/Frameworks:

a. Sajax
Eine PHP Datei mit mehreren Funktionen. Die Javascripte werden mittels php Funktionsaufruf inkludiert.
Die Ausgabe erfolgt mittels gebufferter (ob_start) Übergabe an $html.
Der Buffercontent landet im Smartyumfeld grundsätzlich direkt nach dem Header.
Daher scheidet diese Klasse aus.

b. Xoad (früher NAJAX)
OOP - AJAX, Eventhandling, erzeugt einen Wust an Classen und Funktionen
Initialisierung des Headers mit zusätzlicher Pfadangabe gescheitert
Overhead-Faktor zu groß

c. Prototype
prototype.js

Hinzugefügte Smarty-Funktionen zur Ersetzung von {ajax_call} und {ajax_update}
function.ajax_update.php
function.ajax_call.php

Hinzugefügter Smarty Block {ajax_form}
block.ajax_form.php

Aufruf in der TPL

Bitte auf die Hochkommas bei Einbindung von $smarty variablen achten,
da man sich schon innerhalb umschweifter Klammern ( also eines Ersetzungsbereichs {xy }) befindet.

{ajax_update url='index.php?mod=serverlist&action=get_serverdetails'
                                     update_id="server_details"                                     
                                     params="server_id=`$server.server_id`"
                                     function="$this->get_serverdetails;"
                                     }
<div id="server_details>

[xsign.dll]

Code:

{ajax_update url='index.php?mod=serverlist&action=get_serverdetails'
                                     update_id="server_details"                                     
                                     params="server_id=`$server.server_id`"
                                     function="$this->get_serverdetails;"
                                     }
<div id="server_details>

Die function="blubb" müsst da noch raus - und wieso die hochkommas? damit er die variable übergibt?

Also wir brauchen für viele Fälle ein wenig AJAX:
- update eines DIVs
- Anzeigen des Loaders ( true/false )
- Übergabe eines JS Funktionsnamens, der mit dem Response arbeiten kann...
- ...

Code:

{ajax_update
                   url = 'index.php?mod=serverlist&action=get_serverdetails'
                   update_id = "server_details"                                     
                   params = "server_id=`$server.server_id`"
                   show_loader = true
                   loader_id = 'myDivLoader'
                   pre_js_func = 'myPreprocessingJS'
                   post_js_func = 'myPostprocessingJS'
}

sowas in die richtung

[Jens-A. Koch]

[ Funktionsübersicht - smarty_ajax.js - SmartyAjax ]

update: function(update_id, url, method, params, callback)
call: function(url, method, params, callback, params_func)
submit: function(form, params, callback)

Einzelnes DIV
Um ein einzelnes DIV mittels Ajax zu updaten, siehe oben.
Die Zuweisung der "update_id" zielt auf die DIV id, beschreibt also welches DIV geupdatet werden soll.

Mehrere DIVs
Einfach die Felder mit der fortlaufenden ID Nummer versehen.

update_id="server_details_`$server.server_id`"

<div id="server_details_$server.server_id">

Callbacks
Um Response- oder Folgefunktionen an durchgeführte Ajax-Handlung anzuschließen, kann grundsätzlich jeder der
genannten {ajax_befehle} um den Parameter callback=" beliebiger javascript funtkionsaufruf" ergänzt werden.

PRE-Funktionen
Gemeint sind Javascriptabläufe die vor Auslösung der Ajax-Handlung durchgeführt werden.
Diese können durch Behaviour sprich Kopplung der Javascriptfunktion an die id, den tag - sprich schlichtweg das Element ausgelöst werden.

Klassischer Kurzablauf:

TRIGGER
1. onklick -> div mit id

PRE
2. behaviour -> javascript der id auslösen
3. javascript ausführen -> farbe grün

AJAX
4. ajax handlung ausführen

POST
5. callback ->  javascript der ajax handlung auslösen
4. javascript -> farbe auf normal faden

Aktivitäts-Anzeige [ smarty_ajax.js - SmartyAjax.Process ]
Der Ajax Protokollzustand (onReadyState->1 = Verarbeitung) kann mit id="ajax-process" angezeigt werden.
Dazu ein <div id="ajax-process"></div> erstellen.


Messages [ smarty_ajax.js - SmartyAjax.Messages ]
Anzeige von Messages, Warnings, Errors

<div id="messages">
<p id="messages-title"></p>
<ul id="messages-list"></ul>
</div>

[xsign.dll]

Ok - das ein wenig abstrakt - mach einfach mal nen Bsp. Ready, was alles in etwa vereint und poste das mal hier oder gib nen commit