Unobtrusive Javascript Ajax Request

Unobtrusive Javascript mit Ajax ist meiner Meinung nach eines der wichtigsten Themen. Aber worum geht es bei "Unobtrusive" eigentlich? Es geht darum, dass du Javascripts in deine Html-Webseite einbaust ohne das die kleinen Javascript Helferlein sichtbar sind. Wer mit unobtrusive javascript bereits vertraut ist, kann den Einführungsblock gerne überspringen.

Ein konkretes einfaches Beispiel:

<a onclick="jybrid.exe('myRegisteredMethod',{'myParam':'myValue'});" href="#0">Bad Practice</a>

In diesem Beispiel wird eine onclick direkt in den Html-Tag eingegeben. Das mag zwar praktisch und einfach sein, sieht aber doof aus.

Excursion in Html-Css um mein Ansinnen zu verdeutlichen.

Irgendwann wurde ein Trend "Trennung von Quellcode und Design" eingeläutet. Das Konzept sah so aus, dass keine hard-coded expressions, wie es das style attribute ist mehr verwendet werden sollen und statt dessen lieber mit externen Css-Dateien gearbeitet wird.

Von:

<a style="background: red" class="styleCanNotBeOverwritten">Bad Practice</a>

Egal welche Css-Klasse wir dem voran gegangenen Beispiel einfügen. Background:red; bleibt red.

Nach:

/** file:style.css **/
.myRedClass{background: red;}
<a class="myRedClass" >Good Practice</a>

Nun wieder zurück in die Ajax-Welt: Hier haben wir also nach wie vor eine Javascript-Expression in unserem Html-Code.

<a onclick="jybrid.exe('myRegisteredMethod',{'myParam':'myValue'});" href="#0">Bad Practice</a>

Mit der Jybrid Ajax-Bauweise lassen wir den onclick-kram einfach weg und verwenden das in Html5 neu dazu gekommene "data-" Attribute. Es ist wohl selbstredend das alle ajax-attribute für jybrid data-jybrid- heißen.

Und siehe da, kein onclick="" attribute mehr in dem Html-Tag. Ebenso sind die data-jybrid-* attribute nicht ausführbar. Es sind ganz einfache Text-Einträge.

<a data-jybrid-exe="myRegisteredMethod" data-jybrid-params="{'myParam':'myValue'}" href="#0">Better Practice</a>

Dein Webdesigner bedankt sich bestimmt dafür ;-) Soviel Kurzeinführung in unobtrusive javascript. In diese Materie tiefer einzusteigen macht für jybrid relativ wenig Sinn, da mit jybrid das Problem mit dem onclick=""(natürlich auch andere javascript-event attribute) gelöst ist. Jybrid soll nach wie vor als Werkzeug dienen mit dem man Aufgaben löst und nicht Probleme erörtert.

Für die einfachste Version müssen die folgenden Schritte ausgeführt werden:

  • einen Ajax-Request,vor dem/während des initialen Page-Load registrieren
  • unobtrusive setzen. Ohne Parameter unobtrusiveAdd() versucht jybrid auf jedes geklickte Element zu regieren.

Observe all "onclick" elements inside the Html-Document

<?php 
Factory::register('myRegisteredMethod');
Jybrid\Unobtrusive\Request::unobtrusiveAdd();
?>

Observe all "onclick" elements inside the '.myExistingHtml-Area' - Html-Tag

<?php 
Factory::register('myRegisteredMethod');
Jybrid\Unobtrusive\Request::unobtrusiveAdd('.myExistingHtml-Area');
?>

Observe all "mouseover" elements inside the '.myExistingHtml-Area' - Html-Tag

<?php 
Factory::register('myRegisteredMethod');
Jybrid\Unobtrusive\Request::unobtrusiveAdd('.myExistingHtml-Area','mouseover');
?>

Unobtrusive Ajax mit

Und im Html-Code data-jybrid-exe="myRegisteredMethod"

<a data-jybrid-exe="myRegisteredMethod"  href="#0">simple Version of unobtrusive</a>

data-jybrid-params="{'myParam':'myValue'}"

Die erweiterte Bauweise mit zusätzlichen Parametern

<a data-jybrid-exe="myRegisteredMethod" data-jybrid-params="{'myParam':'myValue'}" href="#0">Better Practice</a>

data-jybrid-form="formName"

Die erweiterte Bauweise mit der ein Formular übertragen werden kann

<a data-jybrid-exe="myRegisteredMethod" data-jybrid-form="formName" href="#0">Better Practice with ajax submit form</a>

data-jybrid-flags="stop"

Die erweiterte Bauweise mit der das Event-Verhalten von javascript beeinflusst wird. In diesem Beispiel wird die Ausführung des a href="" unterbunden.

<a data-jybrid-exe="myRegisteredMethod" data-jybrid-flags="stop">Better Practice with ajax submit form</a>
Die unobtrusive ajax option wurde bereits während des initialen page-loads im javascript/html verankert
Dies bedeutet auch, dass wenn per Ajax ein weiterer Button nachgeladen wird, dieser Button automatisch auch unobtrusive funktioniert.

```html
<a data-jybrid-exe="myRegisteredMethod" data-jybrid-params="{'anParam':'myOtherValue'}" href="#0">Ajax Loaded Button</a>

Jybrid soll dem damaligen xajax-handling für die Programmierung ähnlich bleiben und javascript weitestgehend mit PHP programmierbar/steuerbar machen.

Liste der ajax unobtrusive attributes für jybrid

  • data-jybrid-exe="myRegisteredMethod"
  • data-jybrid-params="quoted Json Object"
  • data-jybrid-form="formName"
  • data-jybrid-flags="stopImmediatePropagation,preventDefault,stopPropagation,stop"

Verwendung von ajax unobtrusive attributes via PHP

// Compiling the unobtrusive exe attribute
echo Unobtrusive::attribExe('testing_post'); //data-jybrid-exe="testing_post"
// Compiling the unobtrusive "getFormValues" attribute
echo Unobtrusive::attribForm('myForm'); //data-jybrid-form="myForm"
// Compiling the unobtrusive parameters attribute
echo Unobtrusive::attribParams(['task' => 'removeSomething']); // data-jybrid-params="{"task":"removeSomething"}"
// Compiling the unobtrusive javascript flags attribute
echo Unobtrusive::attribFlags('preventDefault,stopPropagation'); //data-jybrid-flags="preventDefault,stopPropagation"

Ajax Unobtrusive Javascript with object orientated PHP

$generalButton = Button::gi('testing_post')
                       ->addParameter('task', 'removeSomething')
                       ->setGetFormValues('myForm')
                       ->addUnobtrusiveFlag('preventDefault')
                       ->addUnobtrusiveFlag('stopPropagation');

echo $unob = $generalButton->renderUnobtrusive(); 
// data-jybrid-exe="testing_post" data-jybrid-form="myForm" data-jybrid-params="{"task":"removeSomething"}" data-jybrid-flags="preventDefault,stopPropagation"

Full example

<a <?php echo $unob ?> class="button is-small is-secondary">unobtrusive object-orientated attributes</a>
// <a data-jybrid-params="{&quot;task&quot;:&quot;removeSomething&quot;}" data-jybrid-form="myForm" data-jybrid-flags="preventDefault,stopPropagation" data-jybrid-exe="testing_post" class="button is-small is-secondary" href="">unobtrusive object-orientated attributes</a>

have a look into the security notes