Wikizone - Benutzerbeiträge [de]

Google Maps API - Programmieren für Google Maps

2013-04-02T18:24:53Z

Kholja: /* Links */

Die folgenden Code Beispiele basieren i.d.R. auf der Google API Version3, bei der kein API Key mehr benötigt wird.

== Links ==
Dokumentation Google Maps API
[[https://developers.google.com/maps/documentation/javascript/]]

Google Group zu Google Maps
http://groups.google.com/group/google-maps-js-api-v3

Developer Dokumentation von Apple
http://developer.apple.com/webapps/docs/documentation/AppleApplications/Reference/SafariWebContent/Introduction/Introduction.html

Android Dokumentation
http://developer.android.com/

Code Completion (Intellisense) für Google Maps API
https://gmapvsdoc.codeplex.com/
[[Datei:Gmapvsdoc3.v1.zip]]

=== API Links ===
Google Maps API-Familien (auf deutsch) http://code.google.com/intl/de-DE/apis/maps/

Geocodierung: http://code.google.com/intl/de-DE/apis/maps/documentation/javascript/services.html#Geocoding

Ereignisse (Events): http://code.google.com/intl/de-DE/apis/maps/documentation/javascript/events.html

== Snippets ==
[[Google Maps - Snippets]]
=== Weiterführende und fortgeschrittene Techniken für Google Maps ===
[[Google Maps - Benutzerdefinierte Stile]]

[[Google Maps - eigene Marker und Symbole]]

Hier kommen Links rein...

=== Position des Nutzers bestimmen ===
http://code.google.com/intl/de-DE/apis/maps/documentation/javascript/basics.html#DetectingUserLocation (11/2011)

Google liefert folgendes Code Beispiel. Dabei wird zuerst getestet ob der Browser die HTML5 Geocoding Spezifikation des W3C unterstüzt (http://dev.w3.org/geo/api/spec-source.html). Wenn nicht wird Google Gears getestet und ansonsten eine Fehlermeldung ausgegeben.

<pre>
// Note that using Google Gears requires loading the Javascript
// at http://code.google.com/apis/gears/gears_init.js

var initialLocation;
var siberia = new google.maps.LatLng(60, 105);
var newyork = new google.maps.LatLng(40.69847032728747, -73.9514422416687);
var browserSupportFlag = new Boolean();

function initialize() {
var myOptions = {
zoom: 6,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

// Try W3C Geolocation (Preferred)
if(navigator.geolocation) {
browserSupportFlag = true;
navigator.geolocation.getCurrentPosition(function(position) {
initialLocation = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
map.setCenter(initialLocation);
}, function() {
handleNoGeolocation(browserSupportFlag);
});
// Try Google Gears Geolocation
} else if (google.gears) {
browserSupportFlag = true;
var geo = google.gears.factory.create('beta.geolocation');
geo.getCurrentPosition(function(position) {
initialLocation = new google.maps.LatLng(position.latitude,position.longitude);
map.setCenter(initialLocation);
}, function() {
handleNoGeoLocation(browserSupportFlag);
});
// Browser doesn't support Geolocation
} else {
browserSupportFlag = false;
handleNoGeolocation(browserSupportFlag);
}

function handleNoGeolocation(errorFlag) {
if (errorFlag == true) {
alert("Geolocation service failed.");
initialLocation = newyork;
} else {
alert("Your browser doesn't support geolocation. We've placed you in Siberia.");
initialLocation = siberia;
}
map.setCenter(initialLocation);
}
}
</pre>

=== Sensorparameter einstellen ===

Die Anwendung muß angeben ob sie einen Sensor zur Positionsbestimmung benutzt. Z.B. der GPS Empfänger in einem Handy. Wenn nicht muß trotzdem "false" übergeben werden.

<pre>
#
# Example using sensor when loading the Maps JavaScript API
#
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true">
</pre>

=== Optimierungen für Mobilgeräte ===
http://code.google.com/intl/de-DE/apis/maps/documentation/javascript/basics.html#Mobile

Umgebender Div Container (hier mapdiv) mit width:100%. Bei älteren Desktop Browsern kann dies aber zu Schwierigkeiten führen.

Sie können iPhones und Android-Geräte anhand der navigator.userAgent-Eigenschaft im DOM erkennen:
<pre>
function detectBrowser() {
var useragent = navigator.userAgent;
var mapdiv = document.getElementById("map_canvas");

if (useragent.indexOf('iPhone') != -1 || useragent.indexOf('Android') != -1 ) {
mapdiv.style.width = '100%';
mapdiv.style.height = '100%';
} else {
mapdiv.style.width = '600px';
mapdiv.style.height = '800px';
}
}
</pre>
Dadurch können Sie das Layout für bestimmte Geräte wie in diesem Beispiel verändern und beispielsweise den verfügbaren Platz auf dem Display für jedes Gerät anpassen.

Das iPhone akzeptiert das folgende <meta>-Tag:

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

Diese Einstellung gibt an, dass diese Karte im Vollbildmodus angezeigt werden soll und ihre Größe vom Nutzer nicht geändert werden kann. Android-Geräte mit Softwareversion 1.5 (Cupcake) unterstützen diese Parameter ebenfalls. Für den iPhone-Browser Safari muss dieses <meta>-Tag im <head>-Element der Seite enthalten sein.

=== Lokalisierung einer v3 App (Sprachanpassung) ===
==== Sprachlokalisierung und Anpassung der Texte - language Parameter====
Normalerweise nicht notwendig weil die Sprache des Browsers verwendet wird. Wenn doch dann mit dem Language Parameter.

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=de">

==== Gebietslokalisierung - region Parameter ====
Normalerweise wird die Domain der Homepage für die Regionserkennung verwendet. Manchmal möchte man die Region verändern damit Google Maps richtig gewichtet. Z.B. kann die Suche nach dem Ort Toledo den Ort in Spanien finden oder in den USA. Wenn der Region Parameter auf es steht liefert er stets den Ort in Spanien.

'''Beispiel'''
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&region=GB">

=== Richtige API Version laden - der v Parameter ===
http://code.google.com/intl/de-DE/apis/maps/documentation/javascript/basics.html#Versioning

Wenn man den Parameter nicht nutzt, wird immer die aktuellste Version benutzt. Dies ist in einer Produktivumgebung nicht unbedingt wünschenswert, weil manche Funktionen plötzlich unter umständen nicht mehr funktionieren.

'''Beispiel'''

http://maps.google.com/maps/api/js?v=3.1&sensor=true_or_false

=== Kartentyp ändern ===
Kartentypen werden im Map options-Objekt der Karte mithilfe der mapTypeId-Eigenschaft festgelegt.

Die folgenden Kartentypen sind im Google Maps-API verfügbar:

MapTypeId.ROADMAP zeigt die Standard-Straßenkartenansicht.
MapTypeId.SATELLITE zeigt Google Earth-Satellitenbilder.
MapTypeId.HYBRID zeigt eine Mischung aus der normalen und der Satellitenansicht.
MapTypeId.TERRAIN zeigt eine physische Karte an, die auf Geländeinformationen basiert.

Sie können den Kartentyp einer Karte ändern, indem Sie die setMapTypeId()-Methode der Karte aufrufen.

== Wichtige Google Maps Objekte ==
Wichtige Objekte anhand von Beispiel Definitionen:

=== LatLng Objekt ===
var myLatlng = new google.maps.LatLng(-34.397, 150.644);

=== Options Objekt ===
<pre>
var myOptions = {
zoom: 8,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
</pre>

Wird normalerweise nicht direkt erzeugt sondern als "Literalobjekt" (also als Zeichenfolge) definiert und dann direkt im Map Objekt verwendet und implizit erzeugt (siehe Map Objekt)

==== Wichtige Optionen ====
Einige oft benötigte Optionen und was sie machen:

http://code.google.com/intl/de-DE/apis/maps/documentation/javascript/reference.html#MapOptions

* ''zoom'' - anfänglicher Zoom Level (0 = World) '''Erforderlich'''
* ''mapTypeId'' - anfängliche mapTypeId der Karte. '''Erforderlich'''
* ''center'' - anfängliches Kartenzentrum. '''Erforderlich'''
* ''disableDefaultUI'' - damit kann man die Standard Bedienelemente ausschalten (true,false). Man kann fast alles auch einzeln ein und ausschalten (Maussteuerung, Tastatursteuerung, verschieben der Karte, etc.). Siehe Link oben.
* ''navigationControlOptions'' Anfängliche Anzeigeoptionen für die Navigationssteuerung (position, style).

=== Map Objekt ===
Das Zentrale Objekt.
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

=== Marker Objekt ===
Benötigt als Parameter eine Position und optional das Map Objekt. Wenn dies nicht vorhanden ist kann man den Marker später mit ''setMap'' hinzufügen. Mit setMap(null) kann man den Marker entfernen.

Standardmäßig haben die Marker einen click Listener.

'''Beispiel - Marker hinzufügen'''
<pre>
// Marker für die Achalm
var posAchalm = new google.maps.LatLng(48.493978,9.244276);
var marker = new google.maps.Marker({
position: posAchalm,
map: map,
title:"Achalm"
});
</pre>

=== Info Window Objekt ===
Das folgende Beispiel definiert ein InfoWindow, welches an einen Marker ("marker") gehängt wird und sich bei Klick öffnet.
Es funktioniert also mit dem obigen Marker Beispiel zusammen.
<pre>
// INFOWINDOW
// Inhalt festlegen
var contentString = '<div id="content">'+
'<div id="siteNotice">'+
'</div>'+
'<h1 id="firstHeading" class="firstHeading">Achalm</h1>'+
'<div id="bodyContent">'+
'<p>Die <b>Achalm</b>, ist der Hausberg der Stadt Reutlingen, ' +
'am Rande der schwäbischen Alb gelegen. '+
'<p>Attribution: Achalm, <a href="http://de.wikipedia.org/wiki/Achalm">'+
'Achalm in der Wikipedia</a>.</p>'+
'</div>'+
'</div>';
// Fenster erzeugen...
var infowindow = new google.maps.InfoWindow({
content: contentString,
maxWidth: 280
});
// Klick-Listener an Marker hängen der das Fenster öffnet.
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
</pre>

== Google Maps Beispiele ==
=== Komplettes Anwendungsbeispiel (Horex) ===
Interessant mit ein paar netten Tricks
<pre>
var map, mapOptions, panoMap, resultBounds, timeout, markers = [];
function initialize() {
// MAP
//var myMapDiv = document.getElementById("map_canvas");
// or with jQuery
var myMapDiv = $("#map_canvas")[0];
var latlng = new google.maps.LatLng(51.4634, 9.5581);
// we need a ID for our new maptype
var HOREX_MAPTYPE_ID = 'HOREX';
var myOptions = {
zoom: 6,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
// new control button to select the maptype id
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, HOREX_MAPTYPE_ID]
}
};
var map = new google.maps.Map(myMapDiv, myOptions);
// MAP STYLING
// Neue Map Style Definition
//#D1A456
//#565451
var stylez =
[
{ // Strassen
featureType: "road",
stylers: [
{ visibility: "off" }
]
},
{ //Bahn
featureType: "transit",
stylers: [
{ visibility: "off" }
]
},
{ // POI
featureType: "poi",
stylers: [
{ visibility: "off" }
]
},
{ // Landflächen
featureType: "landscape",
stylers: [
{ visibility: "on" },
{ hue: "#D1A456" },
{ saturation: 65 },
{ lightness: -33 },
{ gamma: 1 }
]
},
{ // Landflächen besiedelung
featureType: "landscape.man_made",
stylers: [
{ visibility: "off" }
]
},
{ // Landflächen natur
featureType: "landscape.natural",
stylers: [
{ visibility: "off" }
]
},
{ // Grenzen allgemein
featureType: "administrative",
elementType: "geometry",
stylers: [
{ lightness: -50},
{ saturation: 0 },
{ gamma: 1 },
{ hue: "#565451" },
{ visibility: "on" }
]
},
{ // Ländergrenzen
featureType: "administrative.country",
elementType: "geometry",
stylers: [
{ hue: "#FFFFFF" },
{ saturation: 100 },
{ lightness: 100 }
]
},
{ // Bundesländer label
featureType: "administrative.province",
elementType: "labels",
stylers: [
{
visibility: "on"
}
]
},
{ // Bundesländer label
featureType: "administrative.locality",
elementType: "labels",
stylers: [
{ visibility: "simplified" },
{ invert_lightness: true },
{ hue: "#565451" },
{ gamma: 1 },
{ saturation: 20 },
{ lightness: 25 }
]
},
{ // Wasser
featureType: "water",
stylers: [
{ visibility: "on" },
{ hue: "#cfd1d2" },
{ lightness: 50 },
{ saturation: -100 },
{ gamma: 1 }
]
}
];
// Map Zuordnung und Name des Stils
var styledMapOptions = {
map: map,
name: HOREX_MAPTYPE_ID
}
var horexMapType = new google.maps.StyledMapType(stylez,styledMapOptions);
// Style auswählen
map.mapTypes.set(HOREX_MAPTYPE_ID, horexMapType);
map.setMapTypeId(HOREX_MAPTYPE_ID);
// Zoom auf Deutschland
//geocoder = new google.maps.Geocoder();
//findAddress(map,"Germany");
// Marker setzen und in Array speichern
var markers=setMarkers(map);
}
function setMarkers(map) {
// This will hold all the markers for the clustering
// Get the JSON data that shall be mapped.
$.getJSON("http://www.horex.com/fileadmin/js/sampledata/horex.json", function(json){
//Make sure we have a markers array, holding some data.
//alert(json.markers.length);
if (json.markers && json.markers.length){
//New bounds object for the total results' bb.
var bounds = new google.maps.LatLngBounds();
//Loop through the JSON array's markers array.
$.each(json.markers, function(i){
///'this' refers to the array element of the current loop iteration index.
var data = this;
// Object position
var point = new google.maps.LatLng(data.lat,data.lng)
// New Object -> extend Bounds
bounds.extend(point);
// Data object that shall be assigned to the marker object.
var marker_data = {
"id": data.id,
"name": data.name,
"title": data.title,
"street": data.street,
"city": data.city,
"country": data.country,
"telephone":data.telephone,
"postcode":data.postcode,
"www": data.www,
"email": data.email,
"lat": data.lat,
"lng": data.lng,
"category": data.category,
"icon": data.icon,
"details": data.details
};
/**
* New google.maps.Marker object for 'this' Object.
**/
var marker = new google.maps.Marker({
map: map,
icon: 'http://www.horex.com/fileadmin/js/'+data.icon,
flat: true,
category: data.category,
title: unescape(data.title),
data: marker_data
});
// Map markers with raising timeout (just eye-catching).
//$.doTimeout(i*300, function(){
marker.setValues({
position: point,
//animation:google.maps.Animation.DROP
});
//}); i++;
// Push the marker object to the markers array.
markers.push(marker);
// Add event listener that will trigger the infoWindow.
google.maps.event.addListener(marker, "click", function(){
// panTo just looks 'nicer' than setCenter.
map.panTo(marker.position);
// Add a delay for a smoother pop-up animation.
$.doTimeout(600, function(){
// Call the custom info Window function.
showDetails(marker.data);
/**
* Workaround for an issue that loads some tiles
* in plain grey when initializing a map and on-
* screen of that map object are timed very close.
**/
google.maps.event.trigger(panoMap, 'resize');
});// End doTimeout callback function
});// end eventListener for Marker
});// End JSON Loop
// Save all markers' bounding box to a global variable.
resultBounds = bounds;
// Set the viewport to optimal fit to all results' bb.
//map.fitBounds(resultBounds);
var actZoom = map.getZoom();
map.setZoom(6);
} // end if json markers
/*
// MarkerClusterer
var markerClusterer = null;
var markerClustererStyles = [{
url: 'http://www.horex.com/fileadmin/js/images/m1.png',
height: 35,
width: 35,
textColor: '#ffffff',
textSize: 10
}, {
url: 'http://www.horex.com/fileadmin/js/images/m2.png',
height: 45,
width: 45,
textColor: '#ffffff',
textSize: 11
}, {
url: 'http://www.horex.com/fileadmin/js/images/m3.png',
height: 55,
width: 55,
textColor: '#ffffff',
textSize: 12
}]
var markerClustererOptions = {
gridSize: 35,
maxZoom: 10,
styles: markerClustererStyles
};
var markerCluster = new MarkerClusterer(map,markers,markerClustererOptions);
*/
});
return markers;
}
/**
* Function showDetails
* @author: Stephan Schmitz <eyecatchup@gmail.com>
*
* @description: Using jQueryUI modal dialogs instead of InfoWindows, to
* show the marker object's data details. Dialog overlays
* contain all custom data that have been assigned to the
* marker and also a street-view map of the markers point
* to enhance the overview. (If there is no streetview
* available, a standard map will be shown.)
**/
function showDetails(data){
// Objects position as google.maps.LatLng object.
var point = new google.maps.LatLng(data.lat,data.lng);
// Set the options for the info window map object to be created.
/*
var panoMapOptions = {
center: point,
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
*/
// Initialize the info window map.
/*
panoMap = new google.maps.Map($('#panoMap')[0],
panoMapOptions);
*/
// Set the options for the google.maps.StreetViewPanorama.
/*
var panoramaOptions = {
position: point,
pov:{
heading: 34,
pitch: 10,
zoom: 0}};
*/
// Initialize the google.maps.StreetViewPanorama.
/*
var panorama = new google.maps.StreetViewPanorama(
$('#panoMap')[0],panoramaOptions);
*/
// Set the Streeview Overlay.
//panoMap.setStreetView(panorama);
/**
* The 'template' for the data, shown in the info window.
**/
var br = '<br>';
$('#data').empty()
.html(
'<div class="headerimg"><img src="http://www.horex.com/fileadmin/js/images/vertrieb_logo.gif"></div>'+
'<div class="headline">'+data.title+'</div>'+
'<div class="headline2">'+data.name+'</div>'+
'<div>'+data.postcode+' '+data.city+'</div>'+br+
'<div>'+data.street+'</div>'+
'<div>Tel.: '+data.telephone+'</div>'+
'<div>E-Mail: <a href="mailto:'+data.email+'">'+data.email+'</a></div>'+
'<div>Website: <a href="http://'+data.www+'" target="_blank">'+data.www+'</a></div>'+
'<div class="geosearch-details">'+data.details+'</div>'+
'<div class="map-printlink" style="cursor:pointer; width:21px;" onclick="window.print();"><img width="21" height="16" border="0" title="drucken" alt="drucken" style="margin-top: 20px;" src="http://www.horex.com/fileadmin/templates_v2/media/print.png"></div>'+
'<div class="route"><strong>Route finden</strong>'+br+
'<form id="routefinder" action="http://maps.google.de" method="GET" target="_blank">'+
'<input type="text" id="saddr" name="saddr" value="Abfahrtsort" onclick="if(this.value==\'Abfahrtsort\')this.value=\'\';"/>'+
'<input type="hidden" id="daddr" name="daddr" value="'+data.city+','+data.street+'"/>'+br+
'<input type="submit" class="route_button" value="Absenden"></form></div>'
);
/**
* Set the dialog options for the info windows.
**/
$('#dialog').dialog({
width: 675,
modal: true,
position: ['center','center'],
title: " ",
autoOpen: true,
closeOnEscape:true,
draggable: true,
show: "slide",
hide: "slide"
});
}
// Zoom auf Adresse Funktion (mit geocoder siehe init)
function findAddress(map,address) {
if (!address)
var address=document.getElementById("countryselect").value;
if ((address != '') && geocoder) {
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (status != google.maps.GeocoderStatus.ZERO_RESULTS) {
if (results && results[0] && results[0].geometry && results[0].geometry.viewport)
map.fitBounds(results[0].geometry.viewport);
} else {
alert("No results found");
}
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
}
/**
* jQuery doTimeout: Like setTimeout, but better! - v1.0 - 3/3/2010
* http://benalman.com/projects/jquery-dotimeout-plugin/
*
* Copyright (c) 2010 "Cowboy" Ben Alman
* Dual licensed under the MIT and GPL licenses.
* http://benalman.com/about/license/
**/
(function($){var a={},c="doTimeout",d=Array.prototype.slice;$[c]=function(){return b.apply(window,[0].concat(d.call(arguments)))};$.fn[c]=function(){var f=d.call(arguments),e=b.apply(this,[c+f[0]].concat(f));return typeof f[0]==="number"||typeof f[1]==="number"?this:e};function b(l){var m=this,h,k={},g=l?$.fn:$,n=arguments,i=4,f=n[1],j=n[2],p=n[3];if(typeof f!=="string"){i--;f=l=0;j=n[1];p=n[2]}if(l){h=m.eq(0);h.data(l,k=h.data(l)||{})}else{if(f){k=a[f]||(a[f]={})}}k.id&&clearTimeout(k.id);delete k.id;function e(){if(l){h.removeData(l)}else{if(f){delete a[f]}}}function o(){k.id=setTimeout(function(){k.fn()},j)}if(p){k.fn=function(q){if(typeof p==="string"){p=g[p]}p.apply(m,d.call(n,i))===true&&!q?o():e()};o()}else{if(k.fn){j===undefined?e():k.fn(j===false);return true}else{e()}}}})(jQuery);
</pre>
Beispiele auf Google: http://code.google.com/intl/de-DE/apis/maps/documentation/javascript/examples/index.html
=== Simple Map ===
<pre>

<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=set_to_true_or_false"></script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}

</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>

</pre>

Datei:Gmapvsdoc3.v1.zip

2013-04-02T18:23:36Z

Kholja: Google Maps Code Completion für Aptana Studio und VisualStudio

Google Maps Code Completion für Aptana Studio und VisualStudio

AJAX in TYPO3 Extensions

2012-11-05T09:34:29Z

Kholja: /* eID AJAX mit jQuery und JSON Beispiel */

== Übersicht ==
=== Links ===
http://prototypejs.org/learn/introduction-to-ajax

http://www.interaktionsdesigner.de/2009/01/04/asynchrone-datenubertragung-zwischen-typo3-und-jquery/

=== Typo3 Skripte ohne Rendering ===
Ein Ajax Request wird in den meisten Fällen über ein JavaScript abgesetzt von einem Serverskript (PHP) verarbeitet und die Antwort als xml oder JSON Objekt zurückgegeben.

Um das PHP-Skript zu nutzen und zugleich die ganzen '''Rendering und Caching-Mechanismen von Typo3 zu vermeiden''' könnte man irgend ein php Skript nutzen. Andererseits wollen wir die Typo3 Funktionalitäten wie dbal Datenbankabfrage etc. nutzen. Deshalb stellt Typo3 den '''eid Mechanismus''' zur Verfügung (siehe unten). Mit diesem wird das '''Seitenrendering frühzeitig abgebrochen''' und der Request direkt an ein Skript weitergegeben.

Eine weitere Möglichkeit außer dem eid Mechanismus findest du unter [[Typo3 - alternatives Rendering]]

=== Schnelle Antwort ===
Dieses Skript kann sich nun ausschließlich um die Anfrage kümmern und das Ergebnis direkt zurückgeben, welches wiederum die Daten in die Seite einhängt.

== Der eid Mechanismus und AJAX ==
Quellen: http://www.typo3-tutorials.org/tutorials/extensions/eid-mechanismus.html (10.3.2010 Artikel von 2007)

http://www.blogix.net/2009/02/08/typo3-eid-oder-daten-mit-ajax-anfordern/

eID steht für Extension ID
Der eID Mechanismus ist der seit der Version 4.x dabei und kann als '''alternative Rendering Engine''' betrachtet werden.

Angesprochen wird er über einen GET oder POST Parameter. Sobald '''eID als Parameter in der URL''' vorhanden ist (zB. ''www.domain.de/?eID=schuesselwort'') wird der normaler Rendering Prozess sehr früh abgebrochen und auf ein Script weitergeleitet was wir selber programmieren müssen. Da der normale Rendering Prozess so früh abgebrochen wird kommt es auch noch zu keiner Ausgabe. Es wird nichts gecachet und kein HeaderCode ect generiert. Der eID Mechanismus kann also super im Zusammenhang mit AJAX verwendet werden.

Wollen wir uns einmal die index_ts.php (typo3/sysext/cms/tslib/) Zeile 127 bis 136 ansehen.

<pre>
<?php
// *********************
// Look for extension ID which will launch alternative output engine
// *********************
if ($temp_extId = t3lib_div::_GP('eID')) {
if ($classPath = t3lib_div::getFileAbsFileName($TYPO3_CONF_VARS['FE']['eID_include'][$temp_extId])) {
require_once(PATH_tslib.'class.tslib_eidtools.php');
require($classPath);
}
exit;
}
?>
</pre>

Hier wird überprüft ob der Schlüssel eID als Get/Post Variable vorhanden ist und falls ja, wird der normale Renderingprozess abgebrochen und auf unser Script verwiesen. Doch woher weiss TYPO3 jetzt wo unser Script liegt ?

Das sagen wir Ihm über $TYPO3_CONF_VARS['FE']['eID_include'][$temp_extId].
Wir müssten entweder in die localconf.php oder in eine ext_localconf.php einer Extension folgendes Eintragen
<pre>
<?php
// Zugriff nur von Typo3 aus:
if (!defined ('TYPO3_MODE')) {
die ('Access denied.');
}
// Registrierung der eid Scripts
$TYPO3_CONF_VARS['FE']['eID_include']['schluesselwort'] = 'EXT:myExtKey/eid/meinScript.php'; ?>
?>
</pre>
Steht jetzt also in der Adresse ''www.domain.de/?eID=schluesselwort'' geht er in die erste if Abfrage und sieht das ''$TYPO3_CONF_VARS['FE']['eID_include'][$temp_extId]'' vorhanden ist und '''speichert''' 'EXT:myExtKey/meinScript.php' in die Variable ''$classPat''h. '''Danach includiert er die Klasse eidtools und unsere eigene'''.

Da unser Script noch leer ist bekommen wir eine weisse Seite angezeigt in der auch der komplette Quelltext leer ist.

Um in unserem Script nun ein FEUSER Objekt zu haben und eine aktive DB Verbindung schreiben wir
<pre>
<?php
$feUserObj = tslib_eidtools::initFeUser(); // Initialize FE user object
tslib_eidtools::connectDB(); //Connect to database
// ...
?>
</pre>
Die erste Zeile '''initialisert den FrontentUser''' und gibt uns diesen als Objekt zurück.

Die zweite Zeile stellt eine '''Verbindung zur Datenbank''' her.

Im Weiteren können wir ganz normal auch TYPO3 Funktionalitäten benutzen und unseren eigenen Renderingablauf schreiben.

Um auch '''zB auf alle piBase Funktionen zurückzugreifen''' können wir uns ganz einfach eine Klasse erstellen die von dieser Erbt

<pre>
<?php
require_once(PATH_tslib.'class.tslib_pibase.php');

class unsereKlasse extends tslib_pibase {
function main(){
$feUserObj = tslib_eidtools::initFeUser(); // Initialize FE user object
tslib_eidtools::connectDB(); //Connect to database
echo("hallo welt");
}
}

$output = t3lib_div::makeInstance('unsereKlasse');
$output->main();
?>
</php>
</pre>
Das war es soweit, wenn Ihr noch fragen dazu habt stellt Sie einfach über die Kommentarfunktion.

== eID AJAX mit jQuery und JSON Beispiel ==
Beispiel der Extension gbglossary
=== eID Parameter registrieren ===
'''ext_localconf.php'''
// Register eid
$TYPO3_CONF_VARS['FE']['eID_include']['gbglossaryeid'] = 'EXT:gbglossary/eid/class.gbglossary_eid.php';

Typo3 sucht nach der angegebenen Klasse wenn der Parameter
eID=gbglossaryeid in der URL angegeben wird.

=== PHP Klasse erstellen ===
Über die Klasse tx_gbglossary_eid holen wir uns alle Datensätze aus der Datenbank und geben Sie als JSON Objekt aus.

'''class.gbglossary_eid.php'''
<pre>
<?php
if (!defined ('PATH_typo3conf')) die ('Access denied: eID only.');
require_once(PATH_tslib . 'class.tslib_pibase.php');

class tx_gbglossary_eid extends tslib_pibase {
var $prefixId = 'tx_gbglossary_eid';// Same as class name
var $scriptRelPath = 'eid/class.tx_gbglossary_eid.php'; // Path to this script relative to the extension dir.
var $extKey = 'gbglossary';// The extension key.

function eid_main() {
$GLOBALS['TSFE']->fe_user = tslib_eidtools::initFeUser();
tslib_eidtools::connectDB();

// Create select
$select = '';
$dbFields = array(
'tx_gbglossary_terms.uid AS terms_uid',
'tx_gbglossary_terms.title AS terms_title'
);
foreach ($dbFields as $key => $value){
$select.=$value.', ';
}
$select = rtrim(rtrim($select),',');
// Create from (example for n:m JOIN)
$from = '';
$from = '
(
(
tx_gbglossary_terms LEFT OUTER JOIN tx_gbglossary_terms_topic_mm
ON tx_gbglossary_terms.uid = tx_gbglossary_terms_topic_mm.uid_local
)
LEFT OUTER JOIN tx_gbglossary_topic
ON tx_gbglossary_terms_topic_mm.uid_foreign = tx_gbglossary_topic.uid
)
';
// Create where
$where = '';
$where = "tx_gbglossary_terms.deleted=0 AND tx_gbglossary_terms.hidden=0";

$res = $GLOBALS['TYPO3_DB']->exec_SELECTquery(
$select,
$from,
$where,
$groupBy='',
$orderBy='',
$limit=''
);
$arrJSON = array();
while (($row = $GLOBALS["TYPO3_DB"]->sql_fetch_assoc($res))){
$arrJSON[]=$row;
}

// Wir geben der Anfrage ein JSON Objekt-Literal zurück
$ajax_return_data = json_encode($arrJSON);
header('Expires: Mon, 26 Jul 2000 03:00:00 GMT');
header('Last-Modified: ' . gmdate( "D, d M Y H:i:s" ) . 'GMT');
header('Cache-Control: no-cache, must-revalidate');
header('Pragma: no-cache');
header('Content-Length: '.strlen($ajax_return_data));
header('Content-Type: application/json; charset=UTF-8');
echo $ajax_return_data;
exit;
}
}

$extensionkey = t3lib_div::makeInstance('tx_gbglossary_eid');
$extensionkey->eid_main();

?>
</pre>

Der Test im Browser zeigt einen schönen JSON String mit den abgefragten Daten.

http://localhost/typo3_test/index.php?id=178&eID=gbglossaryeid

=== JSON Daten per jQuery AJAX holen und in der Webseite darstellen ===
jQuery macht das Handling einfach.

In unserer HP können wir so etwas bauen:
<pre>
<input id="myButton" type="button" value="AJAX-Test" />
<div id="myContainer"></div>
<script type="text/javascript">
$(document).ready(function() {
$("#myButton").click(function(){
$.getJSON("index.php?eID=gbglossaryeid", function(data){
$.each(data,function(key,obj){
$("#myContainer").append('<div>' + key + ' ' + obj.terms_title + '</div>');
});
});
});
} );
</script>
</pre>

Zuerst wird auf dem Button myButton ein Click Handler angelegt, der wiederum löst eine JSON Anfrage an unsere PHP Datei aus. Diese gibt den JSON String zurück. Der String wird in einer each Schleife durchlaufen und alle Titel werden in das Div myContainer geschrieben.

== eid ajax mit Prototype Beispiel ==
Bei diesem Beispiel gehen wir von einem normalen Frontend Plugin aus das z.B. mit dem Kickstarter erzeugt wird. Wir legen eine PHP-Klasse für die Bearbeitung der AJAX Anfrage an und eine JavaScript Datei mit den passenden Funktionen. Die PHP Datei wird in localconf registriert. Das Handling des AJAX Request überlassen wir der Prototype JavaScript Lib die in Typo3 schon dabei ist.

Diese Dateien bearbeiten wir:
<pre>
typo3conf/ext/myExtKey/
- ext_localconf.php
typo3conf/ext/myExtKey/eid/
- ajax.js
- class.myExtKey_eid.php
typo3conf/ext/myExtKey/pi1/
- class.myExtKey_pi1.php
</pre>

=== eID Datei ===
'''class.myExtkey_eid.php'''
<pre>
<?php
if (!defined ('PATH_typo3conf')) die ('Access denied: eID only.');
require_once(PATH_tslib . 'class.tslib_pibase.php');

class tx_myExtKey_eid extends tslib_pibase {
var $prefixId = 'tx_myExtKey_eid';// Same as class name
var $scriptRelPath = 'eid/class.tx_myExtKey_eid.php'; // Path to this script relative to the extension dir.
var $extKey = 'myExtKey';// The extension key.

function eid_main() {
$GLOBALS['TSFE']->fe_user = tslib_eidtools::initFeUser();
tslib_eidtools::connectDB();

// Hier beginnt unser Code
$res = 'Hallo Welt';
// Hier endet unser Code

// Wir geben der Anfrage ein XML Objekt zurück
$ajax_return_data = t3lib_div::array2xml(array('data'=>$res));
header('Expires: Mon, 26 Jul 2000 03:00:00 GMT');
header('Last-Modified: ' . gmdate( "D, d M Y H:i:s" ) . 'GMT');
header('Cache-Control: no-cache, must-revalidate');
header('Pragma: no-cache');
header('Content-Length: '.strlen($ajax_return_data));
header('Content-Type: text/xml');
echo $ajax_return_data;
exit;
}
}

$extensionkey = t3lib_div::makeInstance('tx_myExtKey_eid');
$extensionkey->eid_main();

?>
</pre>

Möchte man in diesem Skript nun auf '''Funktionen (z.B. Datenbank) aus dem TYPO3-Framework''' zurückgreifen, so muss man für die Instantiierung selbst sorge tragen. In der Datei ''typo3_src/typo3/sysext/cms/tslib/class.tslib_eidtools.php'' findet man vorgefertigte Methoden um auf die Daten eines FE-Users oder die Datenbank zugreifen zu können (Verwendung siehe im Code oben).

=== ext_localconf.php ===
Die '''Datei muß noch dem System bekannt gemacht werden'''. Dies tun wir in der '''ext_localconf.php''' indem wir folgende Zeile hinzufügen:

$TYPO3_CONF_VARS['FE']['eID_include']['myExtKeyeid'] = 'EXT:myExtKey/eid/class.myExtKey_eid.php';

Hiermit sagen wir dem System das wir gerne die Datei myExtKey_eid.php ausführen würden wenn der Parameter eID=myExtKeyeid übergeben wird.

=== Das Frontend Plugin ===
In unserem Frontent Plugin erzeugen wir einen div container mit der id ac (ajaxcontainer) diesen wollen wir später mit der Ausgabe des Ajax Scriptes füllen. Außerdem noch einen Knopf mit dem wir die Anfrage starten können.

'''class.myExtKey_pi1.php'''
<pre>
...
$content .= '
<div id="ac">ajaxcontainer</div>
<input onclick="getData()" id="myButton" type="button" value="AJAX" />
';
...
</pre>

Anmerkung: Statt dem onclick im Button, kann man auch Prototypes observe Funktion nehmen, dan kann man den Code komplett in der .js Datei verwalten.

=== JavaScript ===
Jetzt benötigen wir noch etwas JavaScript um die '''Anfrage vom FrontendPlugi'''n auszuführen:

'''JavaScript (ajax.js)'''
<pre>

function anfrage()
{
var myAjax = new Ajax.Request(
'index.php', // the Request goes to index.php
{
method: 'get', //get or post
parameters: 'eID=gbeventseid',
onComplete: show // after loading use the anzeige function
});
}

function show(orgRequest)
//
{
var xmldoc = orgRequest.responseXML; //use XML Object as answer
var result = xmldoc.getElementsByTagName("data")[0].firstChild.data;//datapart
$('ac').innerHTML = result;//drop the stuff in the div with id "ac"
}
</pre>

=== Eine Prise TypoScript ===
Wir benutzen wie gesagt das Prototype Lib. Unsere '''JavaScript Dateien''' müssen wir natürlich auch in das Frontend Plugin '''einbinden'''. Das machen wir z.B. ganz einfach über TypoScript

'''TypoScript'''
<pre>
page.includeJS.proto = typo3/contrib/prototype/prototype.js
page.includeJS.gbevents3 = EXT:gb_events/eid/ajax.js
</pre>

== Weitere Beispiele ==
Angewendet in der kleinen Extension gbflashauth. Über einen Flash Movie wird die url aufgerufen und zurückgegeben ob der User eingeloggt ist und mit welchem Namen.

<pre>
<?php
if (!defined ('PATH_typo3conf')) die ('Access denied: eID only.');
require_once(PATH_tslib . 'class.tslib_pibase.php');

class tx_gbflashauth_eid extends tslib_pibase {
var $prefixId = 'tx_gbflashauth_eid';// Same as class name
var $scriptRelPath = 'eid/class.tx_gbflashauth_eid.php'; // Path to this script relative to the extension dir.
var $extKey = 'gbflashauth';// The extension key.

function eid_main() {
$GLOBALS['TSFE']->fe_user = tslib_eidtools::initFeUser();
tslib_eidtools::connectDB();

// Hier beginnt unser Code

if(!empty($GLOBALS['TSFE']->fe_user->user)){
$uid = $GLOBALS['TSFE']->fe_user->user[uid];
$name = $GLOBALS['TSFE']->fe_user->user[name];
$firstname = $GLOBALS['TSFE']->fe_user->user[first_name];
$lastname = $GLOBALS['TSFE']->fe_user->user[last_name];
$email= $GLOBALS['TSFE']->fe_user->user[email];
$res="login=1"."&uid=".$uid."&firstname=".$firstname."&lastname=".$lastname;
}else{
$res = 'login=0';
}

//header('Expires: Mon, 26 Jul 2000 03:00:00 GMT');
header('Last-Modified: ' . gmdate( "D, d M Y H:i:s" ) . 'GMT');
header('Cache-Control: no-cache, must-revalidate');
header('Pragma: no-cache');
header('Content-Length: '.strlen($res));
//header('Content-Type: text/plain');
//echo $ajax_return_data;
echo $res;
exit;
}
}

$extensionkey = t3lib_div::makeInstance('tx_gbflashauth_eid');
$extensionkey->eid_main();

?>

</pre>

== Probleme mit cc_debug und JSON Objekten ==

von Tim Lochmüller im Adventskalender 2008

In letzter Zeit habe ich sehr oft mit AJAX und JSON gearbeitet. Leider gibt es dabei immer ein Problem mit cc_debug, weil sich dieser immer hinter die Ausgabe des JSON Codes klemmt und damit ein kaputtes JSON erzeugt. Nachdem ich heute mit meinem Kollegen Michael zusammen gesessen habe um dieses Problem zu lösen, sind wir auf eine sehr einfache Lösung gestoßen:

$GLOBALS['errorList']->clear();
die(json_encode($result));

Die Zeile 1 direkt vor der Ausgabe des JSON Codes eingebaut, verhindert, dass cc_debug noch seinen JavaScript-Code hinter her ausgibt. Und wer jetzt sagt: naje, ein die() oder exit() sollte es auch tun, der irrt sich. Versucht es gerne selber mal.

JQuery - AJAX

2012-11-05T09:25:38Z

Kholja: /* Datensätze aus einem JSON Objekt holen mit each */

== Wie funktioniert AJAX ? ==

Früher mußte man bei jeder Anfrage die Webseite komplett neu laden. Auch wenn nur ein kleiner Teil neu benötigt wird (z.B. ein Suchergebnis). Mit AJAX kann man Teile einer Website neu laden. Das funktioniert über ein JavaScript Objekt den sogenannten '''XML-HTTP Request''' oder kurz '''XHR'''. Dieser kommuniziert quasi am Browser vorbei mit dem Server.

Die alte Kommunikationsart ist Synchron: Eine Anfrage - eine Webseite. Die neue Art ist asynchron. Alle Eigenschaften zusammengefaßt spricht man von '''A'''synchronous '''J'''avaScript '''a'''nd '''X'''ML - AJAX

Übertragen wird immer Klartext, allerdings selten XML-Daten. Heute nutzt man eher HTML-Fragmente oder JSON Daten.

==jQuery und AJAX==
jQuery bietet eine gute AJAX Unterstützung, und macht es dem Programmierer leicht mit den Besonderheiten der verschiedenen Browser umzugehen.

== Datenanforderung mit jQuery und AJAX ==
Daten werden vom Server immer im Klartext geliefert und über das http Protokoll übertragen.
=== Textdatei anfordern ===
ajax1.html
<pre>
<html>
<head>
<script type="text/javascript" src="lib/jquery/jquery.js"></script>
<script>
$(document).ready(function(){
$("button:first").click(function(){
$.get("ajax.txt", function(data){
$("#ausgabe").text(data);
});
});
$("button:eq(1)").click(function(){
$.post("ajax.txt", function(data){
$("#ausgabe").text(data);
});
});
});
</script>
</head>
<body>
<button>AJAX-Anfrage mit $.get()</button>
<button>AJAX-Anfrage mit $.post()</button>
<div id="ausgabe"></div>
</body>
</html>
</pre>

ajax.txt
<pre>
Es gibt zwei Sachen, denen ich mir völlig sicher bin. Erstens: Männer sind viel schlauer als Frauen! Und zweitens? Die Erde ist flach. Genau.
</pre>

Erklärung:

Die 2 Buttons bekommen eine Klickfunktion zugewiesen.
Button 1 führt einen AJAX Request über GET aus. Button 2 über Post ($.get() bzw. $.post()). Als Parameter enthält die Funktion die Datei und eine weitere Funktion (oder Referenz auf eine Funktion). Diese neue Funktion bekommt als Parameter die erhaltenen Daten und schreibt sie in das div mit der id #ausgabe.

=== HTML Anfordern ===
Enthält die Antwort HTML Daten sollte der Browser sie auch so interpretieren. Dazu kann man jQuery direkt mitteilen, dass es sich um HTML Daten handelt.
<pre>
//$("#ausgabe").text(data);
$("#ausgabe").html(data);
</pre>

== Kommunikation mit dem Server über AJAX und jQuery ==
'''ajax.html'''
<pre>
<html>
<head>
<script type="text/javascript"
src="lib/jquery/jquery.js"></script>
<script>
$(document).ready(function(){
$("button:first").click(function(){
$.get("login_get.php",
{
username: $("input:first").val(),
password: $("input:last").val()
},
function(data){
$("#ausgabe").html(data);
}
);
});
$("button:last").click(function(){
$.post("login_post.php",
{
username: $("input:first").val(),
password: $("input:last").val()
},
function(data){
$("#ausgabe").html(data);
}
);
});
});
</script>
</head>
<body>
<h1>Bitte Benutzername und Passwort eingeben</h1>
<form name="f1">
<table width="200" border="1">
<tr>
<td>Name</td><td><input type="text" size="30"></td>
</tr>
<tr>
<td>Passwort</td>
<td><input type="password" size="30"></td>
</tr>
</table>
</form>
<button>AJAX-Login mit $.get()</button>
<button>AJAX-Login mit $.post()</button>
<div id="ausgabe"></div>
</body>
</html>
</pre>

Der Aufruf erfolgt fast gleich. Nur werden in diesem Fall 3 Parameter übergeben.
1. Der Name des Skriptes. 2. Die Daten die übermittelt werden. 3. Eine (anonyme) Funktion die die Antwort des Servers verarbeitet.

Interessant ist also Parameter2. Hier wird einfach wie in jQuery an vielen Stellen üblich mit einem Optionen-Objekt gearbeitet. Dieses enthält die Deklarationen der Übergabewerte in der Form

bezeichner : wert

ln diesem Fall ist der Wert die Eingabe der HTML Input Felder (hier das erste Input der Seite).

username : $("input:first").val(),

'''login_get.php'''
<pre>
<?php

$host = "localhost"; // Der MySQL-Server
$user = "root";// Der Datenbank Benutzername
$password = ""; // Das Passwort für die Datenbank
$dbname = "jquery"; // Der Name der Datenbank
$tabelle ="logindaten"; // Der Name der Tabelle
$loginrichtig =false;
$dbverbindung = mysql_connect ($host, $user, $password);
$dbanfrage = "SELECT * from $tabelle";
$result = mysql_db_query ($dbname, $dbanfrage, $dbverbindung);
while ($ausgabe = mysql_fetch_array ($result)) {
if (($ausgabe['username'] == $_GET['username']) && ($ausgabe['password'] == $_GET['password']) )
{$loginrichtig=true;
break;
}
}
if($loginrichtig) {
echo "Login erfolgreich";
}
else {
echo "Leider war ihr Login nicht erfolgreich, bitte überprüfen sie ihre Eingaben.";
}

mysql_close ($dbverbindung);
?>

Auf Seite des PHP-Skriptes kommen die Daten als GET oder POST Variablen an (Hier GET).

Als Antwort erwartet AJAX ja Klartext. Das bedeutet wir können einfach eine ganz normale Ausgabe über Echo machen. Möchten wir Daten zurückgeben muß das ebenfalls über Klartext funktionieren. Dazu können wir dann z.B. JSON oder XML nehmen.
</pre>

== Kommunikation über JSON ==
Eine gute Methode Strukturierte Daten (Objekte, Arrays, etc.) zu übertragen ist JSON. JSON ist eine Methode strukturierte Daten als platzsparenden String zu speichern, der trotzdem für den Menschen lesbar bleibt, aber auch vom Rechner leicht verarbeitet werden kann.

=== JSON - Daten ===
So sieht es aus.

'''ajax.json'''
<pre>
{
"name" : "Stephan Schlegel",
"beruf" : "Dipl Ing audiovisuelle Medien",
"ort" : "Nürtingen",
"webseiten" : {
"url1" : "www.geo-bit.de",
"url2" : "www.3d-relief.com",
"url3" : "www.ko-rockband.de"
}
}
</pre>

Im Prinzip ist es wieder ein Objekt indem es Bezeichner und Wertzuweisungen gibt. Im Fall Webseiten ist der Wert wiederum ein Objekt, bestehend aus Bezeichnern und Werten.

=== JSON Daten über jQuery lesen ===
<pre>
<html>
<head>
<script type="text/javascript" src="lib/jquery/jquery.js"></script>
<script>
$(document).ready(function(){
$("button:first").click(function(){
$.getJSON("ajax.json", function(data){
$("#ausgabe").append(data.name + ", " + data.webseiten.url1);
});
});
});
</script>
</head>
<body>
<button>getJSON</button>
<div id="ausgabe"></div>
</body>
</html>
</pre>

Die Daten werden über getJSON geladen:
$.getJSON("ajax.json", function(data){ $("#ausgabe").append(data.name + ", " + data.webseiten.url1); });
$.getJSON("Datei", meineFunktion(data));

An die Funktion wird das Bezeichner-Objekt data übergeben und über dieses kann man auf die enthaltenen Daten zugreifen. Hier z.B. auf Name oder die erste URL.

data.name
data.webseiten.url1

'''Hinweis:''' über die getJSON Funktion werden die Daten direkt in ein jQuery Objekt umgewandelt. Über get und post würde man einfach den Text bekommen. Man kann aber einen JSON String auch nachträglich umwandeln. Dafür gibt es die jQuery Funkion parseJSON(json).

==== Beispiel Datensätze aus einem JSON Objekt verarbeiten mit each ====

Beispiel einer Funktion aus dem 3d-relief map-editor. Im Beispiel wird ein Dropdown-Feld erzeugt, in dem sich alle Produkte auswählen lassen. Zusätzlich wird ein Click Handler registriert. Der bei Klick wiederum eine JS Funktion "loadMap" ausführt.

<pre>
...
$.getJSON("dataHandler.php",{action:"loadMaps"},function(data){
//mapData = data;
createMapSelector(data);
});
...
</pre>

Übergeben wird das Data Objekt an diese Funktion

<pre>

function createMapSelector(data){
$("#map_selector_wrap").html('<div><h3>Select Relief Map</h3><select id="map_selector" name="map_selector">');
$("#map_selector").append('<option value="na">Select product to view details</option>');
$.each(data,function(key,obj){
if(obj.products_name != null)
$("#map_selector").append('<option value="' + obj.products_id + '">' + obj.products_name + '</option>');
});
$("#map_selector_wrap").append('</select></div>');
// click handler for selector
$("#map_selector").change(function(){
actID=$("#map_selector option:selected").val()
if(actID != "na")
loadMap(actID);
});
}

</pre>

=== JSON Daten von fremden Servern ===
Normalerweise holt JavaScript Daten nur vom gleichen Server, auf dem das Skript läuft. Dies kann man mit JSONP umgehen.
Das etwas umfangreichere Beispiel liest Twitterdaten über JSON und die Twitter API.

[[jQuery und JSONP - Tweets von Twitter lesen]]

siehe auch nächstes Beispiel "JavaScript" nachladen.

=== JavaScript nachladen ===
Mit jQuery kann man JavaScripte nachladen. Die enthaltenen Statements werden automatisch ausgeführt, bzw. enthaltene Funktionen verfügbar gemacht.
So kann man sehr schön seine Funktionen auf mehrere Bibliotheken aufteilen und bei Bedarf laden.

<pre>
$.getScript("ajax/test.js", function(data, textStatus, jqxhr) {
console.log(data); //data returned
console.log(textStatus); //success
console.log(jqxhr.status); //200
console.log('Load was performed.');
});
</pre>

'''ajax.html'''
<pre>
<html>
<head>
<script type="text/javascript"
src="lib/jquery/jquery.js"></script>
<script>
$(document).ready(function(){
$("button:first").click(function(){
$.getScript("zufall.js", function(){
$("#ausgabe").text(zufallsZahl());
});
});
$("button:last").click(function(){
$.getScript("http://mydomain.de/jquery/zufall.js", function(){
$("#ausgabe").text(zufallsZahl());
});
});
});
</script>
</head>
<body>
<button>Lade Skript von gleicher Domain</button>
<button>Lade Skript von fremder Domain</button>
<div id="ausgabe"></div>
</body>
</html>
</pre>

'''zufall.js'''
<pre>
function zufallsZahl(){
return Math.random();
}
</pre>

JQuery - AJAX

2012-11-05T09:25:06Z

Kholja: /* JSON Daten über jQuery lesen */

== Wie funktioniert AJAX ? ==

Früher mußte man bei jeder Anfrage die Webseite komplett neu laden. Auch wenn nur ein kleiner Teil neu benötigt wird (z.B. ein Suchergebnis). Mit AJAX kann man Teile einer Website neu laden. Das funktioniert über ein JavaScript Objekt den sogenannten '''XML-HTTP Request''' oder kurz '''XHR'''. Dieser kommuniziert quasi am Browser vorbei mit dem Server.

Die alte Kommunikationsart ist Synchron: Eine Anfrage - eine Webseite. Die neue Art ist asynchron. Alle Eigenschaften zusammengefaßt spricht man von '''A'''synchronous '''J'''avaScript '''a'''nd '''X'''ML - AJAX

Übertragen wird immer Klartext, allerdings selten XML-Daten. Heute nutzt man eher HTML-Fragmente oder JSON Daten.

==jQuery und AJAX==
jQuery bietet eine gute AJAX Unterstützung, und macht es dem Programmierer leicht mit den Besonderheiten der verschiedenen Browser umzugehen.

== Datenanforderung mit jQuery und AJAX ==
Daten werden vom Server immer im Klartext geliefert und über das http Protokoll übertragen.
=== Textdatei anfordern ===
ajax1.html
<pre>
<html>
<head>
<script type="text/javascript" src="lib/jquery/jquery.js"></script>
<script>
$(document).ready(function(){
$("button:first").click(function(){
$.get("ajax.txt", function(data){
$("#ausgabe").text(data);
});
});
$("button:eq(1)").click(function(){
$.post("ajax.txt", function(data){
$("#ausgabe").text(data);
});
});
});
</script>
</head>
<body>
<button>AJAX-Anfrage mit $.get()</button>
<button>AJAX-Anfrage mit $.post()</button>
<div id="ausgabe"></div>
</body>
</html>
</pre>

ajax.txt
<pre>
Es gibt zwei Sachen, denen ich mir völlig sicher bin. Erstens: Männer sind viel schlauer als Frauen! Und zweitens? Die Erde ist flach. Genau.
</pre>

Erklärung:

Die 2 Buttons bekommen eine Klickfunktion zugewiesen.
Button 1 führt einen AJAX Request über GET aus. Button 2 über Post ($.get() bzw. $.post()). Als Parameter enthält die Funktion die Datei und eine weitere Funktion (oder Referenz auf eine Funktion). Diese neue Funktion bekommt als Parameter die erhaltenen Daten und schreibt sie in das div mit der id #ausgabe.

=== HTML Anfordern ===
Enthält die Antwort HTML Daten sollte der Browser sie auch so interpretieren. Dazu kann man jQuery direkt mitteilen, dass es sich um HTML Daten handelt.
<pre>
//$("#ausgabe").text(data);
$("#ausgabe").html(data);
</pre>

== Kommunikation mit dem Server über AJAX und jQuery ==
'''ajax.html'''
<pre>
<html>
<head>
<script type="text/javascript"
src="lib/jquery/jquery.js"></script>
<script>
$(document).ready(function(){
$("button:first").click(function(){
$.get("login_get.php",
{
username: $("input:first").val(),
password: $("input:last").val()
},
function(data){
$("#ausgabe").html(data);
}
);
});
$("button:last").click(function(){
$.post("login_post.php",
{
username: $("input:first").val(),
password: $("input:last").val()
},
function(data){
$("#ausgabe").html(data);
}
);
});
});
</script>
</head>
<body>
<h1>Bitte Benutzername und Passwort eingeben</h1>
<form name="f1">
<table width="200" border="1">
<tr>
<td>Name</td><td><input type="text" size="30"></td>
</tr>
<tr>
<td>Passwort</td>
<td><input type="password" size="30"></td>
</tr>
</table>
</form>
<button>AJAX-Login mit $.get()</button>
<button>AJAX-Login mit $.post()</button>
<div id="ausgabe"></div>
</body>
</html>
</pre>

Der Aufruf erfolgt fast gleich. Nur werden in diesem Fall 3 Parameter übergeben.
1. Der Name des Skriptes. 2. Die Daten die übermittelt werden. 3. Eine (anonyme) Funktion die die Antwort des Servers verarbeitet.

Interessant ist also Parameter2. Hier wird einfach wie in jQuery an vielen Stellen üblich mit einem Optionen-Objekt gearbeitet. Dieses enthält die Deklarationen der Übergabewerte in der Form

bezeichner : wert

ln diesem Fall ist der Wert die Eingabe der HTML Input Felder (hier das erste Input der Seite).

username : $("input:first").val(),

'''login_get.php'''
<pre>
<?php

$host = "localhost"; // Der MySQL-Server
$user = "root";// Der Datenbank Benutzername
$password = ""; // Das Passwort für die Datenbank
$dbname = "jquery"; // Der Name der Datenbank
$tabelle ="logindaten"; // Der Name der Tabelle
$loginrichtig =false;
$dbverbindung = mysql_connect ($host, $user, $password);
$dbanfrage = "SELECT * from $tabelle";
$result = mysql_db_query ($dbname, $dbanfrage, $dbverbindung);
while ($ausgabe = mysql_fetch_array ($result)) {
if (($ausgabe['username'] == $_GET['username']) && ($ausgabe['password'] == $_GET['password']) )
{$loginrichtig=true;
break;
}
}
if($loginrichtig) {
echo "Login erfolgreich";
}
else {
echo "Leider war ihr Login nicht erfolgreich, bitte überprüfen sie ihre Eingaben.";
}

mysql_close ($dbverbindung);
?>

Auf Seite des PHP-Skriptes kommen die Daten als GET oder POST Variablen an (Hier GET).

Als Antwort erwartet AJAX ja Klartext. Das bedeutet wir können einfach eine ganz normale Ausgabe über Echo machen. Möchten wir Daten zurückgeben muß das ebenfalls über Klartext funktionieren. Dazu können wir dann z.B. JSON oder XML nehmen.
</pre>

== Kommunikation über JSON ==
Eine gute Methode Strukturierte Daten (Objekte, Arrays, etc.) zu übertragen ist JSON. JSON ist eine Methode strukturierte Daten als platzsparenden String zu speichern, der trotzdem für den Menschen lesbar bleibt, aber auch vom Rechner leicht verarbeitet werden kann.

=== JSON - Daten ===
So sieht es aus.

'''ajax.json'''
<pre>
{
"name" : "Stephan Schlegel",
"beruf" : "Dipl Ing audiovisuelle Medien",
"ort" : "Nürtingen",
"webseiten" : {
"url1" : "www.geo-bit.de",
"url2" : "www.3d-relief.com",
"url3" : "www.ko-rockband.de"
}
}
</pre>

Im Prinzip ist es wieder ein Objekt indem es Bezeichner und Wertzuweisungen gibt. Im Fall Webseiten ist der Wert wiederum ein Objekt, bestehend aus Bezeichnern und Werten.

=== JSON Daten über jQuery lesen ===
<pre>
<html>
<head>
<script type="text/javascript" src="lib/jquery/jquery.js"></script>
<script>
$(document).ready(function(){
$("button:first").click(function(){
$.getJSON("ajax.json", function(data){
$("#ausgabe").append(data.name + ", " + data.webseiten.url1);
});
});
});
</script>
</head>
<body>
<button>getJSON</button>
<div id="ausgabe"></div>
</body>
</html>
</pre>

Die Daten werden über getJSON geladen:
$.getJSON("ajax.json", function(data){ $("#ausgabe").append(data.name + ", " + data.webseiten.url1); });
$.getJSON("Datei", meineFunktion(data));

An die Funktion wird das Bezeichner-Objekt data übergeben und über dieses kann man auf die enthaltenen Daten zugreifen. Hier z.B. auf Name oder die erste URL.

data.name
data.webseiten.url1

'''Hinweis:''' über die getJSON Funktion werden die Daten direkt in ein jQuery Objekt umgewandelt. Über get und post würde man einfach den Text bekommen. Man kann aber einen JSON String auch nachträglich umwandeln. Dafür gibt es die jQuery Funkion parseJSON(json).

==== Datensätze aus einem JSON Objekt holen mit each ====

Beispiel einer Funktion aus dem 3d-relief map-editor. Im Beispiel wird ein Dropdown-Feld erzeugt, in dem sich alle Produkte auswählen lassen. Zusätzlich wird ein Click Handler registriert. Der bei Klick wiederum eine JS Funktion "loadMap" ausführt.

<pre>
...
$.getJSON("dataHandler.php",{action:"loadMaps"},function(data){
//mapData = data;
createMapSelector(data);
});
...
</pre>

Übergeben wird das Data Objekt an diese Funktion

<pre>

function createMapSelector(data){
$("#map_selector_wrap").html('<div><h3>Select Relief Map</h3><select id="map_selector" name="map_selector">');
$("#map_selector").append('<option value="na">Select product to view details</option>');
$.each(data,function(key,obj){
if(obj.products_name != null)
$("#map_selector").append('<option value="' + obj.products_id + '">' + obj.products_name + '</option>');
});
$("#map_selector_wrap").append('</select></div>');
// click handler for selector
$("#map_selector").change(function(){
actID=$("#map_selector option:selected").val()
if(actID != "na")
loadMap(actID);
});
}

</pre>

=== JSON Daten von fremden Servern ===
Normalerweise holt JavaScript Daten nur vom gleichen Server, auf dem das Skript läuft. Dies kann man mit JSONP umgehen.
Das etwas umfangreichere Beispiel liest Twitterdaten über JSON und die Twitter API.

[[jQuery und JSONP - Tweets von Twitter lesen]]

siehe auch nächstes Beispiel "JavaScript" nachladen.

=== JavaScript nachladen ===
Mit jQuery kann man JavaScripte nachladen. Die enthaltenen Statements werden automatisch ausgeführt, bzw. enthaltene Funktionen verfügbar gemacht.
So kann man sehr schön seine Funktionen auf mehrere Bibliotheken aufteilen und bei Bedarf laden.

<pre>
$.getScript("ajax/test.js", function(data, textStatus, jqxhr) {
console.log(data); //data returned
console.log(textStatus); //success
console.log(jqxhr.status); //200
console.log('Load was performed.');
});
</pre>

'''ajax.html'''
<pre>
<html>
<head>
<script type="text/javascript"
src="lib/jquery/jquery.js"></script>
<script>
$(document).ready(function(){
$("button:first").click(function(){
$.getScript("zufall.js", function(){
$("#ausgabe").text(zufallsZahl());
});
});
$("button:last").click(function(){
$.getScript("http://mydomain.de/jquery/zufall.js", function(){
$("#ausgabe").text(zufallsZahl());
});
});
});
</script>
</head>
<body>
<button>Lade Skript von gleicher Domain</button>
<button>Lade Skript von fremder Domain</button>
<div id="ausgabe"></div>
</body>
</html>
</pre>

'''zufall.js'''
<pre>
function zufallsZahl(){
return Math.random();
}
</pre>

AJAX in TYPO3 Extensions

2012-11-05T09:01:30Z

Kholja: /* eID AJAX mit jQuery und JSON Beispiel */

== Übersicht ==
=== Links ===
http://prototypejs.org/learn/introduction-to-ajax

http://www.interaktionsdesigner.de/2009/01/04/asynchrone-datenubertragung-zwischen-typo3-und-jquery/

=== Typo3 Skripte ohne Rendering ===
Ein Ajax Request wird in den meisten Fällen über ein JavaScript abgesetzt von einem Serverskript (PHP) verarbeitet und die Antwort als xml oder JSON Objekt zurückgegeben.

Um das PHP-Skript zu nutzen und zugleich die ganzen '''Rendering und Caching-Mechanismen von Typo3 zu vermeiden''' könnte man irgend ein php Skript nutzen. Andererseits wollen wir die Typo3 Funktionalitäten wie dbal Datenbankabfrage etc. nutzen. Deshalb stellt Typo3 den '''eid Mechanismus''' zur Verfügung (siehe unten). Mit diesem wird das '''Seitenrendering frühzeitig abgebrochen''' und der Request direkt an ein Skript weitergegeben.

Eine weitere Möglichkeit außer dem eid Mechanismus findest du unter [[Typo3 - alternatives Rendering]]

=== Schnelle Antwort ===
Dieses Skript kann sich nun ausschließlich um die Anfrage kümmern und das Ergebnis direkt zurückgeben, welches wiederum die Daten in die Seite einhängt.

== Der eid Mechanismus und AJAX ==
Quellen: http://www.typo3-tutorials.org/tutorials/extensions/eid-mechanismus.html (10.3.2010 Artikel von 2007)

http://www.blogix.net/2009/02/08/typo3-eid-oder-daten-mit-ajax-anfordern/

eID steht für Extension ID
Der eID Mechanismus ist der seit der Version 4.x dabei und kann als '''alternative Rendering Engine''' betrachtet werden.

Angesprochen wird er über einen GET oder POST Parameter. Sobald '''eID als Parameter in der URL''' vorhanden ist (zB. ''www.domain.de/?eID=schuesselwort'') wird der normaler Rendering Prozess sehr früh abgebrochen und auf ein Script weitergeleitet was wir selber programmieren müssen. Da der normale Rendering Prozess so früh abgebrochen wird kommt es auch noch zu keiner Ausgabe. Es wird nichts gecachet und kein HeaderCode ect generiert. Der eID Mechanismus kann also super im Zusammenhang mit AJAX verwendet werden.

Wollen wir uns einmal die index_ts.php (typo3/sysext/cms/tslib/) Zeile 127 bis 136 ansehen.

<pre>
<?php
// *********************
// Look for extension ID which will launch alternative output engine
// *********************
if ($temp_extId = t3lib_div::_GP('eID')) {
if ($classPath = t3lib_div::getFileAbsFileName($TYPO3_CONF_VARS['FE']['eID_include'][$temp_extId])) {
require_once(PATH_tslib.'class.tslib_eidtools.php');
require($classPath);
}
exit;
}
?>
</pre>

Hier wird überprüft ob der Schlüssel eID als Get/Post Variable vorhanden ist und falls ja, wird der normale Renderingprozess abgebrochen und auf unser Script verwiesen. Doch woher weiss TYPO3 jetzt wo unser Script liegt ?

Das sagen wir Ihm über $TYPO3_CONF_VARS['FE']['eID_include'][$temp_extId].
Wir müssten entweder in die localconf.php oder in eine ext_localconf.php einer Extension folgendes Eintragen
<pre>
<?php
// Zugriff nur von Typo3 aus:
if (!defined ('TYPO3_MODE')) {
die ('Access denied.');
}
// Registrierung der eid Scripts
$TYPO3_CONF_VARS['FE']['eID_include']['schluesselwort'] = 'EXT:myExtKey/eid/meinScript.php'; ?>
?>
</pre>
Steht jetzt also in der Adresse ''www.domain.de/?eID=schluesselwort'' geht er in die erste if Abfrage und sieht das ''$TYPO3_CONF_VARS['FE']['eID_include'][$temp_extId]'' vorhanden ist und '''speichert''' 'EXT:myExtKey/meinScript.php' in die Variable ''$classPat''h. '''Danach includiert er die Klasse eidtools und unsere eigene'''.

Da unser Script noch leer ist bekommen wir eine weisse Seite angezeigt in der auch der komplette Quelltext leer ist.

Um in unserem Script nun ein FEUSER Objekt zu haben und eine aktive DB Verbindung schreiben wir
<pre>
<?php
$feUserObj = tslib_eidtools::initFeUser(); // Initialize FE user object
tslib_eidtools::connectDB(); //Connect to database
// ...
?>
</pre>
Die erste Zeile '''initialisert den FrontentUser''' und gibt uns diesen als Objekt zurück.

Die zweite Zeile stellt eine '''Verbindung zur Datenbank''' her.

Im Weiteren können wir ganz normal auch TYPO3 Funktionalitäten benutzen und unseren eigenen Renderingablauf schreiben.

Um auch '''zB auf alle piBase Funktionen zurückzugreifen''' können wir uns ganz einfach eine Klasse erstellen die von dieser Erbt

<pre>
<?php
require_once(PATH_tslib.'class.tslib_pibase.php');

class unsereKlasse extends tslib_pibase {
function main(){
$feUserObj = tslib_eidtools::initFeUser(); // Initialize FE user object
tslib_eidtools::connectDB(); //Connect to database
echo("hallo welt");
}
}

$output = t3lib_div::makeInstance('unsereKlasse');
$output->main();
?>
</php>
</pre>
Das war es soweit, wenn Ihr noch fragen dazu habt stellt Sie einfach über die Kommentarfunktion.

== eID AJAX mit jQuery und JSON Beispiel ==
Beispiel der Extension gbglossary
=== eID Parameter registrieren ===
'''ext_localconf.php'''
// Register eid
$TYPO3_CONF_VARS['FE']['eID_include']['gbglossaryeid'] = 'EXT:gbglossary/eid/class.gbglossary_eid.php';

Typo3 sucht nach der angegebenen Klasse wenn der Parameter
eID=gbglossaryeid in der URL angegeben wird.

=== PHP Klasse erstellen ===
Über die Klasse tx_gbglossary_eid holen wir uns alle Datensätze aus der Datenbank und geben Sie als JSON Objekt aus.

'''class.gbglossary_eid.php'''
<pre>
<?php
if (!defined ('PATH_typo3conf')) die ('Access denied: eID only.');
require_once(PATH_tslib . 'class.tslib_pibase.php');

class tx_gbglossary_eid extends tslib_pibase {
var $prefixId = 'tx_gbglossary_eid';// Same as class name
var $scriptRelPath = 'eid/class.tx_gbglossary_eid.php'; // Path to this script relative to the extension dir.
var $extKey = 'gbglossary';// The extension key.

function eid_main() {
$GLOBALS['TSFE']->fe_user = tslib_eidtools::initFeUser();
tslib_eidtools::connectDB();

// Create select
$select = '';
$dbFields = array(
'tx_gbglossary_terms.uid AS terms_uid',
'tx_gbglossary_terms.title AS terms_title'
);
foreach ($dbFields as $key => $value){
$select.=$value.', ';
}
$select = rtrim(rtrim($select),',');
// Create from (example for n:m JOIN)
$from = '';
$from = '
(
(
tx_gbglossary_terms LEFT OUTER JOIN tx_gbglossary_terms_topic_mm
ON tx_gbglossary_terms.uid = tx_gbglossary_terms_topic_mm.uid_local
)
LEFT OUTER JOIN tx_gbglossary_topic
ON tx_gbglossary_terms_topic_mm.uid_foreign = tx_gbglossary_topic.uid
)
';
// Create where
$where = '';
$where = "tx_gbglossary_terms.deleted=0 AND tx_gbglossary_terms.hidden=0";

$res = $GLOBALS['TYPO3_DB']->exec_SELECTquery(
$select,
$from,
$where,
$groupBy='',
$orderBy='',
$limit=''
);
$arrJSON = array();
while (($row = $GLOBALS["TYPO3_DB"]->sql_fetch_assoc($res))){
$arrJSON[]=$row;
}

// Wir geben der Anfrage ein JSON Objekt-Literal zurück
$ajax_return_data = json_encode($arrJSON);
header('Expires: Mon, 26 Jul 2000 03:00:00 GMT');
header('Last-Modified: ' . gmdate( "D, d M Y H:i:s" ) . 'GMT');
header('Cache-Control: no-cache, must-revalidate');
header('Pragma: no-cache');
header('Content-Length: '.strlen($ajax_return_data));
header('Content-Type: application/json; charset=UTF-8');
echo $ajax_return_data;
exit;
}
}

$extensionkey = t3lib_div::makeInstance('tx_gbglossary_eid');
$extensionkey->eid_main();

?>
</pre>

Der Test im Browser zeigt einen schönen JSON String mit den abgefragten Daten.

http://localhost/typo3_test/index.php?id=178&eID=gbglossaryeid

== eid ajax mit Prototype Beispiel ==
Bei diesem Beispiel gehen wir von einem normalen Frontend Plugin aus das z.B. mit dem Kickstarter erzeugt wird. Wir legen eine PHP-Klasse für die Bearbeitung der AJAX Anfrage an und eine JavaScript Datei mit den passenden Funktionen. Die PHP Datei wird in localconf registriert. Das Handling des AJAX Request überlassen wir der Prototype JavaScript Lib die in Typo3 schon dabei ist.

Diese Dateien bearbeiten wir:
<pre>
typo3conf/ext/myExtKey/
- ext_localconf.php
typo3conf/ext/myExtKey/eid/
- ajax.js
- class.myExtKey_eid.php
typo3conf/ext/myExtKey/pi1/
- class.myExtKey_pi1.php
</pre>

=== eID Datei ===
'''class.myExtkey_eid.php'''
<pre>
<?php
if (!defined ('PATH_typo3conf')) die ('Access denied: eID only.');
require_once(PATH_tslib . 'class.tslib_pibase.php');

class tx_myExtKey_eid extends tslib_pibase {
var $prefixId = 'tx_myExtKey_eid';// Same as class name
var $scriptRelPath = 'eid/class.tx_myExtKey_eid.php'; // Path to this script relative to the extension dir.
var $extKey = 'myExtKey';// The extension key.

function eid_main() {
$GLOBALS['TSFE']->fe_user = tslib_eidtools::initFeUser();
tslib_eidtools::connectDB();

// Hier beginnt unser Code
$res = 'Hallo Welt';
// Hier endet unser Code

// Wir geben der Anfrage ein XML Objekt zurück
$ajax_return_data = t3lib_div::array2xml(array('data'=>$res));
header('Expires: Mon, 26 Jul 2000 03:00:00 GMT');
header('Last-Modified: ' . gmdate( "D, d M Y H:i:s" ) . 'GMT');
header('Cache-Control: no-cache, must-revalidate');
header('Pragma: no-cache');
header('Content-Length: '.strlen($ajax_return_data));
header('Content-Type: text/xml');
echo $ajax_return_data;
exit;
}
}

$extensionkey = t3lib_div::makeInstance('tx_myExtKey_eid');
$extensionkey->eid_main();

?>
</pre>

Möchte man in diesem Skript nun auf '''Funktionen (z.B. Datenbank) aus dem TYPO3-Framework''' zurückgreifen, so muss man für die Instantiierung selbst sorge tragen. In der Datei ''typo3_src/typo3/sysext/cms/tslib/class.tslib_eidtools.php'' findet man vorgefertigte Methoden um auf die Daten eines FE-Users oder die Datenbank zugreifen zu können (Verwendung siehe im Code oben).

=== ext_localconf.php ===
Die '''Datei muß noch dem System bekannt gemacht werden'''. Dies tun wir in der '''ext_localconf.php''' indem wir folgende Zeile hinzufügen:

$TYPO3_CONF_VARS['FE']['eID_include']['myExtKeyeid'] = 'EXT:myExtKey/eid/class.myExtKey_eid.php';

Hiermit sagen wir dem System das wir gerne die Datei myExtKey_eid.php ausführen würden wenn der Parameter eID=myExtKeyeid übergeben wird.

=== Das Frontend Plugin ===
In unserem Frontent Plugin erzeugen wir einen div container mit der id ac (ajaxcontainer) diesen wollen wir später mit der Ausgabe des Ajax Scriptes füllen. Außerdem noch einen Knopf mit dem wir die Anfrage starten können.

'''class.myExtKey_pi1.php'''
<pre>
...
$content .= '
<div id="ac">ajaxcontainer</div>
<input onclick="getData()" id="myButton" type="button" value="AJAX" />
';
...
</pre>

Anmerkung: Statt dem onclick im Button, kann man auch Prototypes observe Funktion nehmen, dan kann man den Code komplett in der .js Datei verwalten.

=== JavaScript ===
Jetzt benötigen wir noch etwas JavaScript um die '''Anfrage vom FrontendPlugi'''n auszuführen:

'''JavaScript (ajax.js)'''
<pre>

function anfrage()
{
var myAjax = new Ajax.Request(
'index.php', // the Request goes to index.php
{
method: 'get', //get or post
parameters: 'eID=gbeventseid',
onComplete: show // after loading use the anzeige function
});
}

function show(orgRequest)
//
{
var xmldoc = orgRequest.responseXML; //use XML Object as answer
var result = xmldoc.getElementsByTagName("data")[0].firstChild.data;//datapart
$('ac').innerHTML = result;//drop the stuff in the div with id "ac"
}
</pre>

=== Eine Prise TypoScript ===
Wir benutzen wie gesagt das Prototype Lib. Unsere '''JavaScript Dateien''' müssen wir natürlich auch in das Frontend Plugin '''einbinden'''. Das machen wir z.B. ganz einfach über TypoScript

'''TypoScript'''
<pre>
page.includeJS.proto = typo3/contrib/prototype/prototype.js
page.includeJS.gbevents3 = EXT:gb_events/eid/ajax.js
</pre>

== Weitere Beispiele ==
Angewendet in der kleinen Extension gbflashauth. Über einen Flash Movie wird die url aufgerufen und zurückgegeben ob der User eingeloggt ist und mit welchem Namen.

<pre>
<?php
if (!defined ('PATH_typo3conf')) die ('Access denied: eID only.');
require_once(PATH_tslib . 'class.tslib_pibase.php');

class tx_gbflashauth_eid extends tslib_pibase {
var $prefixId = 'tx_gbflashauth_eid';// Same as class name
var $scriptRelPath = 'eid/class.tx_gbflashauth_eid.php'; // Path to this script relative to the extension dir.
var $extKey = 'gbflashauth';// The extension key.

function eid_main() {
$GLOBALS['TSFE']->fe_user = tslib_eidtools::initFeUser();
tslib_eidtools::connectDB();

// Hier beginnt unser Code

if(!empty($GLOBALS['TSFE']->fe_user->user)){
$uid = $GLOBALS['TSFE']->fe_user->user[uid];
$name = $GLOBALS['TSFE']->fe_user->user[name];
$firstname = $GLOBALS['TSFE']->fe_user->user[first_name];
$lastname = $GLOBALS['TSFE']->fe_user->user[last_name];
$email= $GLOBALS['TSFE']->fe_user->user[email];
$res="login=1"."&uid=".$uid."&firstname=".$firstname."&lastname=".$lastname;
}else{
$res = 'login=0';
}

//header('Expires: Mon, 26 Jul 2000 03:00:00 GMT');
header('Last-Modified: ' . gmdate( "D, d M Y H:i:s" ) . 'GMT');
header('Cache-Control: no-cache, must-revalidate');
header('Pragma: no-cache');
header('Content-Length: '.strlen($res));
//header('Content-Type: text/plain');
//echo $ajax_return_data;
echo $res;
exit;
}
}

$extensionkey = t3lib_div::makeInstance('tx_gbflashauth_eid');
$extensionkey->eid_main();

?>

</pre>

== Probleme mit cc_debug und JSON Objekten ==

von Tim Lochmüller im Adventskalender 2008

In letzter Zeit habe ich sehr oft mit AJAX und JSON gearbeitet. Leider gibt es dabei immer ein Problem mit cc_debug, weil sich dieser immer hinter die Ausgabe des JSON Codes klemmt und damit ein kaputtes JSON erzeugt. Nachdem ich heute mit meinem Kollegen Michael zusammen gesessen habe um dieses Problem zu lösen, sind wir auf eine sehr einfache Lösung gestoßen:

$GLOBALS['errorList']->clear();
die(json_encode($result));

Die Zeile 1 direkt vor der Ausgabe des JSON Codes eingebaut, verhindert, dass cc_debug noch seinen JavaScript-Code hinter her ausgibt. Und wer jetzt sagt: naje, ein die() oder exit() sollte es auch tun, der irrt sich. Versucht es gerne selber mal.

PHP und JSON

2012-11-05T08:45:16Z

Kholja: /* Daten aus mySQL in eine JSON Datei schreiben */

== Daten aus mySQL in eine JSON Datei schreiben ==
<pre>
<?php

$sql=mysql_query("select * from Posts limit 20");

$response = array();
$posts = array();
$result=mysql_query($sql);
while($row=mysql_fetch_array($result))
{
$title=$row['title'];
$url=$row['url'];

$posts[] = array('title'=> $title, 'url'=> $url);

}

$response['posts'] = $posts;

$fp = fopen('results.json', 'w');
fwrite($fp, json_encode($response));
fclose($fp);

?>
</pre>

== Korrekte Header für JSON-Daten ==
Wenn man Header Infos mit zurückgibt kann das z.B. so aussehen

<pre>

$arrJSON = array('text'=>'Hallo Welt');
// Wir geben der Anfrage ein JSON Objekt-Literal zurück
$ajax_return_data = json_encode($arrJSON);
header('Expires: Mon, 26 Jul 2000 03:00:00 GMT');
header('Last-Modified: ' . gmdate( "D, d M Y H:i:s" ) . 'GMT');
header('Cache-Control: no-cache, must-revalidate');
header('Pragma: no-cache');
header('Content-Length: '.strlen($ajax_return_data));
header('Content-Type: application/json; charset=UTF-8');
echo $ajax_return_data;
exit;

</pre>

Der Content-Type: application/json ist nach Internet Recherche korrekt. Jedoch gibt es auch Aussagen über mögliche oder für manche Anwendungen sogar notwendige anders lautende Angaben:

Für JSONP (für Zugriff auf Server anderer Domains)
Content-Type: application/javascript

Funktionieren soll angeblich auch:
application/x-javascript
text/x-javascript
text/x-json

Wichtig ist die Angabe des charset. Firebug moniert sofort, daß es nicht weiß um was es sich handelt. Und es kann später Probleme mit Sonderzeichen geben.

PHP und JSON

2012-11-05T08:44:33Z

Kholja: /* Korrekte Header für JSON-Daten */

== Daten aus mySQL in eine JSON Datei schreiben ==
<pre>
<?php
$sql=mysql_query("select * from Posts limit 20");

$response = array();
$posts = array();
$result=mysql_query($sql);
while($row=mysql_fetch_array($result))
{
$title=$row['title'];
$url=$row['url'];

$posts[] = array('title'=> $title, 'url'=> $url);

}

$response['posts'] = $posts;

$fp = fopen('results.json', 'w');
fwrite($fp, json_encode($response));
fclose($fp);
</pre>

?>

== Korrekte Header für JSON-Daten ==
Wenn man Header Infos mit zurückgibt kann das z.B. so aussehen

<pre>

$arrJSON = array('text'=>'Hallo Welt');
// Wir geben der Anfrage ein JSON Objekt-Literal zurück
$ajax_return_data = json_encode($arrJSON);
header('Expires: Mon, 26 Jul 2000 03:00:00 GMT');
header('Last-Modified: ' . gmdate( "D, d M Y H:i:s" ) . 'GMT');
header('Cache-Control: no-cache, must-revalidate');
header('Pragma: no-cache');
header('Content-Length: '.strlen($ajax_return_data));
header('Content-Type: application/json; charset=UTF-8');
echo $ajax_return_data;
exit;

</pre>

Der Content-Type: application/json ist nach Internet Recherche korrekt. Jedoch gibt es auch Aussagen über mögliche oder für manche Anwendungen sogar notwendige anders lautende Angaben:

Für JSONP (für Zugriff auf Server anderer Domains)
Content-Type: application/javascript

Funktionieren soll angeblich auch:
application/x-javascript
text/x-javascript
text/x-json

Wichtig ist die Angabe des charset. Firebug moniert sofort, daß es nicht weiß um was es sich handelt. Und es kann später Probleme mit Sonderzeichen geben.

PHP und JSON

2012-11-05T08:38:22Z

Kholja: /* Korrekte Header Informationen für JSON */

== Daten aus mySQL in eine JSON Datei schreiben ==
<pre>
<?php
$sql=mysql_query("select * from Posts limit 20");

$response = array();
$posts = array();
$result=mysql_query($sql);
while($row=mysql_fetch_array($result))
{
$title=$row['title'];
$url=$row['url'];

$posts[] = array('title'=> $title, 'url'=> $url);

}

$response['posts'] = $posts;

$fp = fopen('results.json', 'w');
fwrite($fp, json_encode($response));
fclose($fp);
</pre>

?>

== Korrekte Header für JSON-Daten ==
Wenn man Header Infos mit zurückgibt kann das z.B. so aussehen

<pre>

$arrJSON = array('text'=>'Hallo Welt');
// Wir geben der Anfrage ein JSON Objekt-Literal zurück
$ajax_return_data = json_encode($arrJSON);
header('Expires: Mon, 26 Jul 2000 03:00:00 GMT');
header('Last-Modified: ' . gmdate( "D, d M Y H:i:s" ) . 'GMT');
header('Cache-Control: no-cache, must-revalidate');
header('Pragma: no-cache');
header('Content-Length: '.strlen($ajax_return_data));
header('Content-Type: application/json');
echo $ajax_return_data;
exit;

</pre>

Der Content-Type: application/json ist nach Internet Recherche korrekt. Jedoch gibt es auch Aussagen über mögliche oder für manche Anwendungen sogar notwendige anders lautende Angaben:

Für JSONP (für Zugriff auf Server anderer Domains)
Content-Type: application/javascript

Funktionieren soll angeblich auch:
application/x-javascript
text/x-javascript
text/x-json

PHP und JSON

2012-11-05T08:37:51Z

Kholja:

== Daten aus mySQL in eine JSON Datei schreiben ==
<pre>
<?php
$sql=mysql_query("select * from Posts limit 20");

$response = array();
$posts = array();
$result=mysql_query($sql);
while($row=mysql_fetch_array($result))
{
$title=$row['title'];
$url=$row['url'];

$posts[] = array('title'=> $title, 'url'=> $url);

}

$response['posts'] = $posts;

$fp = fopen('results.json', 'w');
fwrite($fp, json_encode($response));
fclose($fp);
</pre>

?>

== Korrekte Header Informationen für JSON ==
Wenn man Header Infos mit zurückgibt kann das z.B. so aussehen

<pre>
$arrJSON = array('text'=>'Hallo Welt');
// Wir geben der Anfrage ein JSON Objekt-Literal zurück
$ajax_return_data = json_encode($arrJSON);
header('Expires: Mon, 26 Jul 2000 03:00:00 GMT');
header('Last-Modified: ' . gmdate( "D, d M Y H:i:s" ) . 'GMT');
header('Cache-Control: no-cache, must-revalidate');
header('Pragma: no-cache');
header('Content-Length: '.strlen($ajax_return_data));
header('Content-Type: application/json');
echo $ajax_return_data;
exit;
</pre>

Der Content-Type: application/json ist nach Internet Recherche korrekt. Jedoch gibt es auch Aussagen über mögliche oder für manche Anwendungen sogar notwendige anders lautende Angaben:

Für JSONP (für Zugriff auf Server anderer Domains)
Content-Type: application/javascript

Funktionieren soll angeblich auch:
application/x-javascript
text/x-javascript
text/x-json

AJAX in TYPO3 Extensions

2012-11-05T08:22:10Z

Kholja: /* Der eid Mechanismus und AJAX */

== Übersicht ==
=== Links ===
http://prototypejs.org/learn/introduction-to-ajax

http://www.interaktionsdesigner.de/2009/01/04/asynchrone-datenubertragung-zwischen-typo3-und-jquery/

=== Typo3 Skripte ohne Rendering ===
Ein Ajax Request wird in den meisten Fällen über ein JavaScript abgesetzt von einem Serverskript (PHP) verarbeitet und die Antwort als xml oder JSON Objekt zurückgegeben.

Um das PHP-Skript zu nutzen und zugleich die ganzen '''Rendering und Caching-Mechanismen von Typo3 zu vermeiden''' könnte man irgend ein php Skript nutzen. Andererseits wollen wir die Typo3 Funktionalitäten wie dbal Datenbankabfrage etc. nutzen. Deshalb stellt Typo3 den '''eid Mechanismus''' zur Verfügung (siehe unten). Mit diesem wird das '''Seitenrendering frühzeitig abgebrochen''' und der Request direkt an ein Skript weitergegeben.

Eine weitere Möglichkeit außer dem eid Mechanismus findest du unter [[Typo3 - alternatives Rendering]]

=== Schnelle Antwort ===
Dieses Skript kann sich nun ausschließlich um die Anfrage kümmern und das Ergebnis direkt zurückgeben, welches wiederum die Daten in die Seite einhängt.

== Der eid Mechanismus und AJAX ==
Quellen: http://www.typo3-tutorials.org/tutorials/extensions/eid-mechanismus.html (10.3.2010 Artikel von 2007)

http://www.blogix.net/2009/02/08/typo3-eid-oder-daten-mit-ajax-anfordern/

eID steht für Extension ID
Der eID Mechanismus ist der seit der Version 4.x dabei und kann als '''alternative Rendering Engine''' betrachtet werden.

Angesprochen wird er über einen GET oder POST Parameter. Sobald '''eID als Parameter in der URL''' vorhanden ist (zB. ''www.domain.de/?eID=schuesselwort'') wird der normaler Rendering Prozess sehr früh abgebrochen und auf ein Script weitergeleitet was wir selber programmieren müssen. Da der normale Rendering Prozess so früh abgebrochen wird kommt es auch noch zu keiner Ausgabe. Es wird nichts gecachet und kein HeaderCode ect generiert. Der eID Mechanismus kann also super im Zusammenhang mit AJAX verwendet werden.

Wollen wir uns einmal die index_ts.php (typo3/sysext/cms/tslib/) Zeile 127 bis 136 ansehen.

<pre>
<?php
// *********************
// Look for extension ID which will launch alternative output engine
// *********************
if ($temp_extId = t3lib_div::_GP('eID')) {
if ($classPath = t3lib_div::getFileAbsFileName($TYPO3_CONF_VARS['FE']['eID_include'][$temp_extId])) {
require_once(PATH_tslib.'class.tslib_eidtools.php');
require($classPath);
}
exit;
}
?>
</pre>

Hier wird überprüft ob der Schlüssel eID als Get/Post Variable vorhanden ist und falls ja, wird der normale Renderingprozess abgebrochen und auf unser Script verwiesen. Doch woher weiss TYPO3 jetzt wo unser Script liegt ?

Das sagen wir Ihm über $TYPO3_CONF_VARS['FE']['eID_include'][$temp_extId].
Wir müssten entweder in die localconf.php oder in eine ext_localconf.php einer Extension folgendes Eintragen
<pre>
<?php
// Zugriff nur von Typo3 aus:
if (!defined ('TYPO3_MODE')) {
die ('Access denied.');
}
// Registrierung der eid Scripts
$TYPO3_CONF_VARS['FE']['eID_include']['schluesselwort'] = 'EXT:myExtKey/eid/meinScript.php'; ?>
?>
</pre>
Steht jetzt also in der Adresse ''www.domain.de/?eID=schluesselwort'' geht er in die erste if Abfrage und sieht das ''$TYPO3_CONF_VARS['FE']['eID_include'][$temp_extId]'' vorhanden ist und '''speichert''' 'EXT:myExtKey/meinScript.php' in die Variable ''$classPat''h. '''Danach includiert er die Klasse eidtools und unsere eigene'''.

Da unser Script noch leer ist bekommen wir eine weisse Seite angezeigt in der auch der komplette Quelltext leer ist.

Um in unserem Script nun ein FEUSER Objekt zu haben und eine aktive DB Verbindung schreiben wir
<pre>
<?php
$feUserObj = tslib_eidtools::initFeUser(); // Initialize FE user object
tslib_eidtools::connectDB(); //Connect to database
// ...
?>
</pre>
Die erste Zeile '''initialisert den FrontentUser''' und gibt uns diesen als Objekt zurück.

Die zweite Zeile stellt eine '''Verbindung zur Datenbank''' her.

Im Weiteren können wir ganz normal auch TYPO3 Funktionalitäten benutzen und unseren eigenen Renderingablauf schreiben.

Um auch '''zB auf alle piBase Funktionen zurückzugreifen''' können wir uns ganz einfach eine Klasse erstellen die von dieser Erbt

<pre>
<?php
require_once(PATH_tslib.'class.tslib_pibase.php');

class unsereKlasse extends tslib_pibase {
function main(){
$feUserObj = tslib_eidtools::initFeUser(); // Initialize FE user object
tslib_eidtools::connectDB(); //Connect to database
echo("hallo welt");
}
}

$output = t3lib_div::makeInstance('unsereKlasse');
$output->main();
?>
</php>
</pre>
Das war es soweit, wenn Ihr noch fragen dazu habt stellt Sie einfach über die Kommentarfunktion.

== eID AJAX mit jQuery und JSON Beispiel ==

== eid ajax mit Prototype Beispiel ==
Bei diesem Beispiel gehen wir von einem normalen Frontend Plugin aus das z.B. mit dem Kickstarter erzeugt wird. Wir legen eine PHP-Klasse für die Bearbeitung der AJAX Anfrage an und eine JavaScript Datei mit den passenden Funktionen. Die PHP Datei wird in localconf registriert. Das Handling des AJAX Request überlassen wir der Prototype JavaScript Lib die in Typo3 schon dabei ist.

Diese Dateien bearbeiten wir:
<pre>
typo3conf/ext/myExtKey/
- ext_localconf.php
typo3conf/ext/myExtKey/eid/
- ajax.js
- class.myExtKey_eid.php
typo3conf/ext/myExtKey/pi1/
- class.myExtKey_pi1.php
</pre>

=== eID Datei ===
'''class.myExtkey_eid.php'''
<pre>
<?php
if (!defined ('PATH_typo3conf')) die ('Access denied: eID only.');
require_once(PATH_tslib . 'class.tslib_pibase.php');

class tx_myExtKey_eid extends tslib_pibase {
var $prefixId = 'tx_myExtKey_eid';// Same as class name
var $scriptRelPath = 'eid/class.tx_myExtKey_eid.php'; // Path to this script relative to the extension dir.
var $extKey = 'myExtKey';// The extension key.

function eid_main() {
$GLOBALS['TSFE']->fe_user = tslib_eidtools::initFeUser();
tslib_eidtools::connectDB();

// Hier beginnt unser Code
$res = 'Hallo Welt';
// Hier endet unser Code

// Wir geben der Anfrage ein XML Objekt zurück
$ajax_return_data = t3lib_div::array2xml(array('data'=>$res));
header('Expires: Mon, 26 Jul 2000 03:00:00 GMT');
header('Last-Modified: ' . gmdate( "D, d M Y H:i:s" ) . 'GMT');
header('Cache-Control: no-cache, must-revalidate');
header('Pragma: no-cache');
header('Content-Length: '.strlen($ajax_return_data));
header('Content-Type: text/xml');
echo $ajax_return_data;
exit;
}
}

$extensionkey = t3lib_div::makeInstance('tx_myExtKey_eid');
$extensionkey->eid_main();

?>
</pre>

Möchte man in diesem Skript nun auf '''Funktionen (z.B. Datenbank) aus dem TYPO3-Framework''' zurückgreifen, so muss man für die Instantiierung selbst sorge tragen. In der Datei ''typo3_src/typo3/sysext/cms/tslib/class.tslib_eidtools.php'' findet man vorgefertigte Methoden um auf die Daten eines FE-Users oder die Datenbank zugreifen zu können (Verwendung siehe im Code oben).

=== ext_localconf.php ===
Die '''Datei muß noch dem System bekannt gemacht werden'''. Dies tun wir in der '''ext_localconf.php''' indem wir folgende Zeile hinzufügen:

$TYPO3_CONF_VARS['FE']['eID_include']['myExtKeyeid'] = 'EXT:myExtKey/eid/class.myExtKey_eid.php';

Hiermit sagen wir dem System das wir gerne die Datei myExtKey_eid.php ausführen würden wenn der Parameter eID=myExtKeyeid übergeben wird.

=== Das Frontend Plugin ===
In unserem Frontent Plugin erzeugen wir einen div container mit der id ac (ajaxcontainer) diesen wollen wir später mit der Ausgabe des Ajax Scriptes füllen. Außerdem noch einen Knopf mit dem wir die Anfrage starten können.

'''class.myExtKey_pi1.php'''
<pre>
...
$content .= '
<div id="ac">ajaxcontainer</div>
<input onclick="getData()" id="myButton" type="button" value="AJAX" />
';
...
</pre>

Anmerkung: Statt dem onclick im Button, kann man auch Prototypes observe Funktion nehmen, dan kann man den Code komplett in der .js Datei verwalten.

=== JavaScript ===
Jetzt benötigen wir noch etwas JavaScript um die '''Anfrage vom FrontendPlugi'''n auszuführen:

'''JavaScript (ajax.js)'''
<pre>

function anfrage()
{
var myAjax = new Ajax.Request(
'index.php', // the Request goes to index.php
{
method: 'get', //get or post
parameters: 'eID=gbeventseid',
onComplete: show // after loading use the anzeige function
});
}

function show(orgRequest)
//
{
var xmldoc = orgRequest.responseXML; //use XML Object as answer
var result = xmldoc.getElementsByTagName("data")[0].firstChild.data;//datapart
$('ac').innerHTML = result;//drop the stuff in the div with id "ac"
}
</pre>

=== Eine Prise TypoScript ===
Wir benutzen wie gesagt das Prototype Lib. Unsere '''JavaScript Dateien''' müssen wir natürlich auch in das Frontend Plugin '''einbinden'''. Das machen wir z.B. ganz einfach über TypoScript

'''TypoScript'''
<pre>
page.includeJS.proto = typo3/contrib/prototype/prototype.js
page.includeJS.gbevents3 = EXT:gb_events/eid/ajax.js
</pre>

== Weitere Beispiele ==
Angewendet in der kleinen Extension gbflashauth. Über einen Flash Movie wird die url aufgerufen und zurückgegeben ob der User eingeloggt ist und mit welchem Namen.

<pre>
<?php
if (!defined ('PATH_typo3conf')) die ('Access denied: eID only.');
require_once(PATH_tslib . 'class.tslib_pibase.php');

class tx_gbflashauth_eid extends tslib_pibase {
var $prefixId = 'tx_gbflashauth_eid';// Same as class name
var $scriptRelPath = 'eid/class.tx_gbflashauth_eid.php'; // Path to this script relative to the extension dir.
var $extKey = 'gbflashauth';// The extension key.

function eid_main() {
$GLOBALS['TSFE']->fe_user = tslib_eidtools::initFeUser();
tslib_eidtools::connectDB();

// Hier beginnt unser Code

if(!empty($GLOBALS['TSFE']->fe_user->user)){
$uid = $GLOBALS['TSFE']->fe_user->user[uid];
$name = $GLOBALS['TSFE']->fe_user->user[name];
$firstname = $GLOBALS['TSFE']->fe_user->user[first_name];
$lastname = $GLOBALS['TSFE']->fe_user->user[last_name];
$email= $GLOBALS['TSFE']->fe_user->user[email];
$res="login=1"."&uid=".$uid."&firstname=".$firstname."&lastname=".$lastname;
}else{
$res = 'login=0';
}

//header('Expires: Mon, 26 Jul 2000 03:00:00 GMT');
header('Last-Modified: ' . gmdate( "D, d M Y H:i:s" ) . 'GMT');
header('Cache-Control: no-cache, must-revalidate');
header('Pragma: no-cache');
header('Content-Length: '.strlen($res));
//header('Content-Type: text/plain');
//echo $ajax_return_data;
echo $res;
exit;
}
}

$extensionkey = t3lib_div::makeInstance('tx_gbflashauth_eid');
$extensionkey->eid_main();

?>

</pre>

== Probleme mit cc_debug und JSON Objekten ==

von Tim Lochmüller im Adventskalender 2008

In letzter Zeit habe ich sehr oft mit AJAX und JSON gearbeitet. Leider gibt es dabei immer ein Problem mit cc_debug, weil sich dieser immer hinter die Ausgabe des JSON Codes klemmt und damit ein kaputtes JSON erzeugt. Nachdem ich heute mit meinem Kollegen Michael zusammen gesessen habe um dieses Problem zu lösen, sind wir auf eine sehr einfache Lösung gestoßen:

$GLOBALS['errorList']->clear();
die(json_encode($result));

Die Zeile 1 direkt vor der Ausgabe des JSON Codes eingebaut, verhindert, dass cc_debug noch seinen JavaScript-Code hinter her ausgibt. Und wer jetzt sagt: naje, ein die() oder exit() sollte es auch tun, der irrt sich. Versucht es gerne selber mal.

AJAX in TYPO3 Extensions

2012-11-05T08:21:27Z

Kholja: /* eid ajax mit jQuery Beispiel */

== Übersicht ==
=== Links ===
http://prototypejs.org/learn/introduction-to-ajax

http://www.interaktionsdesigner.de/2009/01/04/asynchrone-datenubertragung-zwischen-typo3-und-jquery/

=== Typo3 Skripte ohne Rendering ===
Ein Ajax Request wird in den meisten Fällen über ein JavaScript abgesetzt von einem Serverskript (PHP) verarbeitet und die Antwort als xml oder JSON Objekt zurückgegeben.

Um das PHP-Skript zu nutzen und zugleich die ganzen '''Rendering und Caching-Mechanismen von Typo3 zu vermeiden''' könnte man irgend ein php Skript nutzen. Andererseits wollen wir die Typo3 Funktionalitäten wie dbal Datenbankabfrage etc. nutzen. Deshalb stellt Typo3 den '''eid Mechanismus''' zur Verfügung (siehe unten). Mit diesem wird das '''Seitenrendering frühzeitig abgebrochen''' und der Request direkt an ein Skript weitergegeben.

Eine weitere Möglichkeit außer dem eid Mechanismus findest du unter [[Typo3 - alternatives Rendering]]

=== Schnelle Antwort ===
Dieses Skript kann sich nun ausschließlich um die Anfrage kümmern und das Ergebnis direkt zurückgeben, welches wiederum die Daten in die Seite einhängt.

== Der eid Mechanismus und AJAX ==
Quellen: http://www.typo3-tutorials.org/tutorials/extensions/eid-mechanismus.html (10.3.2010 Artikel von 2007)

http://www.blogix.net/2009/02/08/typo3-eid-oder-daten-mit-ajax-anfordern/

eID steht für Extension ID
Der eID Mechanismus ist der seit der Version 4.x dabei und kann als '''alternative Rendering Engine''' betrachtet werden.

Angesprochen wird er über einen GET oder POST Parameter. Sobald '''eID als Parameter in der URL''' vorhanden ist (zB. ''www.domain.de/?eID=schuesselwort'') wird der normaler Rendering Prozess sehr früh abgebrochen und auf ein Script weitergeleitet was wir selber programmieren müssen. Da der normale Rendering Prozess so früh abgebrochen wird kommt es auch noch zu keiner Ausgabe. Es wird nichts gecachet und kein HeaderCode ect generiert. Der eID Mechanismus kann also super im Zusammenhang mit AJAX verwendet werden.

Wollen wir uns einmal die index_ts.php (typo3/sysext/cms/tslib/) Zeile 127 bis 136 ansehen.

<pre>
<?php
// *********************
// Look for extension ID which will launch alternative output engine
// *********************
if ($temp_extId = t3lib_div::_GP('eID')) {
if ($classPath = t3lib_div::getFileAbsFileName($TYPO3_CONF_VARS['FE']['eID_include'][$temp_extId])) {
require_once(PATH_tslib.'class.tslib_eidtools.php');
require($classPath);
}
exit;
}
?>
</pre>

Hier wird überprüft ob der Schlüssel eID als Get/Post Variable vorhanden ist und falls ja, wird der normale Renderingprozess abgebrochen und auf unser Script verwiesen. Doch woher weiss TYPO3 jetzt wo unser Script liegt ?

Das sagen wir Ihm über $TYPO3_CONF_VARS['FE']['eID_include'][$temp_extId].
Wir müssten entweder in die localconf.php oder in eine ext_localconf.php einer Extension folgendes Eintragen
<pre>
<?php
// Zugriff nur von Typo3 aus:
if (!defined ('TYPO3_MODE')) {
die ('Access denied.');
}
// Registrierung der eid Scripts
$TYPO3_CONF_VARS['FE']['eID_include']['schluesselwort'] = 'EXT:myExtKey/eid/meinScript.php'; ?>
?>
</pre>
Steht jetzt also in der Adresse ''www.domain.de/?eID=schluesselwort'' geht er in die erste if Abfrage und sieht das ''$TYPO3_CONF_VARS['FE']['eID_include'][$temp_extId]'' vorhanden ist und '''speichert''' 'EXT:myExtKey/meinScript.php' in die Variable ''$classPat''h. '''Danach includiert er die Klasse eidtools und unsere eigene'''.

Da unser Script noch leer ist bekommen wir eine weisse Seite angezeigt in der auch der komplette Quelltext leer ist.

Um in unserem Script nun ein FEUSER Objekt zu haben und eine aktive DB Verbindung schreiben wir
<pre>
<?php
$feUserObj = tslib_eidtools::initFeUser(); // Initialize FE user object
tslib_eidtools::connectDB(); //Connect to database
// ...
?>
</pre>
Die erste Zeile '''initialisert den FrontentUser''' und gibt uns diesen als Objekt zurück.

Die zweite Zeile stellt eine '''Verbindung zur Datenbank''' her.

Im Weiteren können wir ganz normal auch TYPO3 Funktionalitäten benutzen und unseren eigenen Renderingablauf schreiben.

Um auch '''zB auf alle piBase Funktionen zurückzugreifen''' können wir uns ganz einfach eine Klasse erstellen die von dieser Erbt

<pre>
<?php
require_once(PATH_tslib.'class.tslib_pibase.php');

class unsereKlasse extends tslib_pibase {
function main(){
$feUserObj = tslib_eidtools::initFeUser(); // Initialize FE user object
tslib_eidtools::connectDB(); //Connect to database
echo("hallo welt");
}
}

$output = t3lib_div::makeInstance('unsereKlasse');
$output->main();
?>
</php>
</pre>
Das war es soweit, wenn Ihr noch fragen dazu habt stellt Sie einfach über die Kommentarfunktion.

== eid ajax mit Prototype Beispiel ==
Bei diesem Beispiel gehen wir von einem normalen Frontend Plugin aus das z.B. mit dem Kickstarter erzeugt wird. Wir legen eine PHP-Klasse für die Bearbeitung der AJAX Anfrage an und eine JavaScript Datei mit den passenden Funktionen. Die PHP Datei wird in localconf registriert. Das Handling des AJAX Request überlassen wir der Prototype JavaScript Lib die in Typo3 schon dabei ist.

Diese Dateien bearbeiten wir:
<pre>
typo3conf/ext/myExtKey/
- ext_localconf.php
typo3conf/ext/myExtKey/eid/
- ajax.js
- class.myExtKey_eid.php
typo3conf/ext/myExtKey/pi1/
- class.myExtKey_pi1.php
</pre>

=== eID Datei ===
'''class.myExtkey_eid.php'''
<pre>
<?php
if (!defined ('PATH_typo3conf')) die ('Access denied: eID only.');
require_once(PATH_tslib . 'class.tslib_pibase.php');

class tx_myExtKey_eid extends tslib_pibase {
var $prefixId = 'tx_myExtKey_eid';// Same as class name
var $scriptRelPath = 'eid/class.tx_myExtKey_eid.php'; // Path to this script relative to the extension dir.
var $extKey = 'myExtKey';// The extension key.

function eid_main() {
$GLOBALS['TSFE']->fe_user = tslib_eidtools::initFeUser();
tslib_eidtools::connectDB();

// Hier beginnt unser Code
$res = 'Hallo Welt';
// Hier endet unser Code

// Wir geben der Anfrage ein XML Objekt zurück
$ajax_return_data = t3lib_div::array2xml(array('data'=>$res));
header('Expires: Mon, 26 Jul 2000 03:00:00 GMT');
header('Last-Modified: ' . gmdate( "D, d M Y H:i:s" ) . 'GMT');
header('Cache-Control: no-cache, must-revalidate');
header('Pragma: no-cache');
header('Content-Length: '.strlen($ajax_return_data));
header('Content-Type: text/xml');
echo $ajax_return_data;
exit;
}
}

$extensionkey = t3lib_div::makeInstance('tx_myExtKey_eid');
$extensionkey->eid_main();

?>
</pre>

Möchte man in diesem Skript nun auf '''Funktionen (z.B. Datenbank) aus dem TYPO3-Framework''' zurückgreifen, so muss man für die Instantiierung selbst sorge tragen. In der Datei ''typo3_src/typo3/sysext/cms/tslib/class.tslib_eidtools.php'' findet man vorgefertigte Methoden um auf die Daten eines FE-Users oder die Datenbank zugreifen zu können (Verwendung siehe im Code oben).

=== ext_localconf.php ===
Die '''Datei muß noch dem System bekannt gemacht werden'''. Dies tun wir in der '''ext_localconf.php''' indem wir folgende Zeile hinzufügen:

$TYPO3_CONF_VARS['FE']['eID_include']['myExtKeyeid'] = 'EXT:myExtKey/eid/class.myExtKey_eid.php';

Hiermit sagen wir dem System das wir gerne die Datei myExtKey_eid.php ausführen würden wenn der Parameter eID=myExtKeyeid übergeben wird.

=== Das Frontend Plugin ===
In unserem Frontent Plugin erzeugen wir einen div container mit der id ac (ajaxcontainer) diesen wollen wir später mit der Ausgabe des Ajax Scriptes füllen. Außerdem noch einen Knopf mit dem wir die Anfrage starten können.

'''class.myExtKey_pi1.php'''
<pre>
...
$content .= '
<div id="ac">ajaxcontainer</div>
<input onclick="getData()" id="myButton" type="button" value="AJAX" />
';
...
</pre>

Anmerkung: Statt dem onclick im Button, kann man auch Prototypes observe Funktion nehmen, dan kann man den Code komplett in der .js Datei verwalten.

=== JavaScript ===
Jetzt benötigen wir noch etwas JavaScript um die '''Anfrage vom FrontendPlugi'''n auszuführen:

'''JavaScript (ajax.js)'''
<pre>

function anfrage()
{
var myAjax = new Ajax.Request(
'index.php', // the Request goes to index.php
{
method: 'get', //get or post
parameters: 'eID=gbeventseid',
onComplete: show // after loading use the anzeige function
});
}

function show(orgRequest)
//
{
var xmldoc = orgRequest.responseXML; //use XML Object as answer
var result = xmldoc.getElementsByTagName("data")[0].firstChild.data;//datapart
$('ac').innerHTML = result;//drop the stuff in the div with id "ac"
}
</pre>

=== Eine Prise TypoScript ===
Wir benutzen wie gesagt das Prototype Lib. Unsere '''JavaScript Dateien''' müssen wir natürlich auch in das Frontend Plugin '''einbinden'''. Das machen wir z.B. ganz einfach über TypoScript

'''TypoScript'''
<pre>
page.includeJS.proto = typo3/contrib/prototype/prototype.js
page.includeJS.gbevents3 = EXT:gb_events/eid/ajax.js
</pre>

== Weitere Beispiele ==
Angewendet in der kleinen Extension gbflashauth. Über einen Flash Movie wird die url aufgerufen und zurückgegeben ob der User eingeloggt ist und mit welchem Namen.

<pre>
<?php
if (!defined ('PATH_typo3conf')) die ('Access denied: eID only.');
require_once(PATH_tslib . 'class.tslib_pibase.php');

class tx_gbflashauth_eid extends tslib_pibase {
var $prefixId = 'tx_gbflashauth_eid';// Same as class name
var $scriptRelPath = 'eid/class.tx_gbflashauth_eid.php'; // Path to this script relative to the extension dir.
var $extKey = 'gbflashauth';// The extension key.

function eid_main() {
$GLOBALS['TSFE']->fe_user = tslib_eidtools::initFeUser();
tslib_eidtools::connectDB();

// Hier beginnt unser Code

if(!empty($GLOBALS['TSFE']->fe_user->user)){
$uid = $GLOBALS['TSFE']->fe_user->user[uid];
$name = $GLOBALS['TSFE']->fe_user->user[name];
$firstname = $GLOBALS['TSFE']->fe_user->user[first_name];
$lastname = $GLOBALS['TSFE']->fe_user->user[last_name];
$email= $GLOBALS['TSFE']->fe_user->user[email];
$res="login=1"."&uid=".$uid."&firstname=".$firstname."&lastname=".$lastname;
}else{
$res = 'login=0';
}

//header('Expires: Mon, 26 Jul 2000 03:00:00 GMT');
header('Last-Modified: ' . gmdate( "D, d M Y H:i:s" ) . 'GMT');
header('Cache-Control: no-cache, must-revalidate');
header('Pragma: no-cache');
header('Content-Length: '.strlen($res));
//header('Content-Type: text/plain');
//echo $ajax_return_data;
echo $res;
exit;
}
}

$extensionkey = t3lib_div::makeInstance('tx_gbflashauth_eid');
$extensionkey->eid_main();

?>

</pre>

== Probleme mit cc_debug und JSON Objekten ==

von Tim Lochmüller im Adventskalender 2008

In letzter Zeit habe ich sehr oft mit AJAX und JSON gearbeitet. Leider gibt es dabei immer ein Problem mit cc_debug, weil sich dieser immer hinter die Ausgabe des JSON Codes klemmt und damit ein kaputtes JSON erzeugt. Nachdem ich heute mit meinem Kollegen Michael zusammen gesessen habe um dieses Problem zu lösen, sind wir auf eine sehr einfache Lösung gestoßen:

$GLOBALS['errorList']->clear();
die(json_encode($result));

Die Zeile 1 direkt vor der Ausgabe des JSON Codes eingebaut, verhindert, dass cc_debug noch seinen JavaScript-Code hinter her ausgibt. Und wer jetzt sagt: naje, ein die() oder exit() sollte es auch tun, der irrt sich. Versucht es gerne selber mal.

AJAX in TYPO3 Extensions

2012-11-05T07:27:08Z

Kholja: /* Probleme mit cc_debug und JSON Objekten */

== Übersicht ==
=== Links ===
http://prototypejs.org/learn/introduction-to-ajax

http://www.interaktionsdesigner.de/2009/01/04/asynchrone-datenubertragung-zwischen-typo3-und-jquery/

=== Typo3 Skripte ohne Rendering ===
Ein Ajax Request wird in den meisten Fällen über ein JavaScript abgesetzt von einem Serverskript (PHP) verarbeitet und die Antwort als xml oder JSON Objekt zurückgegeben.

Um das PHP-Skript zu nutzen und zugleich die ganzen '''Rendering und Caching-Mechanismen von Typo3 zu vermeiden''' könnte man irgend ein php Skript nutzen. Andererseits wollen wir die Typo3 Funktionalitäten wie dbal Datenbankabfrage etc. nutzen. Deshalb stellt Typo3 den '''eid Mechanismus''' zur Verfügung (siehe unten). Mit diesem wird das '''Seitenrendering frühzeitig abgebrochen''' und der Request direkt an ein Skript weitergegeben.

Eine weitere Möglichkeit außer dem eid Mechanismus findest du unter [[Typo3 - alternatives Rendering]]

=== Schnelle Antwort ===
Dieses Skript kann sich nun ausschließlich um die Anfrage kümmern und das Ergebnis direkt zurückgeben, welches wiederum die Daten in die Seite einhängt.

== Der eid Mechanismus und AJAX ==
Quellen: http://www.typo3-tutorials.org/tutorials/extensions/eid-mechanismus.html (10.3.2010 Artikel von 2007)

http://www.blogix.net/2009/02/08/typo3-eid-oder-daten-mit-ajax-anfordern/

eID steht für Extension ID
Der eID Mechanismus ist der seit der Version 4.x dabei und kann als '''alternative Rendering Engine''' betrachtet werden.

Angesprochen wird er über einen GET oder POST Parameter. Sobald '''eID als Parameter in der URL''' vorhanden ist (zB. ''www.domain.de/?eID=schuesselwort'') wird der normaler Rendering Prozess sehr früh abgebrochen und auf ein Script weitergeleitet was wir selber programmieren müssen. Da der normale Rendering Prozess so früh abgebrochen wird kommt es auch noch zu keiner Ausgabe. Es wird nichts gecachet und kein HeaderCode ect generiert. Der eID Mechanismus kann also super im Zusammenhang mit AJAX verwendet werden.

Wollen wir uns einmal die index_ts.php (typo3/sysext/cms/tslib/) Zeile 127 bis 136 ansehen.

<pre>
<?php
// *********************
// Look for extension ID which will launch alternative output engine
// *********************
if ($temp_extId = t3lib_div::_GP('eID')) {
if ($classPath = t3lib_div::getFileAbsFileName($TYPO3_CONF_VARS['FE']['eID_include'][$temp_extId])) {
require_once(PATH_tslib.'class.tslib_eidtools.php');
require($classPath);
}
exit;
}
?>
</pre>

Hier wird überprüft ob der Schlüssel eID als Get/Post Variable vorhanden ist und falls ja, wird der normale Renderingprozess abgebrochen und auf unser Script verwiesen. Doch woher weiss TYPO3 jetzt wo unser Script liegt ?

Das sagen wir Ihm über $TYPO3_CONF_VARS['FE']['eID_include'][$temp_extId].
Wir müssten entweder in die localconf.php oder in eine ext_localconf.php einer Extension folgendes Eintragen
<pre>
<?php
// Zugriff nur von Typo3 aus:
if (!defined ('TYPO3_MODE')) {
die ('Access denied.');
}
// Registrierung der eid Scripts
$TYPO3_CONF_VARS['FE']['eID_include']['schluesselwort'] = 'EXT:myExtKey/eid/meinScript.php'; ?>
?>
</pre>
Steht jetzt also in der Adresse ''www.domain.de/?eID=schluesselwort'' geht er in die erste if Abfrage und sieht das ''$TYPO3_CONF_VARS['FE']['eID_include'][$temp_extId]'' vorhanden ist und '''speichert''' 'EXT:myExtKey/meinScript.php' in die Variable ''$classPat''h. '''Danach includiert er die Klasse eidtools und unsere eigene'''.

Da unser Script noch leer ist bekommen wir eine weisse Seite angezeigt in der auch der komplette Quelltext leer ist.

Um in unserem Script nun ein FEUSER Objekt zu haben und eine aktive DB Verbindung schreiben wir
<pre>
<?php
$feUserObj = tslib_eidtools::initFeUser(); // Initialize FE user object
tslib_eidtools::connectDB(); //Connect to database
// ...
?>
</pre>
Die erste Zeile '''initialisert den FrontentUser''' und gibt uns diesen als Objekt zurück.

Die zweite Zeile stellt eine '''Verbindung zur Datenbank''' her.

Im Weiteren können wir ganz normal auch TYPO3 Funktionalitäten benutzen und unseren eigenen Renderingablauf schreiben.

Um auch '''zB auf alle piBase Funktionen zurückzugreifen''' können wir uns ganz einfach eine Klasse erstellen die von dieser Erbt

<pre>
<?php
require_once(PATH_tslib.'class.tslib_pibase.php');

class unsereKlasse extends tslib_pibase {
function main(){
$feUserObj = tslib_eidtools::initFeUser(); // Initialize FE user object
tslib_eidtools::connectDB(); //Connect to database
echo("hallo welt");
}
}

$output = t3lib_div::makeInstance('unsereKlasse');
$output->main();
?>
</php>
</pre>
Das war es soweit, wenn Ihr noch fragen dazu habt stellt Sie einfach über die Kommentarfunktion.

== eid ajax mit jQuery Beispiel ==
Quelle: s.o.

== eid ajax mit Prototype Beispiel ==
Bei diesem Beispiel gehen wir von einem normalen Frontend Plugin aus das z.B. mit dem Kickstarter erzeugt wird. Wir legen eine PHP-Klasse für die Bearbeitung der AJAX Anfrage an und eine JavaScript Datei mit den passenden Funktionen. Die PHP Datei wird in localconf registriert. Das Handling des AJAX Request überlassen wir der Prototype JavaScript Lib die in Typo3 schon dabei ist.

Diese Dateien bearbeiten wir:
<pre>
typo3conf/ext/myExtKey/
- ext_localconf.php
typo3conf/ext/myExtKey/eid/
- ajax.js
- class.myExtKey_eid.php
typo3conf/ext/myExtKey/pi1/
- class.myExtKey_pi1.php
</pre>

=== eID Datei ===
'''class.myExtkey_eid.php'''
<pre>
<?php
if (!defined ('PATH_typo3conf')) die ('Access denied: eID only.');
require_once(PATH_tslib . 'class.tslib_pibase.php');

class tx_myExtKey_eid extends tslib_pibase {
var $prefixId = 'tx_myExtKey_eid';// Same as class name
var $scriptRelPath = 'eid/class.tx_myExtKey_eid.php'; // Path to this script relative to the extension dir.
var $extKey = 'myExtKey';// The extension key.

function eid_main() {
$GLOBALS['TSFE']->fe_user = tslib_eidtools::initFeUser();
tslib_eidtools::connectDB();

// Hier beginnt unser Code
$res = 'Hallo Welt';
// Hier endet unser Code

// Wir geben der Anfrage ein XML Objekt zurück
$ajax_return_data = t3lib_div::array2xml(array('data'=>$res));
header('Expires: Mon, 26 Jul 2000 03:00:00 GMT');
header('Last-Modified: ' . gmdate( "D, d M Y H:i:s" ) . 'GMT');
header('Cache-Control: no-cache, must-revalidate');
header('Pragma: no-cache');
header('Content-Length: '.strlen($ajax_return_data));
header('Content-Type: text/xml');
echo $ajax_return_data;
exit;
}
}

$extensionkey = t3lib_div::makeInstance('tx_myExtKey_eid');
$extensionkey->eid_main();

?>
</pre>

Möchte man in diesem Skript nun auf '''Funktionen (z.B. Datenbank) aus dem TYPO3-Framework''' zurückgreifen, so muss man für die Instantiierung selbst sorge tragen. In der Datei ''typo3_src/typo3/sysext/cms/tslib/class.tslib_eidtools.php'' findet man vorgefertigte Methoden um auf die Daten eines FE-Users oder die Datenbank zugreifen zu können (Verwendung siehe im Code oben).

=== ext_localconf.php ===
Die '''Datei muß noch dem System bekannt gemacht werden'''. Dies tun wir in der '''ext_localconf.php''' indem wir folgende Zeile hinzufügen:

$TYPO3_CONF_VARS['FE']['eID_include']['myExtKeyeid'] = 'EXT:myExtKey/eid/class.myExtKey_eid.php';

Hiermit sagen wir dem System das wir gerne die Datei myExtKey_eid.php ausführen würden wenn der Parameter eID=myExtKeyeid übergeben wird.

=== Das Frontend Plugin ===
In unserem Frontent Plugin erzeugen wir einen div container mit der id ac (ajaxcontainer) diesen wollen wir später mit der Ausgabe des Ajax Scriptes füllen. Außerdem noch einen Knopf mit dem wir die Anfrage starten können.

'''class.myExtKey_pi1.php'''
<pre>
...
$content .= '
<div id="ac">ajaxcontainer</div>
<input onclick="getData()" id="myButton" type="button" value="AJAX" />
';
...
</pre>

Anmerkung: Statt dem onclick im Button, kann man auch Prototypes observe Funktion nehmen, dan kann man den Code komplett in der .js Datei verwalten.

=== JavaScript ===
Jetzt benötigen wir noch etwas JavaScript um die '''Anfrage vom FrontendPlugi'''n auszuführen:

'''JavaScript (ajax.js)'''
<pre>

function anfrage()
{
var myAjax = new Ajax.Request(
'index.php', // the Request goes to index.php
{
method: 'get', //get or post
parameters: 'eID=gbeventseid',
onComplete: show // after loading use the anzeige function
});
}

function show(orgRequest)
//
{
var xmldoc = orgRequest.responseXML; //use XML Object as answer
var result = xmldoc.getElementsByTagName("data")[0].firstChild.data;//datapart
$('ac').innerHTML = result;//drop the stuff in the div with id "ac"
}
</pre>

=== Eine Prise TypoScript ===
Wir benutzen wie gesagt das Prototype Lib. Unsere '''JavaScript Dateien''' müssen wir natürlich auch in das Frontend Plugin '''einbinden'''. Das machen wir z.B. ganz einfach über TypoScript

'''TypoScript'''
<pre>
page.includeJS.proto = typo3/contrib/prototype/prototype.js
page.includeJS.gbevents3 = EXT:gb_events/eid/ajax.js
</pre>

== Weitere Beispiele ==
Angewendet in der kleinen Extension gbflashauth. Über einen Flash Movie wird die url aufgerufen und zurückgegeben ob der User eingeloggt ist und mit welchem Namen.

<pre>
<?php
if (!defined ('PATH_typo3conf')) die ('Access denied: eID only.');
require_once(PATH_tslib . 'class.tslib_pibase.php');

class tx_gbflashauth_eid extends tslib_pibase {
var $prefixId = 'tx_gbflashauth_eid';// Same as class name
var $scriptRelPath = 'eid/class.tx_gbflashauth_eid.php'; // Path to this script relative to the extension dir.
var $extKey = 'gbflashauth';// The extension key.

function eid_main() {
$GLOBALS['TSFE']->fe_user = tslib_eidtools::initFeUser();
tslib_eidtools::connectDB();

// Hier beginnt unser Code

if(!empty($GLOBALS['TSFE']->fe_user->user)){
$uid = $GLOBALS['TSFE']->fe_user->user[uid];
$name = $GLOBALS['TSFE']->fe_user->user[name];
$firstname = $GLOBALS['TSFE']->fe_user->user[first_name];
$lastname = $GLOBALS['TSFE']->fe_user->user[last_name];
$email= $GLOBALS['TSFE']->fe_user->user[email];
$res="login=1"."&uid=".$uid."&firstname=".$firstname."&lastname=".$lastname;
}else{
$res = 'login=0';
}

//header('Expires: Mon, 26 Jul 2000 03:00:00 GMT');
header('Last-Modified: ' . gmdate( "D, d M Y H:i:s" ) . 'GMT');
header('Cache-Control: no-cache, must-revalidate');
header('Pragma: no-cache');
header('Content-Length: '.strlen($res));
//header('Content-Type: text/plain');
//echo $ajax_return_data;
echo $res;
exit;
}
}

$extensionkey = t3lib_div::makeInstance('tx_gbflashauth_eid');
$extensionkey->eid_main();

?>

</pre>

== Probleme mit cc_debug und JSON Objekten ==

von Tim Lochmüller im Adventskalender 2008

In letzter Zeit habe ich sehr oft mit AJAX und JSON gearbeitet. Leider gibt es dabei immer ein Problem mit cc_debug, weil sich dieser immer hinter die Ausgabe des JSON Codes klemmt und damit ein kaputtes JSON erzeugt. Nachdem ich heute mit meinem Kollegen Michael zusammen gesessen habe um dieses Problem zu lösen, sind wir auf eine sehr einfache Lösung gestoßen:

$GLOBALS['errorList']->clear();
die(json_encode($result));

Die Zeile 1 direkt vor der Ausgabe des JSON Codes eingebaut, verhindert, dass cc_debug noch seinen JavaScript-Code hinter her ausgibt. Und wer jetzt sagt: naje, ein die() oder exit() sollte es auch tun, der irrt sich. Versucht es gerne selber mal.

AJAX in TYPO3 Extensions

2012-11-05T07:26:15Z

Kholja: /* Probleme mit cc_debug und JASON Objekten */

== Übersicht ==
=== Links ===
http://prototypejs.org/learn/introduction-to-ajax

http://www.interaktionsdesigner.de/2009/01/04/asynchrone-datenubertragung-zwischen-typo3-und-jquery/

=== Typo3 Skripte ohne Rendering ===
Ein Ajax Request wird in den meisten Fällen über ein JavaScript abgesetzt von einem Serverskript (PHP) verarbeitet und die Antwort als xml oder JSON Objekt zurückgegeben.

Um das PHP-Skript zu nutzen und zugleich die ganzen '''Rendering und Caching-Mechanismen von Typo3 zu vermeiden''' könnte man irgend ein php Skript nutzen. Andererseits wollen wir die Typo3 Funktionalitäten wie dbal Datenbankabfrage etc. nutzen. Deshalb stellt Typo3 den '''eid Mechanismus''' zur Verfügung (siehe unten). Mit diesem wird das '''Seitenrendering frühzeitig abgebrochen''' und der Request direkt an ein Skript weitergegeben.

Eine weitere Möglichkeit außer dem eid Mechanismus findest du unter [[Typo3 - alternatives Rendering]]

=== Schnelle Antwort ===
Dieses Skript kann sich nun ausschließlich um die Anfrage kümmern und das Ergebnis direkt zurückgeben, welches wiederum die Daten in die Seite einhängt.

== Der eid Mechanismus und AJAX ==
Quellen: http://www.typo3-tutorials.org/tutorials/extensions/eid-mechanismus.html (10.3.2010 Artikel von 2007)

http://www.blogix.net/2009/02/08/typo3-eid-oder-daten-mit-ajax-anfordern/

eID steht für Extension ID
Der eID Mechanismus ist der seit der Version 4.x dabei und kann als '''alternative Rendering Engine''' betrachtet werden.

Angesprochen wird er über einen GET oder POST Parameter. Sobald '''eID als Parameter in der URL''' vorhanden ist (zB. ''www.domain.de/?eID=schuesselwort'') wird der normaler Rendering Prozess sehr früh abgebrochen und auf ein Script weitergeleitet was wir selber programmieren müssen. Da der normale Rendering Prozess so früh abgebrochen wird kommt es auch noch zu keiner Ausgabe. Es wird nichts gecachet und kein HeaderCode ect generiert. Der eID Mechanismus kann also super im Zusammenhang mit AJAX verwendet werden.

Wollen wir uns einmal die index_ts.php (typo3/sysext/cms/tslib/) Zeile 127 bis 136 ansehen.

<pre>
<?php
// *********************
// Look for extension ID which will launch alternative output engine
// *********************
if ($temp_extId = t3lib_div::_GP('eID')) {
if ($classPath = t3lib_div::getFileAbsFileName($TYPO3_CONF_VARS['FE']['eID_include'][$temp_extId])) {
require_once(PATH_tslib.'class.tslib_eidtools.php');
require($classPath);
}
exit;
}
?>
</pre>

Hier wird überprüft ob der Schlüssel eID als Get/Post Variable vorhanden ist und falls ja, wird der normale Renderingprozess abgebrochen und auf unser Script verwiesen. Doch woher weiss TYPO3 jetzt wo unser Script liegt ?

Das sagen wir Ihm über $TYPO3_CONF_VARS['FE']['eID_include'][$temp_extId].
Wir müssten entweder in die localconf.php oder in eine ext_localconf.php einer Extension folgendes Eintragen
<pre>
<?php
// Zugriff nur von Typo3 aus:
if (!defined ('TYPO3_MODE')) {
die ('Access denied.');
}
// Registrierung der eid Scripts
$TYPO3_CONF_VARS['FE']['eID_include']['schluesselwort'] = 'EXT:myExtKey/eid/meinScript.php'; ?>
?>
</pre>
Steht jetzt also in der Adresse ''www.domain.de/?eID=schluesselwort'' geht er in die erste if Abfrage und sieht das ''$TYPO3_CONF_VARS['FE']['eID_include'][$temp_extId]'' vorhanden ist und '''speichert''' 'EXT:myExtKey/meinScript.php' in die Variable ''$classPat''h. '''Danach includiert er die Klasse eidtools und unsere eigene'''.

Da unser Script noch leer ist bekommen wir eine weisse Seite angezeigt in der auch der komplette Quelltext leer ist.

Um in unserem Script nun ein FEUSER Objekt zu haben und eine aktive DB Verbindung schreiben wir
<pre>
<?php
$feUserObj = tslib_eidtools::initFeUser(); // Initialize FE user object
tslib_eidtools::connectDB(); //Connect to database
// ...
?>
</pre>
Die erste Zeile '''initialisert den FrontentUser''' und gibt uns diesen als Objekt zurück.

Die zweite Zeile stellt eine '''Verbindung zur Datenbank''' her.

Im Weiteren können wir ganz normal auch TYPO3 Funktionalitäten benutzen und unseren eigenen Renderingablauf schreiben.

Um auch '''zB auf alle piBase Funktionen zurückzugreifen''' können wir uns ganz einfach eine Klasse erstellen die von dieser Erbt

<pre>
<?php
require_once(PATH_tslib.'class.tslib_pibase.php');

class unsereKlasse extends tslib_pibase {
function main(){
$feUserObj = tslib_eidtools::initFeUser(); // Initialize FE user object
tslib_eidtools::connectDB(); //Connect to database
echo("hallo welt");
}
}

$output = t3lib_div::makeInstance('unsereKlasse');
$output->main();
?>
</php>
</pre>
Das war es soweit, wenn Ihr noch fragen dazu habt stellt Sie einfach über die Kommentarfunktion.

== eid ajax mit jQuery Beispiel ==
Quelle: s.o.

== eid ajax mit Prototype Beispiel ==
Bei diesem Beispiel gehen wir von einem normalen Frontend Plugin aus das z.B. mit dem Kickstarter erzeugt wird. Wir legen eine PHP-Klasse für die Bearbeitung der AJAX Anfrage an und eine JavaScript Datei mit den passenden Funktionen. Die PHP Datei wird in localconf registriert. Das Handling des AJAX Request überlassen wir der Prototype JavaScript Lib die in Typo3 schon dabei ist.

Diese Dateien bearbeiten wir:
<pre>
typo3conf/ext/myExtKey/
- ext_localconf.php
typo3conf/ext/myExtKey/eid/
- ajax.js
- class.myExtKey_eid.php
typo3conf/ext/myExtKey/pi1/
- class.myExtKey_pi1.php
</pre>

=== eID Datei ===
'''class.myExtkey_eid.php'''
<pre>
<?php
if (!defined ('PATH_typo3conf')) die ('Access denied: eID only.');
require_once(PATH_tslib . 'class.tslib_pibase.php');

class tx_myExtKey_eid extends tslib_pibase {
var $prefixId = 'tx_myExtKey_eid';// Same as class name
var $scriptRelPath = 'eid/class.tx_myExtKey_eid.php'; // Path to this script relative to the extension dir.
var $extKey = 'myExtKey';// The extension key.

function eid_main() {
$GLOBALS['TSFE']->fe_user = tslib_eidtools::initFeUser();
tslib_eidtools::connectDB();

// Hier beginnt unser Code
$res = 'Hallo Welt';
// Hier endet unser Code

// Wir geben der Anfrage ein XML Objekt zurück
$ajax_return_data = t3lib_div::array2xml(array('data'=>$res));
header('Expires: Mon, 26 Jul 2000 03:00:00 GMT');
header('Last-Modified: ' . gmdate( "D, d M Y H:i:s" ) . 'GMT');
header('Cache-Control: no-cache, must-revalidate');
header('Pragma: no-cache');
header('Content-Length: '.strlen($ajax_return_data));
header('Content-Type: text/xml');
echo $ajax_return_data;
exit;
}
}

$extensionkey = t3lib_div::makeInstance('tx_myExtKey_eid');
$extensionkey->eid_main();

?>
</pre>

Möchte man in diesem Skript nun auf '''Funktionen (z.B. Datenbank) aus dem TYPO3-Framework''' zurückgreifen, so muss man für die Instantiierung selbst sorge tragen. In der Datei ''typo3_src/typo3/sysext/cms/tslib/class.tslib_eidtools.php'' findet man vorgefertigte Methoden um auf die Daten eines FE-Users oder die Datenbank zugreifen zu können (Verwendung siehe im Code oben).

=== ext_localconf.php ===
Die '''Datei muß noch dem System bekannt gemacht werden'''. Dies tun wir in der '''ext_localconf.php''' indem wir folgende Zeile hinzufügen:

$TYPO3_CONF_VARS['FE']['eID_include']['myExtKeyeid'] = 'EXT:myExtKey/eid/class.myExtKey_eid.php';

Hiermit sagen wir dem System das wir gerne die Datei myExtKey_eid.php ausführen würden wenn der Parameter eID=myExtKeyeid übergeben wird.

=== Das Frontend Plugin ===
In unserem Frontent Plugin erzeugen wir einen div container mit der id ac (ajaxcontainer) diesen wollen wir später mit der Ausgabe des Ajax Scriptes füllen. Außerdem noch einen Knopf mit dem wir die Anfrage starten können.

'''class.myExtKey_pi1.php'''
<pre>
...
$content .= '
<div id="ac">ajaxcontainer</div>
<input onclick="getData()" id="myButton" type="button" value="AJAX" />
';
...
</pre>

Anmerkung: Statt dem onclick im Button, kann man auch Prototypes observe Funktion nehmen, dan kann man den Code komplett in der .js Datei verwalten.

=== JavaScript ===
Jetzt benötigen wir noch etwas JavaScript um die '''Anfrage vom FrontendPlugi'''n auszuführen:

'''JavaScript (ajax.js)'''
<pre>

function anfrage()
{
var myAjax = new Ajax.Request(
'index.php', // the Request goes to index.php
{
method: 'get', //get or post
parameters: 'eID=gbeventseid',
onComplete: show // after loading use the anzeige function
});
}

function show(orgRequest)
//
{
var xmldoc = orgRequest.responseXML; //use XML Object as answer
var result = xmldoc.getElementsByTagName("data")[0].firstChild.data;//datapart
$('ac').innerHTML = result;//drop the stuff in the div with id "ac"
}
</pre>

=== Eine Prise TypoScript ===
Wir benutzen wie gesagt das Prototype Lib. Unsere '''JavaScript Dateien''' müssen wir natürlich auch in das Frontend Plugin '''einbinden'''. Das machen wir z.B. ganz einfach über TypoScript

'''TypoScript'''
<pre>
page.includeJS.proto = typo3/contrib/prototype/prototype.js
page.includeJS.gbevents3 = EXT:gb_events/eid/ajax.js
</pre>

== Weitere Beispiele ==
Angewendet in der kleinen Extension gbflashauth. Über einen Flash Movie wird die url aufgerufen und zurückgegeben ob der User eingeloggt ist und mit welchem Namen.

<pre>
<?php
if (!defined ('PATH_typo3conf')) die ('Access denied: eID only.');
require_once(PATH_tslib . 'class.tslib_pibase.php');

class tx_gbflashauth_eid extends tslib_pibase {
var $prefixId = 'tx_gbflashauth_eid';// Same as class name
var $scriptRelPath = 'eid/class.tx_gbflashauth_eid.php'; // Path to this script relative to the extension dir.
var $extKey = 'gbflashauth';// The extension key.

function eid_main() {
$GLOBALS['TSFE']->fe_user = tslib_eidtools::initFeUser();
tslib_eidtools::connectDB();

// Hier beginnt unser Code

if(!empty($GLOBALS['TSFE']->fe_user->user)){
$uid = $GLOBALS['TSFE']->fe_user->user[uid];
$name = $GLOBALS['TSFE']->fe_user->user[name];
$firstname = $GLOBALS['TSFE']->fe_user->user[first_name];
$lastname = $GLOBALS['TSFE']->fe_user->user[last_name];
$email= $GLOBALS['TSFE']->fe_user->user[email];
$res="login=1"."&uid=".$uid."&firstname=".$firstname."&lastname=".$lastname;
}else{
$res = 'login=0';
}

//header('Expires: Mon, 26 Jul 2000 03:00:00 GMT');
header('Last-Modified: ' . gmdate( "D, d M Y H:i:s" ) . 'GMT');
header('Cache-Control: no-cache, must-revalidate');
header('Pragma: no-cache');
header('Content-Length: '.strlen($res));
//header('Content-Type: text/plain');
//echo $ajax_return_data;
echo $res;
exit;
}
}

$extensionkey = t3lib_div::makeInstance('tx_gbflashauth_eid');
$extensionkey->eid_main();

?>

</pre>

== Probleme mit cc_debug und JSON Objekten ==

von Tim Lochmüller im Adventskalender 2008

In letzter Zeit habe ich sehr oft mit AJAX und JSON gearbeitet. Leider gibt es dabei immer ein Problem mit cc_debug, weil sich dieser immer hinter die Ausgabe des JSON Codes klemmt und damit ein kaputtes JSON erzeugt. Nachdem ich heute mit meinem Kollegen Michael zusammen gesessen habe um dieses Problem zu lösen, sind wir auf eine sehr einfache Lösung gestoßen:

$GLOBALS['errorList']->clear();
die(json_encode($result));

Die Zeile 1 direkt vor der Ausgabe des JSON Codes eingebaut, verhindert, dass cc_debug noch seinen JavaScript-Code hinter her ausgibt. Und wer jetzt sagt: naje, ein die() oder exit() sollte es auch tun, der irrt sich. Versucht es gerne selber mal</pre>

QGIS

2012-10-15T16:34:21Z

Kholja: /* 1. Import der Shapefiles */

== Einführung ==
Benutzerhandbuch [[Datei:Qgis-1.7.0 user guide de.pdf]]

Creating Maps Quick Guide [[Datei:QGISGuide_Qian.pdf]]

http://www.qgis.org/de/dokumentation/handbuecher.html

== GeoJSON Exportieren ==
Beispiel: Export der Reutlinger Landkreisgrenze als Geojson.

=== 1. Import der Shapefiles ===
Verschiedene Firmen haben sich darauf spezialisiert, Shapefiles aus OpenStreetmap Daten zu generieren.
http://wiki.openstreetmap.org/wiki/Shapefiles#Download_pre-made_shapefiles

fündig werden wir hier:
http://downloads.cloudmade.com/europe/western_europe/germany/baden-wurttemberg/baden-wurttemberg.shapefiles.zip

Auspacken und im QGIS
Neuer Verktorlayer -> Datei: baden-wurttemberg_administrative.shp

Wenn nichts angezeigt wird evtl. noch das automatische Umrechnen der Koordinatensysteme aktivieren:
Settings -> Project Settings -> Coordinate Reference System -> Enable “on the fly” CRS transformation

Über das Kontextmenü im Layerfenster,kann man auch den Linienstil einstellen, wenn man es deutlicher mag.

== Plugins Installieren ==

Erweiterungen -> Python Erweiterungen herunterladen...

Im Karteireiter Repositories kann man außer dem offiziellen Repository noch weitere der Liste hinzufügen (geht dann automatisch)

Unter Erweiterungen kann man dann suchen und Installieren. Nürtzlich ist z.B. das OpenLayers Plugin, mit dem sich Layer aus den gängigen Karten über das Framework OpenLayers laden lassen.

Wenn das Plugin installiert ist, kann man bei einem leeren Projekt mal einen OpenLayers-Layer hinzufügen: Plugins ->OpenLayers plugin -> Add OpenStreetMap Layer. Dann sollte man die OpenStreetMap-Weltkarte sehen.

QGIS

2012-10-15T16:17:59Z

Kholja:

== Einführung ==
Benutzerhandbuch [[Datei:Qgis-1.7.0 user guide de.pdf]]

Creating Maps Quick Guide [[Datei:QGISGuide_Qian.pdf]]

http://www.qgis.org/de/dokumentation/handbuecher.html

== GeoJSON Exportieren ==
Beispiel: Export der Reutlinger Landkreisgrenze als Geojson.

=== 1. Import der Shapefiles ===
Verschiedene Firmen haben sich darauf spezialisiert, Shapefiles aus OpenStreetmap Daten zu generieren.
http://wiki.openstreetmap.org/wiki/Shapefiles#Download_pre-made_shapefiles

fündig werden wir hier:
http://downloads.cloudmade.com/europe/western_europe/germany/baden-wurttemberg/baden-wurttemberg.shapefiles.zip

== Plugins Installieren ==

Erweiterungen -> Python Erweiterungen herunterladen...

Im Karteireiter Repositories kann man außer dem offiziellen Repository noch weitere der Liste hinzufügen (geht dann automatisch)

Unter Erweiterungen kann man dann suchen und Installieren. Nürtzlich ist z.B. das OpenLayers Plugin, mit dem sich Layer aus den gängigen Karten über das Framework OpenLayers laden lassen.

Wenn das Plugin installiert ist, kann man bei einem leeren Projekt mal einen OpenLayers-Layer hinzufügen: Plugins ->OpenLayers plugin -> Add OpenStreetMap Layer. Dann sollte man die OpenStreetMap-Weltkarte sehen.

OpenStreetMap(OSM)

2012-10-15T16:11:28Z

Kholja: Die Seite wurde neu angelegt: „== Links == http://planet.openstreetmap.org/ http://openstreetmap.org“

== Links ==
http://planet.openstreetmap.org/

http://openstreetmap.org

Webmapping

2012-10-15T16:10:58Z

Kholja:

== Webmapping ==
Stichworte: Google Maps, OpenLayers, Bing Maps, Map24, Mapnik, OpenStreetMap
=== OpenStreetMap (OSM) ===
[[OpenStreetMap(OSM)]]

=== OpenLayers ===
[[Openlayers]]

Als reine Javascript-Anwendung openlayers [http://openlayers.org] interessant ist hier die einbindung von openstreetmap, gibt es mit Anleitung.

Interessante Beispiele:
http://openlayers.org/dev/examples/
mit KML-Support

=== Google Maps ===
[[Google Maps]]

QGIS

2012-10-15T15:55:22Z

Kholja: /* Plugins Installieren */

== Einführung ==
Benutzerhandbuch [[Datei:Qgis-1.7.0 user guide de.pdf]]

Creating Maps Quick Guide [[Datei:QGISGuide_Qian.pdf]]

http://www.qgis.org/de/dokumentation/handbuecher.html

== GeoJSON Exportieren ==

== Plugins Installieren ==

Erweiterungen -> Python Erweiterungen herunterladen...

Im Karteireiter Repositories kann man außer dem offiziellen Repository noch weitere der Liste hinzufügen (geht dann automatisch)

Unter Erweiterungen kann man dann suchen und Installieren. Nürtzlich ist z.B. das OpenLayers Plugin, mit dem sich Layer aus den gängigen Karten über das Framework OpenLayers laden lassen.

Wenn das Plugin installiert ist, kann man bei einem leeren Projekt mal einen OpenLayers-Layer hinzufügen: Plugins ->OpenLayers plugin -> Add OpenStreetMap Layer. Dann sollte man die OpenStreetMap-Weltkarte sehen.

QGIS

2012-10-15T15:52:23Z

Kholja: /* OpenStreetMap Plugin installieren */

== Einführung ==
Benutzerhandbuch [[Datei:Qgis-1.7.0 user guide de.pdf]]

Creating Maps Quick Guide [[Datei:QGISGuide_Qian.pdf]]

http://www.qgis.org/de/dokumentation/handbuecher.html

== GeoJSON Exportieren ==

== Plugins Installieren ==

Erweiterungen -> Python Erweiterungen herunterladen...

Im Karteireiter Repositories kann man außer dem offiziellen Repository noch weitere der Liste hinzufügen (geht dann automatisch)

Unter Erweiterungen kann man dann suchen und Installieren. Nürtzlich ist z.B. das OpenStreetMap Plugin

Wenn das Plugin installiert ist, kann man bei einem leeren Projekt mal einen OpenStreetMap-Layer hinzufügen: Plugins ->OpenLayers plugin -> Add OpenStreetMap Layer. Dann sollte man die OpenStreetMap-Weltkarte sehen.

QGIS

2012-10-15T15:45:19Z

Kholja:

== Einführung ==
Benutzerhandbuch [[Datei:Qgis-1.7.0 user guide de.pdf]]

Creating Maps Quick Guide [[Datei:QGISGuide_Qian.pdf]]

http://www.qgis.org/de/dokumentation/handbuecher.html

== GeoJSON Exportieren ==

== OpenStreetMap Plugin installieren ==

Plugins -> Fetch Python Plugins -> Repositories -> Add 3rd parties repositories

auswählen und dann unter Repositories das OpenLayers Plugin (evtl. zuvor filtern mit OpenLayers) installieren.

Wenn das Plugin installiert ist, kann man bei einem leeren Projekt mal einen OpenStreetMap-Layer hinzufügen: Plugins ->OpenLayers plugin -> Add OpenStreetMap Layer. Dann sollte man die OpenStreetMap-Weltkarte sehen.

QGIS

2012-10-15T15:43:47Z

Kholja:

QGIS

2012-10-15T15:43:07Z

Kholja:

== Einführung ==
Benutzerhandbuch [[Datei:Qgis-1.7.0 user guide de.pdf]]

Creating Maps Quick Guide [[QGISGuide_Qian.pdf]]

http://www.qgis.org/de/dokumentation/handbuecher.html

== GeoJSON Exportieren ==

Datei:QGISGuide Qian.pdf

2012-10-15T15:40:44Z

Kholja: Creating Maps in QGIS: A Quick Quide Quelle: http://www.lib.uwaterloo.ca/locations/umd/documents/QGISGuide_Qian.pdf (Zugriff 10/2012)

Creating Maps in QGIS: A Quick Quide
Quelle: http://www.lib.uwaterloo.ca/locations/umd/documents/QGISGuide_Qian.pdf (Zugriff 10/2012)

QGIS

2012-10-15T15:38:59Z

Kholja: /* Einführung */

== Einführung ==
Benutzerhandbuch [[Datei:Qgis-1.7.0 user guide de.pdf]]

http://www.qgis.org/de/dokumentation/handbuecher.html

== GeoJSON Exportieren ==

QGIS

2012-10-15T15:38:48Z

Kholja: /* Einführung */

== Einführung ==
Benutzerhandbuch [[Datei:Qgis-1.7.0 user guide de.pdf]]
http://www.qgis.org/de/dokumentation/handbuecher.html

== GeoJSON Exportieren ==

Datei:Qgis-1.7.0 user guide de.pdf

2012-10-15T15:36:19Z

Kholja: Quantum GIS 1.7.0 Benutzerhandbuch

Quantum GIS 1.7.0 Benutzerhandbuch

TYPO3 - Probleme lösen

2012-10-11T10:55:26Z

Kholja: /* Problem: Chinesische Zeichen werden nicht gespeichert */

=== MySQL Tabellen liegen im falschen Zeichensatz vor ===

dafür gibt es ein schönes Skript:

[[Datei:Db_utf8_fix.zip]]

=== Beim Update gehen Teile der Templates verloren ===
Nach der Version 4.1 wurden Tabellenfelder von blob auf Text umgestellt. TYPO 3 versucht das ohne Angabe des Zeichensatzen. Dabei bricht mysql das Umwandeln nach einem Umlaut o.ä. ab und verwirft den Rest.
Meist passiert das in TS Templates wenn in Kommentaren Umlaute sind. Folge, nach dem Update geht das Frontend nicht mehr.

Lösung: die Umwandlung von Hand machen (siehe auch [[Typo3 - Update]]) Prinzipell geht das so:

ALTER TABLE t1 CHANGE c1 c1 TEXT CHARACTER SET utf8;

Wichtig ist dabei die Angabe des Character Set in dem die Zeichen vorliegen, damit mySQL weiß wie es die Konvertierung machen. Normalerweise ist das latin1.

siehe auch: http://dev.mysql.com/doc/refman/5.1/en/alter-table.html

eventuell hilft es auch vorher die DB umzustellen (siehe falscher Zeichensatz)

=== Problem: Chinesische Zeichen werden nicht gespeichert ===
Beim speichern mit chinesischen Zeichen tritt der Fehler:

102: These fields are not properly updated in database: (title) Probably value mismatch with fieldtype.

auf.

'''Lösung:'''
Tritt auf wenn TYPO3 mit utf-8 arbeitet, aber die Datenbank in latin Felder speichert. Die Datenbank sollte überall mit utf-8 arbeiten. Einfach per phpmyadmin umstellen. Achtung, wenn TYPO3 noch nicht auf utf-8 umgestellt ist, dann muß TYPO3 umgestellt werden (Stichwort force utf-8) UND die Datenbank inhalte konvertiert werden (utf8_fix Skript) Es gibt auch andere Lösungsansätze im Internet, diese sind aber nicht sinnvoll, wenn die Voraussetzungen der DB nicht stimmen.

Tipp: Auch im Falle das Typo3 schon mit utf-8 arbeitet, aber die DB noch latin hat, kann man sich Zeit sparten und das utf-8 fix Skript nehmen, allerdings muß man es etwas anpassen:

Wenn TYPO3 mit utf-8 arbeitet, aber die Datenbank mit latin speichert kann man das Skript [[Datei:Db_utf8_fix-solo.zip]] anpassen. Es wandelt zuerst Textfelder in Binaries und diese dann zurück in Textfelder mit utf-8. Einfach das erste mysql Statement auskommentieren, dann stellt es nur die Datenbank um und konvertiert nichts.

=== Problem: Funktion xyz deprecated ===
Todo: ausführlicher schreiben
'''Lösung:'''

Entweder den '''Code änder'''n oder wenn es schnell gehen muß '''php-deprecated warning level''' Ändern oder wenn es nur im TYPO3 auftritt im '''Install Tool''' ändern.

localconf (Zahlencode entspricht php):

$TYPO3_CONF_VARS['SYS']['exceptionalErrors'] = '6133';

oder (geht auch über install Tool

displayErrors
auf 0 setzen

siehe auch [[htaccess]]

=== '''Problem:'''''' JavaScript Schnipsel auf der Seite werden zerhackt.''' ===

'''Lösung:''' htmlcleaning = all kann dazu führen das JavaScript Code zerstört wird. In diesem Fall den Code in separate Datei auslagern oder htmlcleaning = none

=== '''Problem''' failed to open Stream ===

Nach dem Löschen des Caches dauert es sehr lange bis die Seite aufgebaut wird und es erscheint eine '''php Warnung (finfo_file -> failed to open Stream).'''

Der Fehler tritt nicht bei 4.1 aber bei 4.2 (gesehen auf 4.2.8) auf.

'''Fehlermeldung:'''
<pre>
Warning: finfo_file(http://aufbau.blablub.com/) [function.finfo-file]: failed to open stream: HTTP request failed! in /www/htdocs/blablub/cms/typo3/sysext/cms/tslib/class.tslib_pagegen.php on line 490
</pre>

'''Lösung'''

Der Fehler tritt auf wenn ein favicon über TS eingebunden wird (page.shortcuticon = fileadmin/mein/pfad/favicon.ico), die Datei aber nicht vorliegt oder nicht darauf zugegriffen werden kann.

TYPO3 - Probleme lösen

2012-10-11T09:55:15Z

Kholja: /* Beim Update gehen Teile der Templates verloren */

=== MySQL Tabellen liegen im falschen Zeichensatz vor ===

dafür gibt es ein schönes Skript:

[[Datei:Db_utf8_fix.zip]]

=== Beim Update gehen Teile der Templates verloren ===
Nach der Version 4.1 wurden Tabellenfelder von blob auf Text umgestellt. TYPO 3 versucht das ohne Angabe des Zeichensatzen. Dabei bricht mysql das Umwandeln nach einem Umlaut o.ä. ab und verwirft den Rest.
Meist passiert das in TS Templates wenn in Kommentaren Umlaute sind. Folge, nach dem Update geht das Frontend nicht mehr.

Lösung: die Umwandlung von Hand machen (siehe auch [[Typo3 - Update]]) Prinzipell geht das so:

ALTER TABLE t1 CHANGE c1 c1 TEXT CHARACTER SET utf8;

Wichtig ist dabei die Angabe des Character Set in dem die Zeichen vorliegen, damit mySQL weiß wie es die Konvertierung machen. Normalerweise ist das latin1.

siehe auch: http://dev.mysql.com/doc/refman/5.1/en/alter-table.html

eventuell hilft es auch vorher die DB umzustellen (siehe falscher Zeichensatz)

=== Problem: Chinesische Zeichen werden nicht gespeichert ===
Beim speichern mit chinesischen Zeichen tritt der Fehler:

102: These fields are not properly updated in database: (title) Probably value mismatch with fieldtype.

auf.

'''Lösung:'''

=== Problem: Funktion xyz deprecated ===
Todo: ausführlicher schreiben
'''Lösung:'''

Entweder den '''Code änder'''n oder wenn es schnell gehen muß '''php-deprecated warning level''' Ändern oder wenn es nur im TYPO3 auftritt im '''Install Tool''' ändern.

localconf (Zahlencode entspricht php):

$TYPO3_CONF_VARS['SYS']['exceptionalErrors'] = '6133';

oder (geht auch über install Tool

displayErrors
auf 0 setzen

siehe auch [[htaccess]]

=== '''Problem:'''''' JavaScript Schnipsel auf der Seite werden zerhackt.''' ===

'''Lösung:''' htmlcleaning = all kann dazu führen das JavaScript Code zerstört wird. In diesem Fall den Code in separate Datei auslagern oder htmlcleaning = none

=== '''Problem''' failed to open Stream ===

Nach dem Löschen des Caches dauert es sehr lange bis die Seite aufgebaut wird und es erscheint eine '''php Warnung (finfo_file -> failed to open Stream).'''

Der Fehler tritt nicht bei 4.1 aber bei 4.2 (gesehen auf 4.2.8) auf.

'''Fehlermeldung:'''
<pre>
Warning: finfo_file(http://aufbau.blablub.com/) [function.finfo-file]: failed to open stream: HTTP request failed! in /www/htdocs/blablub/cms/typo3/sysext/cms/tslib/class.tslib_pagegen.php on line 490
</pre>

'''Lösung'''

Der Fehler tritt auf wenn ein favicon über TS eingebunden wird (page.shortcuticon = fileadmin/mein/pfad/favicon.ico), die Datei aber nicht vorliegt oder nicht darauf zugegriffen werden kann.

TYPO3 - Probleme lösen

2012-10-11T09:53:33Z

Kholja: /* Beim Update gehen Teile der Templates verloren */

Datei:Db utf8 fix-solo.zip

2012-10-11T09:31:10Z

Kholja: Umwandeln einer Datenbank nach utf-8. Ursprünglich für TYPO3 Installationen gedacht. Direkte Eingabe der Daten im Skript.

Umwandeln einer Datenbank nach utf-8. Ursprünglich für TYPO3 Installationen gedacht. Direkte Eingabe der Daten im Skript.

TYPO3 - Probleme lösen

2012-10-11T09:27:56Z

Kholja: /* Beim Update gehen Teile der Templates verloren */

TYPO3 - Probleme lösen

2012-10-11T09:27:06Z

Kholja: /* MySQL Tabellen liegen im falschen Zeichensatz vor */

Datei:Db utf8 fix.zip

2012-10-11T09:23:56Z

Kholja: Skript für das Umstellen einer TYPO3 Datenbank auf utf-8. Inkl. Zeichenkonvertierung.

Skript für das Umstellen einer TYPO3 Datenbank auf utf-8. Inkl. Zeichenkonvertierung.

Datei:Update typo3.zip

2012-10-11T09:22:33Z

Kholja: PHP Skript für automatisches Update von TYPO3 mit Download und Symlinks

PHP Skript für automatisches Update von TYPO3 mit Download und Symlinks

Datei:CreateSymlinks.zip

2012-10-11T09:21:33Z

Kholja: PHP Skript zum erstellen von Symlinks

PHP Skript zum erstellen von Symlinks

Typo3 Extensions programmieren - Snippets

2012-05-16T17:18:02Z

Kholja: /* Session Variablen in Typo3 */

== Templates ==
=== Template Code holen ===
<pre>
function getTemplateCode($mySubpart){
$tsTemplateFile = $this->conf['templateFile'];
// Wenn Flextemplate dann code aus diesem, sonst aus TS
$this->flexConf['template'] ? $templateCode = this->cObj->fileResource("uploads/tx_".$this->extKey."/".$this->flexConf['template']) : $templateCode=$this->cObj->fileResource($tsTemplateFile);
return $templateCode;
}
</pre>

=== Saubere Links in Extensions erzeugen ===
Kommentar von Elmar Hinz:

Die Linkfunktionen der tslib_pibase sind nicht garade eine Hilfe. 2/3
davon streichen und die Extension wird 1/3 besser. Wenn Du Dich allein auf
die Funktion pi_linkTP_keepPIvars konzentrierst, kannst du damit aber fast
alles stemmen. Noch konsequenter wendest du gleich selbst die
zugrundeliegende typolink Funktion an.

Das Thema mit dem Fokus auf ein sauberes Caching hier:

http://t3flyers.wordpress.com/2006/09/11/a-quick-guide-to-proper-caching-with-tslib_pibase-episode-1/

== Session Variablen in Typo3 ==
Mit Hilfe von Sessions kann man Benutzerbezogene Daten speichern, ohne daß Parameter per Get oder Post übertragenwerden müssen. Auch Seiten über Links etc. neu geladen werden.

Im Prinzip kann man Session Variablen folgendermaßen spreichern.
$GLOBALS["TSFE"]->fe_user->setKey("ses","$data", "$zustand");
$GLOBALS["TSFE"]->fe_user->storeSessionData();

=== Benutzer-Session oder Browser-Session ===
In Typo3 gibt es Standardmäßig 2 Sessions die man nutzen kann.

'''User data''' => Eingeloggter User. Kein Zugriff mehr wenn ausgeloggt.

'''Session data''' => Jeder User. Eingeloggt oder nicht. Daten sind an die "browsing-session" gebunden und nicht an die user-id. Bleibt erhalten bis der Browser geschlossen wird.

Default expire-time: 24h

=== Mit Session und Token überprüfen ob Benutzer eine Formularseite nochmal neu geladen hat ===
Manchmal ist es nützlich zu wissen ob der Benutzer mittels reload Button oder den Navigationsbuttons die Seite neu aufgerufen hat oder diese nach dem Absenden eines Formulars erreicht hat. Nach dem Senden will man evtl. Werte in der Datenbank speichern, aber dies nicht mehr tun, wenn der Benutzer Reload gedrückt hat. Mit einem Trick kann man dies verhindern.

# Man erzeugt ein Token mit einem Hash-Wert und speichert diesen in der Session und zudem als Verstecktes Feld im Formular.
# Nach Absenden des Formulars vergleicht man den Post-Wert mit der Session. Wenn diese gleich sind ist alles in Ordnung. Danach erzeugt man ein neues Token und speichert es wieder in der Session. Wenn der Nutzer die Seite mit Reload nocheinmal lädt stimmt das Session Token mit dem Post Wert nicht mehr überein, dieser hat sich ja nicht verändert. Der Session Wert hingegen schon.

Beispiel:
<pre>
// Session
$this->sesData = array();
$this->sesData = $GLOBALS["TSFE"]->fe_user->getKey('ses',"sesData");
// Token Vergleich
$this->sesData = $GLOBALS["TSFE"]->fe_user->getKey("ses","sesData");
$this->is_reloaded = $this->is_reloaded();
// Neues Token in Session speichern
$this->sesData['token'] = hash('md5',mktime());
$GLOBALS["TSFE"]->fe_user->setKey('ses',"sesData", $this->sesData);
$GLOBALS["TSFE"]->storeSessionData();

...

// Token in verstecktes Feld speichern
<input type="hidden" method="post" name="'.$this->prefixId.'[token]" value="'.$this->sesData['token'].'">
...

// Check if last token fits piVarToken then page is not reloaded
function is_reloaded(){
if(!empty($this->piVars['token'])){
if($this->piVars['token'] == $this->sesData['token']){
$reloaded = 0; // if piVar fits last session token everything is alright
}else{
$reloaded = 1;
}
} else $reloaded = 0;//no piVar => page is fresh
return $reloaded;
}
...
</pre>
=== Funktionen ===
$GLOBALS["TSFE"]->fe_user->getKey(type, key)

"'''type'''" Entweder "user" or "ses", definiert den Namensraum (data-space), user-session oder browsing-session (siehe oben)

"'''key'''" der "name" unter dem die Daten gespeichert werden. Arrays oder Scalars.

Note that the key "recs" is reserved for the built-in "shopping-basket". As is "sys" (for TYPO3 standard modules and code)

'''Example:'''
<pre>
if ($GLOBALS["TSFE"]->loginUser){
$myData = $GLOBALS["TSFE"]->fe_user->getKey("user","myData");
} else {
$myData = $GLOBALS["TSFE"]->fe_user->getKey("ses","myData");
}
</pre>
Liest die Benutzerdaten (user) mit dem Schlüssel "myData". Wenn kein Benutzer eingeloggt ist werden die Daten aus der Browser Session verwendet.

'''Daten Speichern'''
$GLOBALS["TSFE"]->fe_user->setKey(type, key, data)

"type" ist wieder "user" oder "ses".

"key" ist der Name oder auch Schlüssel unter dem die Daten gespeichert werden.

Note that the key "recs" is reserved for the built-in "shopping-basket". As is "sys" (for TYPO3 standard modules and code)

"data" ist der Wert der Variablen die gespeichert werden sollen. Arrays oder normale Skalare (einfache Variablen).

'''Example:'''
<pre>
$myConfig["name"] = "paul";
$myConfig["address"] = "Main street";
$GLOBALS["TSFE"]->fe_user->setKey("ses","myData", $myConfig);
</pre>

This stores the array $myConfig under the key "myData" in the session-data. This lasts as long as "paul" is surfing the site!

=== Beispiel Prüfen ob Seite aktualisiert wurde ===
Manchmal ist es notwendig zu prüfen ob eine Seite mit einem Formular mit dem Submit-Button abgesendet wurde, oder ob die Daten durch Klick auf den Reload Button des Browsers nochmal aufgerufen wurde. In diesem Fall sollten etwa Berechnungen mit den Formulardaten nicht noch einmal ausgeführt werden.
Mit einer Session läßt sich das lösen:

Session initialisieren
<pre>
// User Session (bei Login) oder "normale" Session nutzen

$this->sesData = array();
($GLOBALS["TSFE"]->loginUser)?{$this->sesType = "user":$this->sesType = "ses";
$this->sesData = $GLOBALS["TSFE"]->fe_user->getKey($this->sesType,"sesData");
</pre>

Wenn ein Formular abgeschickt wird, dann senden wir einen Wert mit, der sich immer verändert.
<pre>
$content .= '<input type="hidden" name="'.$this->prefixId.'[token]" value="'.hash("md5",time()).'" />!;
</pre>

Mit dieser Funktion wird bei jedem Abruf festgestellt, ob der im Formular übermittelte Wert in der Session existiert. Falls nicht wird er in der Session gespeichert, die Seite wurde nicht durch klicken auf Reload generiert. Klickt der User hingegen auf Reload, wird der alte Formular Wert noch einmal übermittelt. In diesem Fall stimmt er mit dem beim ersten Aufruf gespeicherten "Token" Wert überein.

<pre>
function is_reloaded(){
if(!empty($this->piVars['token'])){
if($this->piVars['token'] == $this->sesData['token']){
$reloaded = 1;
$this->piVars = array();
}else{
$reloaded = 0;
$this->sesData['token'] = $this->piVars['token'];
$GLOBALS["TSFE"]->fe_user->setKey($this->sesType,"sesData", $this->sesData);
}
} else $reloaded = 1;
return $reloaded;
}
</pre>

== Größe von Dateien lesbar ausgeben ==
Aus Typo3 Adventskalender 2008 von Tim Lochmüller
röße von Dateien ausgeben, jedoch speichert TYPO3 diese Dateigrößen in der Regel in Bytes. Um nun eine für den normalen Menschen lesbare Ausgabe zu bekommen, bietet die Klasse t3lib_div eine nette Funktion zur Formatierung:

t3lib_div::formatSize($sizeInBytes, $labels='');

Während sich der erste Parameter wie ich denke von selbst erklärt, bedarf der zweite eine kurze Erläuterung. Der zweite Parameter ist eine durch "|"-Zeichen separierte Liste von Labels für Bytes, Kilobytes, Megabytes und Gigabytes. Der Standard ist " | K| M| G". In Deutschland zumindest ist man eine andere Schreibweise gewohnt, also gleich mal ein Beispiel:

$fileSize1 = 370
$fileSize2 = 378880
$fileSize3 = 387973120
$fileSize4 = 397284474880

echo t3lib_div::formatSize($fileSize1, $labels=' Bytes | KB | MB | GB');
// Ausgabe: 370 Bytes
echo t3lib_div::formatSize($fileSize2, $labels=' Bytes | KB | MB | GB');
// Ausgabe: 370 KB
echo t3lib_div::formatSize($fileSize3, $labels=' Bytes | KB | MB | GB');
// Ausgabe: 370 MB
echo t3lib_div::formatSize($fileSize4, $labels=' Bytes | KB | MB | GB');
// Ausgabe: 370 GB

== Auf die TypoScript Konfiguration einer anderen Extension zugreifen ==
Auf TSconf einer anderen Extension zugreifen

Wenn man in einer Extension auf den TypoScript-Setupteil einer anderen Extension zugreifen möchte und im TypoScript-Code die Variablen nicht mehrfach aufführen möchte, kann man dies mit folgender Zeile machen:

$extConf = $GLOBALS['TSFE']->tmpl->setup['plugin.']['tx_MYEXT_pi1.']

Dadurch erhält man den kompletten conf-Teil der Extension. Einzelne Variablen bzw. Bereiche erhält man, wenn man die Variable mit [VAR] anhängt.

(Quelle: Typo3 Snippets Juni 2009)
siehe auch: http://www.lisardo.biz/wiki/GLOBALS-TSFE/

== Wo finde ich was ==
=== Das Globale TSFE Objekt ===
Über GLOBAL[‘TSFE’] kann man bei der Extension-Programmierung mehr oder weniger auf das gesamte TypoScript-Setup von Typo3 zugreifen. Man kann aktuelle Konfigurationen abfragen oder auch ändern, so dass sich die Ausgabe ins Frontend abhängig vom installierten Plugin auf jeder Seite ändern kann.

Zum Beispiel können damit zusätzliche JavaScript- oder CSS-Definitionen im Kopfbereich ausgegeben werden (siehe CSS und JavaScript im Kopfbereich ausgeben) oder der Bodytag erweitert werden. Folgende Zeile fügt z. B. auf jeder Seite, auf der das Plugin installiert wirde, dem Body-Tag einen onload-Befehl hinzu, wie er für Google-Maps benötigt wird:

* Sessions
* Datenbankabfragen
* Zusätzliche Header Daten
* vieles Mehr

[[TYPO3 - TSFE Objekt]]

=== Das Content Objekt cObj ===
Hiermit kann man quasi auf alle Informationen und Inhalte der dazugehörigen übergeordneten Seite zugreifen.

Außerdem kapselt es den Zugriff auf die Funktionen die auch per TypoScript zur Verfügung stehen.

Beispiel Inhalte auslesen:
$content = $this->cObj->data['header'];

Beispiel auf Seiteneigenschaften zugreifen
$content = $this->cObj->parentRecord['data']['title']

Mal durchschauen: Die Klasse tslib_cObj in der Systemextension cms

=== Nützliche Funktionen aus t3lib ===
Beispiele:

t3lib_extMgm::extRelPath($this->extKey)

== Pfade ==
=== Konstanten nutzen ===
Beispiele:
<pre>
require_once (PATH_tslib . 'class.tslib_pibase.php');
require_once (t3lib_extMgm::extPath('tt_news') . 'lib/class.tx_ttnews_catmenu.php');
</pre>

Validate (jQuery Plugin)

2012-05-16T16:35:29Z

Kholja:

== Links ==

[[Media:jquery-validate-js.zip]]

http://docs.jquery.com/Plugins/Validation

http://bassistance.de/jquery-plugins/jquery-plugin-validation/

http://blogs.fau.de/webworking/2011/05/13/tutorial-zur-eingabevalidierung-von-formularen-mit-hilfe-von-jquery/ (Zugriff: 2012-05)

== Anleitung ==

=== Standard Validierung ===
Standardmäßig wird einfach in der Initialisierung das Formular mitgegeben (jQuery Standards)
<pre>
<script type="text/javascript" src="jquery-latest.js"></script>
<script type="text/javascript" src="jquery.validate.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#Formular").validate();
});
</script>
</pre>

In den Formularen werden einfach Klassen mitgegeben. Anhand dieser validiert das Tool:
<pre>
<input class="required" type="text" value="" name="tx_gbtelecash_pi1[firstname]">
</pre>
==== Standard Klassen zur Validierung ====
Die wichtigsten sind:
<pre>
class=”required”: Feld muss gesetzt sein
class=”url”: Feld muss eine gültige URL enthalten
class=”email”: Feld muss eine gültige E-Mail enthalten
class=”required email”: Feld muss gesetzt und eine gültige E-Mail enthalten
</pre>
=== Weitere Validierungsmöglichkeiten über die validate() Funktion ===
Neben diese Klassen gibt es weitere Möglichkeiten zur Überprüfung. Die wichtigsten hierbei sind:

minlength=”int” (Bsp.: minlength=”3″)
maxlength=”int” (Bsp.: maxlength=”7″)
min=”int” (Bsp.: min=”3″)
max=”int” (Bsp.: max=”7″)
equalTo=”id” (Bsp.: equalTo=”#passwort”)
range=”int1int2″ (Bsp.: Zahlen zwischen 3 und 7: range=”37″)

Beispiel:
<pre>
validate({
rules: {
vorname: "required",
nachname: "required",
passwort: {
required: true,
minlength: 6
},
passwort2: {
required: true,
equalTo: "#passwort",
minlength: 6
},
email: {
required: true,
email: true
}
}
})
</pre>
=== Eigene Validierungsmeldungen definieren ===
<pre>
validate({
messages: {
vorname: "Bitte Vornamen angeben!",
nachname: "Bitte Nachnamen angeben!",
passwort: {
required: "Bitte Passwort angeben!",
minlength: jQuery.format("mindestens {0} Zeichen eingeben!")
},
passwort2: {
required: "Bitte Passwort wiederholen!",
equalTo: "Passwort wiederholen",
minlength: jQuery.format("mindestens {0} Zeichen eingeben")
},
email: {
required: "Bitte E-Mail-Adresse eingeben!",
email: "E-Mail im Format name@domain.de eingeben!"
}
}
})
</pre>
=== Validierung debuggen ===
Das Plugin hilft über den Parameter debug beim validieren:
validate({ debug: true })
Aktiviert den Debug-Modus. Das Formular wird nicht abgeschickt und vorhandene Fehler werden in der Fehlerkonsole angezeigt (benötigt Firebug oder Firebug Lite)

=== Eigene Funktionen ausführen ===
validate({ submitHandler: function(){###} })
Sollte das Formular valide sein, wird der durch ### symbolisierte Quellcode ausgeführt. Ersetzt dabei das Standardverhalten beim Absenden des Formulars.

== Komplettes Beispiel ==
<pre>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Eingabevalidierung von Formularen mit Hilfe von jQuery</title>

<style type="text/css">
* { font-family: Verdana; font-size: 10pt; }
label { width: 10em; float: left; }
label.error { float: none; color: red; padding-left: .5em; vertical-align: top; }
p { clear: both; }
.submit { margin-left: 12em; }
em { font-weight: bold; padding-right: 1em; vertical-align: top; }
form { width: 40em; }
</style>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://view.jquery.com/trunk/plugins/validate/jquery.validate.js"></script>

<script type="text/javascript">
$(document).ready(function(){
$("#Formular").validate({
rules: {
vorname: "required",
nachname: "required",
passwort: {
required: true,
minlength: 6,
maxlength: 10
},
passwort2: {
required: true,
equalTo: "#passwort",
minlength: 6,
maxlength: 10
},
email: {
required: true,
email: true
}
},
messages: {
vorname: "Bitte Vornamen angeben!",
nachname: "Bitte Nachnamen angeben!",
passwort: {
required: "Bitte Passwort angeben!",
minlength: jQuery.format("mindestens {0} Zeichen eingeben!"),
maxlength: jQuery.format("maximal {0} Zeichen eingeben!")
},
passwort2: {
required: "Bitte Passwort wiederholen!",
equalTo: "Passwort wiederholen",
minlength: jQuery.format("mindestens {0} Zeichen eingeben"),
maxlength: jQuery.format("maximal {0} Zeichen eingeben!")
},
email: {
required: "Bitte E-Mail-Adresse eingeben!",
email: "E-Mail im Format name@domain.de eingeben!"
}
},
submitHandler: function() {
alert("submitted!")
}
});
});
</script>
</head>

<body>
<form id="Formular" method="post" action="validate.php">
<fieldset>
<legend>Ein einfaches Formular</legend>
<p>
<label for="vorname">Vorname<em>*</em></label>
<input type="text" id="vorname" name="vorname" size="15"/>
</p>
<p>
<label for="nachname">Nachname<em>*</em></label>
<input type="text" id="nachname" name="nachname" size="15"/>
</p>
<p>
<label for="passwort">Passwort<em>*</em></label>
<input type="password" id="passwort" name="passwort" size="15"/>
</p>
<p>
<label for="passwort2">Passwort erneut<em>*</em></label>
<input type="password" id="passwort2" name="passwort2" size="15"/>
</p>
<p>
<label for="email">E-Mail<em>*</em></label>
<input type="text" id="email" name="email" size="15"/>
</p>
<p>
<input class="submit" type="submit" value="abschicken"/>
</p>
</fieldset>
</form>
</body>
</html>
</pre>

Validate (jQuery Plugin)

2012-05-16T16:33:03Z

Kholja:

== Links ==

[[Media:jquery-validate-js.zip]]

http://docs.jquery.com/Plugins/Validation

http://bassistance.de/jquery-plugins/jquery-plugin-validation/

http://blogs.fau.de/webworking/2011/05/13/tutorial-zur-eingabevalidierung-von-formularen-mit-hilfe-von-jquery/ (Zugriff: 2012-05)

== Anleitung ==

=== Standard Validierung ===
Standardmäßig wird einfach in der Initialisierung das Formular mitgegeben (jQuery Standards)
<pre>
<script type="text/javascript" src="jquery-latest.js"></script>
<script type="text/javascript" src="jquery.validate.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#Formular").validate();
});
</script>
</pre>

In den Formularen werden einfach Klassen mitgegeben. Anhand dieser validiert das Tool:
<pre>
<input class="required" type="text" value="" name="tx_gbtelecash_pi1[firstname]">
</pre>

=== Weitere Validierungsmöglichkeiten über die validate() Funktion ===
Neben diese Klassen gibt es weitere Möglichkeiten zur Überprüfung. Die wichtigsten hierbei sind:

minlength=”int” (Bsp.: minlength=”3″)
maxlength=”int” (Bsp.: maxlength=”7″)
min=”int” (Bsp.: min=”3″)
max=”int” (Bsp.: max=”7″)
equalTo=”id” (Bsp.: equalTo=”#passwort”)
range=”int1int2″ (Bsp.: Zahlen zwischen 3 und 7: range=”37″)

Beispiel:
<pre>
validate({
rules: {
vorname: "required",
nachname: "required",
passwort: {
required: true,
minlength: 6
},
passwort2: {
required: true,
equalTo: "#passwort",
minlength: 6
},
email: {
required: true,
email: true
}
}
})
</pre>
=== Eigene Validierungsmeldungen definieren ===
<pre>
validate({
messages: {
vorname: "Bitte Vornamen angeben!",
nachname: "Bitte Nachnamen angeben!",
passwort: {
required: "Bitte Passwort angeben!",
minlength: jQuery.format("mindestens {0} Zeichen eingeben!")
},
passwort2: {
required: "Bitte Passwort wiederholen!",
equalTo: "Passwort wiederholen",
minlength: jQuery.format("mindestens {0} Zeichen eingeben")
},
email: {
required: "Bitte E-Mail-Adresse eingeben!",
email: "E-Mail im Format name@domain.de eingeben!"
}
}
})
</pre>
=== Validierung debuggen ===
Das Plugin hilft über den Parameter debug beim validieren:
validate({ debug: true })
Aktiviert den Debug-Modus. Das Formular wird nicht abgeschickt und vorhandene Fehler werden in der Fehlerkonsole angezeigt (benötigt Firebug oder Firebug Lite)

=== Eigene Funktionen ausführen ===
validate({ submitHandler: function(){###} })
Sollte das Formular valide sein, wird der durch ### symbolisierte Quellcode ausgeführt. Ersetzt dabei das Standardverhalten beim Absenden des Formulars.
</pre>
=== Standard Klassen zur Validierung ===
<pre>
class=”required”: Feld muss gesetzt sein
class=”url”: Feld muss eine gültige URL enthalten
class=”email”: Feld muss eine gültige E-Mail enthalten
class=”required email”: Feld muss gesetzt und eine gültige E-Mail enthalten
</pre>

== Komplettes Beispiel ==
<pre>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Eingabevalidierung von Formularen mit Hilfe von jQuery</title>

<style type="text/css">
* { font-family: Verdana; font-size: 10pt; }
label { width: 10em; float: left; }
label.error { float: none; color: red; padding-left: .5em; vertical-align: top; }
p { clear: both; }
.submit { margin-left: 12em; }
em { font-weight: bold; padding-right: 1em; vertical-align: top; }
form { width: 40em; }
</style>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://view.jquery.com/trunk/plugins/validate/jquery.validate.js"></script>

<script type="text/javascript">
$(document).ready(function(){
$("#Formular").validate({
rules: {
vorname: "required",
nachname: "required",
passwort: {
required: true,
minlength: 6,
maxlength: 10
},
passwort2: {
required: true,
equalTo: "#passwort",
minlength: 6,
maxlength: 10
},
email: {
required: true,
email: true
}
},
messages: {
vorname: "Bitte Vornamen angeben!",
nachname: "Bitte Nachnamen angeben!",
passwort: {
required: "Bitte Passwort angeben!",
minlength: jQuery.format("mindestens {0} Zeichen eingeben!"),
maxlength: jQuery.format("maximal {0} Zeichen eingeben!")
},
passwort2: {
required: "Bitte Passwort wiederholen!",
equalTo: "Passwort wiederholen",
minlength: jQuery.format("mindestens {0} Zeichen eingeben"),
maxlength: jQuery.format("maximal {0} Zeichen eingeben!")
},
email: {
required: "Bitte E-Mail-Adresse eingeben!",
email: "E-Mail im Format name@domain.de eingeben!"
}
},
submitHandler: function() {
alert("submitted!")
}
});
});
</script>
</head>

<body>
<form id="Formular" method="post" action="validate.php">
<fieldset>
<legend>Ein einfaches Formular</legend>
<p>
<label for="vorname">Vorname<em>*</em></label>
<input type="text" id="vorname" name="vorname" size="15"/>
</p>
<p>
<label for="nachname">Nachname<em>*</em></label>
<input type="text" id="nachname" name="nachname" size="15"/>
</p>
<p>
<label for="passwort">Passwort<em>*</em></label>
<input type="password" id="passwort" name="passwort" size="15"/>
</p>
<p>
<label for="passwort2">Passwort erneut<em>*</em></label>
<input type="password" id="passwort2" name="passwort2" size="15"/>
</p>
<p>
<label for="email">E-Mail<em>*</em></label>
<input type="text" id="email" name="email" size="15"/>
</p>
<p>
<input class="submit" type="submit" value="abschicken"/>
</p>
</fieldset>
</form>
</body>
</html>
</pre>

Validate (jQuery Plugin)

2012-05-16T16:13:45Z

Kholja: /* Validate Snippets */

== Links ==

[[Media:jquery-validate-js.zip]]

http://docs.jquery.com/Plugins/Validation/validate#options

http://blogs.fau.de/webworking/2011/05/13/tutorial-zur-eingabevalidierung-von-formularen-mit-hilfe-von-jquery/ (Zugriff: 2012-05)

== Validate Snippets ==

=== Standard Validierung ===
Standardmäßig wird einfach in der Initialisierung das Formular mitgegeben (jQuery Standards)
<pre>
<script type="text/javascript" src="jquery-latest.js"></script>
<script type="text/javascript" src="jquery.validate.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#Formular").validate();
});
</script>
</pre>

In den Formularen werden einfach Klassen mitgegeben. Anhand dieser validiert das Tool:
<pre>
<input class="required" type="text" value="" name="tx_gbtelecash_pi1[firstname]">
</pre>

=== Standard Klassen zur Validierung ===
<pre>
class=”required”: Feld muss gesetzt sein
class=”url”: Feld muss eine gültige URL enthalten
class=”email”: Feld muss eine gültige E-Mail enthalten
class=”required email”: Feld muss gesetzt und eine gültige E-Mail enthalten

</pre>

== Komplettes Beispiel ==
<pre>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Eingabevalidierung von Formularen mit Hilfe von jQuery</title>

<style type="text/css">
* { font-family: Verdana; font-size: 10pt; }
label { width: 10em; float: left; }
label.error { float: none; color: red; padding-left: .5em; vertical-align: top; }
p { clear: both; }
.submit { margin-left: 12em; }
em { font-weight: bold; padding-right: 1em; vertical-align: top; }
form { width: 40em; }
</style>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://view.jquery.com/trunk/plugins/validate/jquery.validate.js"></script>

<script type="text/javascript">
$(document).ready(function(){
$("#Formular").validate({
rules: {
vorname: "required",
nachname: "required",
passwort: {
required: true,
minlength: 6,
maxlength: 10
},
passwort2: {
required: true,
equalTo: "#passwort",
minlength: 6,
maxlength: 10
},
email: {
required: true,
email: true
}
},
messages: {
vorname: "Bitte Vornamen angeben!",
nachname: "Bitte Nachnamen angeben!",
passwort: {
required: "Bitte Passwort angeben!",
minlength: jQuery.format("mindestens {0} Zeichen eingeben!"),
maxlength: jQuery.format("maximal {0} Zeichen eingeben!")
},
passwort2: {
required: "Bitte Passwort wiederholen!",
equalTo: "Passwort wiederholen",
minlength: jQuery.format("mindestens {0} Zeichen eingeben"),
maxlength: jQuery.format("maximal {0} Zeichen eingeben!")
},
email: {
required: "Bitte E-Mail-Adresse eingeben!",
email: "E-Mail im Format name@domain.de eingeben!"
}
},
submitHandler: function() {
alert("submitted!")
}
});
});
</script>
</head>

<body>
<form id="Formular" method="post" action="validate.php">
<fieldset>
<legend>Ein einfaches Formular</legend>
<p>
<label for="vorname">Vorname<em>*</em></label>
<input type="text" id="vorname" name="vorname" size="15"/>
</p>
<p>
<label for="nachname">Nachname<em>*</em></label>
<input type="text" id="nachname" name="nachname" size="15"/>
</p>
<p>
<label for="passwort">Passwort<em>*</em></label>
<input type="password" id="passwort" name="passwort" size="15"/>
</p>
<p>
<label for="passwort2">Passwort erneut<em>*</em></label>
<input type="password" id="passwort2" name="passwort2" size="15"/>
</p>
<p>
<label for="email">E-Mail<em>*</em></label>
<input type="text" id="email" name="email" size="15"/>
</p>
<p>
<input class="submit" type="submit" value="abschicken"/>
</p>
</fieldset>
</form>
</body>
</html>
</pre>

Validate (jQuery Plugin)

2012-05-16T14:26:28Z

Kholja: /* Links */

== Links ==

[[Media:jquery-validate-js.zip]]

http://docs.jquery.com/Plugins/Validation/validate#options

http://blogs.fau.de/webworking/2011/05/13/tutorial-zur-eingabevalidierung-von-formularen-mit-hilfe-von-jquery/ (Zugriff: 2012-05)

== Validate Snippets ==

== Komplettes Beispiel ==
<pre>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Eingabevalidierung von Formularen mit Hilfe von jQuery</title>

<style type="text/css">
* { font-family: Verdana; font-size: 10pt; }
label { width: 10em; float: left; }
label.error { float: none; color: red; padding-left: .5em; vertical-align: top; }
p { clear: both; }
.submit { margin-left: 12em; }
em { font-weight: bold; padding-right: 1em; vertical-align: top; }
form { width: 40em; }
</style>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://view.jquery.com/trunk/plugins/validate/jquery.validate.js"></script>

<script type="text/javascript">
$(document).ready(function(){
$("#Formular").validate({
rules: {
vorname: "required",
nachname: "required",
passwort: {
required: true,
minlength: 6,
maxlength: 10
},
passwort2: {
required: true,
equalTo: "#passwort",
minlength: 6,
maxlength: 10
},
email: {
required: true,
email: true
}
},
messages: {
vorname: "Bitte Vornamen angeben!",
nachname: "Bitte Nachnamen angeben!",
passwort: {
required: "Bitte Passwort angeben!",
minlength: jQuery.format("mindestens {0} Zeichen eingeben!"),
maxlength: jQuery.format("maximal {0} Zeichen eingeben!")
},
passwort2: {
required: "Bitte Passwort wiederholen!",
equalTo: "Passwort wiederholen",
minlength: jQuery.format("mindestens {0} Zeichen eingeben"),
maxlength: jQuery.format("maximal {0} Zeichen eingeben!")
},
email: {
required: "Bitte E-Mail-Adresse eingeben!",
email: "E-Mail im Format name@domain.de eingeben!"
}
},
submitHandler: function() {
alert("submitted!")
}
});
});
</script>
</head>

<body>
<form id="Formular" method="post" action="validate.php">
<fieldset>
<legend>Ein einfaches Formular</legend>
<p>
<label for="vorname">Vorname<em>*</em></label>
<input type="text" id="vorname" name="vorname" size="15"/>
</p>
<p>
<label for="nachname">Nachname<em>*</em></label>
<input type="text" id="nachname" name="nachname" size="15"/>
</p>
<p>
<label for="passwort">Passwort<em>*</em></label>
<input type="password" id="passwort" name="passwort" size="15"/>
</p>
<p>
<label for="passwort2">Passwort erneut<em>*</em></label>
<input type="password" id="passwort2" name="passwort2" size="15"/>
</p>
<p>
<label for="email">E-Mail<em>*</em></label>
<input type="text" id="email" name="email" size="15"/>
</p>
<p>
<input class="submit" type="submit" value="abschicken"/>
</p>
</fieldset>
</form>
</body>
</html>
</pre>

Datei:Jquery-validate-js.zip

2012-05-16T14:25:43Z

Kholja: jQuery Validation Plugin

jQuery Validation Plugin

Typo3 - Benutzer einrichten

2012-04-04T13:08:19Z

Kholja: /* Kurzanleitung */

== Kurzanleitung ==
* Benutzergruppe "alle Benutzer" anlegen (keine Rechte und Filemounts). Dieser ist nur dafür zuständig, daß neue Seiten immer dem gleichen Benutzer gehören und alle darauf zugreifen können (benötigt das PageTS unten).
* Benutzergruppen mit DB Mounts für alle gewünschten Bereiche (z.B. Bereich:Produkte). Diese Gruppen Regeln welche Teile der Webseite ein Redakteur bearbeiten kann.
* Benutzergruppe für Redakteure anlegen (siehe Link)
* PageTS (Seiteneigenschaften Root Seite) anlegen damit neue Seiten automatisch der Gruppe "alle Benutzer" zugeordnet werden.

<pre>
// Standardrechte und Gruppe (hier Gruppe 1) setzen
TCEMAIN.permissions.groupid = 1
TCEMAIN.permissions.user = show, editcontent, new, edit, delete
TCEMAIN.permissions.group = show, editcontent, new, edit, delete
TCEMAIN.permissions.everybody = show, edit
</pre>

Standard Redakteur:
[[Media:Typo3-redakteur.t3d]]

== Standard Benutzer ==
Aktuelle Standardeinstellungen finden sich hier:
[[Typo3 - Standardeinstellungen]]

== Kurzübersicht Standard Benutzereinstellungen ==
optionen ''kursiv''

=== Module ===

* '''Backendmodule'''
** Web
*** Seite
*** Anzeigen
*** Liste
** Datei
*** Dateiliste
*** Dokumente
** Benutzer
*** Aufgaben
*** Einstellungen
*** Workspace

* '''Tables''' - Tabellen die gesehen werden
** Seite
** Seiteninhalt
** alternative Seitensprache
** ''interne Notiz''
** ''Acronym''

* '''Tables (modify)''' - Tabellen die geändert werden dürfen
** i.d.R. wie Tables

* '''Page Types''' - Seitentypen die zur Verfügung stehen
** Standard
** Erweitert
** Externe URL
** Shortcut
** Nicht im Menü
** ''Abstand''
** SysOrdner

* '''Allowed Exclude Fields''' - Verfügbare Felder
** '''Seite'''
*** Typo
*** Seite verstecken
*** Start
*** Stop
*** Layout
*** Navigationstitel
*** Im Menü verstecken
*** Shortcut Modus
*** Stichworte (Meta Tag)
*** Beschreibung (Meta Tag)
*** ''Inhaltsangabe - z.B. f. Sitemap''
*** ''Autor - z.B. für Seiten als Artikel''
*** ''Email - z.B. für Seiten als Artikel''
*** Enthält Erweiterung
*** ''Spracheinstellungen'' - für Multilanguage Sites (One Tree Fits all)
** '''Seiteninhalt'''
*** Verstecken
*** Start
*** Stop
*** ''Sprache'' ??? - evt. besser in der Seiteneinstellung
*** ''Orginalübersetzung''
*** ''Layout'' - Wenn Layouts angelegt sind
*** Spalten
*** Datum
*** Typ
*** ''Untertitel'' - s.o.
*** ''Breite'' (Bilder)
*** ''Höhe''
*** ''keine Reihen''
*** Verweis - Bilder
*** Klick vergrößern (Bilder)
*** alternativer Text (Meta)
*** Titeltext (Meta)
*** Vor
*** Nach
*** ''Index'' - Wenn indizierte Suche benutzt wird
*** Nach oben
*** RTE abschalten
** '''''Alternative Seitensprache'''''
*** ''Verstecken''
*** ''Start''
*** ''Stop''
*** ''Navigationstitel''
*** ''Stichworte''
*** ''Beschreibung''
*** ''Inhaltsangabe'' (s.o.)

* '''Explicitly allow/deny field values'''
** '''Seiteninhalt Typ''' - verbieten
*** Skript
*** HTML

=== DB Mount ===
Startpunkt im Seitenbaum für die Benutzergruppe

=== Filemounts ==
Freigabe im Dateisystem damit Dateien geholt bzw. hochgespielt werden können

=== Workspace Permissions ===
Draft und Live
Siehe auch [[Workflow in Typo3 (Workspaces)]]

=== TS Config ===
Sinnvolle Einstellungen für die Benutzergruppe

== Benutzergruppe und Benutzer anlegen ==
=== Allgemeines Vorgehen ===
* Todo -> Überarbeiten Beispiel mit Gruppe "alle Benutzer", Gruppen für Bereiche (DB-Mounts,Filemounts) und Rechte - Einstellungen
* eine '''Benutzergruppe''' einrichten in der die Grundsätzlichen Einstellungen gemacht werden. (Was sollen die Benutzer dieser Gruppe alles tun, und auf welche Seiten sowie auf welche Dateien sollen sie zugreifen) Die Gruppe gibt den kleinsten gemeinsamen Nenner für alle Benutzer dieser Gruppe vor. Die Benutzer dieser Gruppe können dann später noch zusätzliche Rechte bekommen.
* Alle '''Benutzer''' werden einer Gruppe zugeordnet.
* '''Zugriffsrechte auf die Seiten''' setzen
* Am Ende müssen noch die '''Dateiordner''' für den Benutzer freigegeben werden in die er seine Dateien (pdf,Bilder, Dokumente...)hochladen kann.

=== Benutzergruppe anlegen ===
* Listenansicht > Weltkugel anklicken neue Backend Benutzergruppe (Datensatz)
* Gruppenname eingeben und include Access Lists anklicken dadurch können die Gruppeneigenschaften per Auswahlfelder angelegt werden.
* Module auswählen. Sinnvoll sind: Web, Web>Seite, Web>Anzeigen, Web>Liste, Datei, Datei>Dateiliste, evt. Datei>Bilder, Benutzer, Benutzer>Aufgaben, Benutzer>Einstellungen
* Tabellen auswählen in denen Datensätze gesehen werden können – das sind z.B. die Tabellen der PlugIns ( Gästebuch etc.) z.B. Seite, Seiteninhalt, News, Galerien, Gästebuch-Eintrag, Kalender
* Tabellen auswählen in denen Datensätze verändert werden können (s.o.)
* Page Types auswählen – das sind die Arten von Seiten die der Benutzer anlegen kann. Z.B. Standard, Erweitert, Externe URL, Shortcut.
* Weitere Felder erlauben oder verbieten
* DB-Mounts das ist die Stelle ab der überhaupt Seiten angeguckt / verändert werden können
* File-Mounts das ist die Stelle im Dateisystem wo Dateien (Bilder, pdf, etc.) abgelegt, oder verändert werden können.)

=== Benutzer einrichten ===
* Listenansicht > Weltkugel anklicken und neuen Backend Benutzer anlegen (Datensatz)
* Name anlegen und eine (oder mehrere) Gruppe auswählen der der Benutzer angehören soll. Die Rechte der Gruppen werden übernommen müssen also nicht neu angewählt werden.<br>
'''Achtung:''' Solange im Modul Access (Zugriff) nicht die Seitenrechte für alle benötigten Seiten auf Show stehen sieht der Benutzer nichts (siehe Zugriff auf die Seiten einstellen). Das gleiche gilt für das Dateisystem.

== Zugriff auf die Seiten einstellen ==
Wenn die Seiten zu Beginn von einem Admin erstellt wurden, wie es meistens der Fall sein dürfte. Dann gehören die Seiten Standardmäßig (läßt sich soweit ich weiß ändern)dem Admin und können nur von diesem gesehen werden. Deshalb müssen die Seitenrechte für die Gruppe geändert werden.

Für jede Seite gibt es folgende Rechte:
* '''Show''' Page
* '''Edit''' Page
* '''Edit''' Content
* '''Delete''' Page
* '''New''' Pages

=== So geht's ===
* Modul Zugriff ('''Access''') wählen.
* dann den Bearbeitungsstift der Seite auswählen
* '''Gruppe einstellen''' für die die Rechte geändert werden sollen.
* evt. Rekursiv auf die '''Unterseiten''' anwenden (unteres Drop Down-Feld)
* Speichern.

Zusätzlich lassen sich auch der Besitzer oder die Rechte für jeden einstellen. Grundsätzlich gilt wenn Benutzer zu mehreren Gruppen gehören:

Rechte addieren sich.

== Zugriff auf das Filesystem (fileadmin) einstellen ==
Sinnvollerweise legt man für die Benutzer eigene Ordner an in denen nicht gerade die Bilder für die Templates etc. liegen.

Diese Ordner müssen ähnlich wie die Seitenbäume gemounted werden.

=== So geht's ===
* Die Ordner müssen vorher natürlich im Filesystem (fileadmin) angelegt werden (z.B. userImages)
* In den Einstellungen für die Gruppe (oder den Benutzer) kann ein neuer Filemount mit Klick im Abschnitt 'File Mount' angelegt werden.
* Es kann anschließend ein beliebiger Name (Label) vergeben werden. Das ist der Name den der Benutzer sieht.
* Wenn der Ordner unterhalb von fileadmin liegt am besten auf relativ klicken und den Pfad ohne 'fileadmin' eingeben (z.B. userImages/pics)

== Welche Rechteeinstellungen sind sinnvoll? ==

== Fortgeschrittene Benutzerkonfiguration ==
Über das Feld User TSConfig kann die Anzeige des Backends bzw. für das Frontend Editing für verschiedene Benutzer und Benutzergruppen eingestellt werden. Folgende Bereiche sind möglich:
* '''admPanel''' - hiermit kann man das admin Panel im Frontend einstellen
* '''options''' - einige globale Einstellungen im Backend
* '''setup''' - damit steuert man die Einstellungen, die man auch unter Benutzer > Einstellungen (User > Setup) einstellen kann; nur eben mit Typo Script. Mit default kann der Admin sogar Standard Vorgaben für neue Benutzer(gruppen) erstellen.
* '''mod''' - hiermit kann man das Modul 'Web' konfigurieren.

Die Benutzer-Einstellungen lassen sich (als Admin) über das Modul '''Tools > User Admin''' vergleichen (TSConfig und TSConfig HL anklicken). Hier sieht man auch gut wie die TS Befehle heißen.

Mehr Info in [[Typo3 - TSConfig]]

=== Nützliche Beispiele ===

==== Dropdown Feld für Cache ====
(PageTS oder UserTS)

options.clearCache.pages = 1
options.clearCache.all = 1

stellt ein Dropdownfeld zur Verfügung mit dem der Benutzer für einzelne und für alle Seiten den '''Cache löschen''' kann.

==== sichtbare Spalten festlegen====
PageTS oder User TS

mod {
SHARED.colPos_list = 0,2
}

Zeigt nur die mittlere und die Spalte Normal und Rechts angezeigt (Links=1, Normal=0, Rechts=2,Rand =3).

==== Dropdown-Feld für die Überschrift anpassen ====
PageTS

So kann man die überflüssigen Menüeinträge im Feld Header löschen(100 steht für den Wert versteckt):
TCEFORM.tt_content.header_layout.removeItems = 2,3,4,5,100
Trick: Wenn man nicht weiß welchen Wert ein eintrag hat, einfach diesen Wert verwenden und in der Datenbank nachgucken.

==== Überschreiben der Menüeinträge: ====
Page TS

TCEFORM.tt_content.header_layout.altLabels.0 = Überschrift Text
TCEFORM.tt_content.header_layout.altLabels.1 = Überschrift Grafik

==== Neue Seiten automatisch einer Benutzergruppe zuordnen ====
Im PageTS wird die Gruppe festgelegt der neue Seiten zugeordnet werden. Außerdem die Rechte für den Besitzer usw. festgelegt.

TCEMAIN.permissions.groupid = 1
TCEMAIN.permissions.user = show, editcontent, new, edit, delete
TCEMAIN.permissions.group = show, editcontent, new, edit, delete
TCEMAIN.permissions.everybody = show, edit

=== Zugriff über das Frontend ===

=== Umleitung auf das Frontend ===

== Freesite Plugin ==

Typo3 - Benutzer einrichten

2012-04-04T13:03:57Z

Kholja: /* Kurzanleitung */

== Kurzanleitung ==
* Benutzergruppe "alle Benutzer" anlegen (keine Rechte und Filemounts)
* Benutzergruppen mit DB Mounts für alle gewünschten Bereiche (enthält nur DB Mounts)
* Benutzergruppe für Redakteure anlegen (siehe Link)
* PageTS (Seiteneigenschaften Root Seite) anlegen damit neue Seiten automatisch der Gruppe "alle Benutzer" zugeordnet werden.

<pre>
// Standardrechte und Gruppe (hier Gruppe 1) setzen
TCEMAIN.permissions.groupid = 1
TCEMAIN.permissions.user = show, editcontent, new, edit, delete
TCEMAIN.permissions.group = show, editcontent, new, edit, delete
TCEMAIN.permissions.everybody = show, edit
</pre>

Standard Redakteur:
[[Media:Typo3-redakteur.t3d]]

== Standard Benutzer ==
Aktuelle Standardeinstellungen finden sich hier:
[[Typo3 - Standardeinstellungen]]

== Kurzübersicht Standard Benutzereinstellungen ==
optionen ''kursiv''

=== Module ===

* '''Backendmodule'''
** Web
*** Seite
*** Anzeigen
*** Liste
** Datei
*** Dateiliste
*** Dokumente
** Benutzer
*** Aufgaben
*** Einstellungen
*** Workspace

* '''Tables''' - Tabellen die gesehen werden
** Seite
** Seiteninhalt
** alternative Seitensprache
** ''interne Notiz''
** ''Acronym''

* '''Tables (modify)''' - Tabellen die geändert werden dürfen
** i.d.R. wie Tables

* '''Page Types''' - Seitentypen die zur Verfügung stehen
** Standard
** Erweitert
** Externe URL
** Shortcut
** Nicht im Menü
** ''Abstand''
** SysOrdner

* '''Allowed Exclude Fields''' - Verfügbare Felder
** '''Seite'''
*** Typo
*** Seite verstecken
*** Start
*** Stop
*** Layout
*** Navigationstitel
*** Im Menü verstecken
*** Shortcut Modus
*** Stichworte (Meta Tag)
*** Beschreibung (Meta Tag)
*** ''Inhaltsangabe - z.B. f. Sitemap''
*** ''Autor - z.B. für Seiten als Artikel''
*** ''Email - z.B. für Seiten als Artikel''
*** Enthält Erweiterung
*** ''Spracheinstellungen'' - für Multilanguage Sites (One Tree Fits all)
** '''Seiteninhalt'''
*** Verstecken
*** Start
*** Stop
*** ''Sprache'' ??? - evt. besser in der Seiteneinstellung
*** ''Orginalübersetzung''
*** ''Layout'' - Wenn Layouts angelegt sind
*** Spalten
*** Datum
*** Typ
*** ''Untertitel'' - s.o.
*** ''Breite'' (Bilder)
*** ''Höhe''
*** ''keine Reihen''
*** Verweis - Bilder
*** Klick vergrößern (Bilder)
*** alternativer Text (Meta)
*** Titeltext (Meta)
*** Vor
*** Nach
*** ''Index'' - Wenn indizierte Suche benutzt wird
*** Nach oben
*** RTE abschalten
** '''''Alternative Seitensprache'''''
*** ''Verstecken''
*** ''Start''
*** ''Stop''
*** ''Navigationstitel''
*** ''Stichworte''
*** ''Beschreibung''
*** ''Inhaltsangabe'' (s.o.)

* '''Explicitly allow/deny field values'''
** '''Seiteninhalt Typ''' - verbieten
*** Skript
*** HTML

=== DB Mount ===
Startpunkt im Seitenbaum für die Benutzergruppe

=== Filemounts ==
Freigabe im Dateisystem damit Dateien geholt bzw. hochgespielt werden können

=== Workspace Permissions ===
Draft und Live
Siehe auch [[Workflow in Typo3 (Workspaces)]]

=== TS Config ===
Sinnvolle Einstellungen für die Benutzergruppe

== Benutzergruppe und Benutzer anlegen ==
=== Allgemeines Vorgehen ===
* Todo -> Überarbeiten Beispiel mit Gruppe "alle Benutzer", Gruppen für Bereiche (DB-Mounts,Filemounts) und Rechte - Einstellungen
* eine '''Benutzergruppe''' einrichten in der die Grundsätzlichen Einstellungen gemacht werden. (Was sollen die Benutzer dieser Gruppe alles tun, und auf welche Seiten sowie auf welche Dateien sollen sie zugreifen) Die Gruppe gibt den kleinsten gemeinsamen Nenner für alle Benutzer dieser Gruppe vor. Die Benutzer dieser Gruppe können dann später noch zusätzliche Rechte bekommen.
* Alle '''Benutzer''' werden einer Gruppe zugeordnet.
* '''Zugriffsrechte auf die Seiten''' setzen
* Am Ende müssen noch die '''Dateiordner''' für den Benutzer freigegeben werden in die er seine Dateien (pdf,Bilder, Dokumente...)hochladen kann.

=== Benutzergruppe anlegen ===
* Listenansicht > Weltkugel anklicken neue Backend Benutzergruppe (Datensatz)
* Gruppenname eingeben und include Access Lists anklicken dadurch können die Gruppeneigenschaften per Auswahlfelder angelegt werden.
* Module auswählen. Sinnvoll sind: Web, Web>Seite, Web>Anzeigen, Web>Liste, Datei, Datei>Dateiliste, evt. Datei>Bilder, Benutzer, Benutzer>Aufgaben, Benutzer>Einstellungen
* Tabellen auswählen in denen Datensätze gesehen werden können – das sind z.B. die Tabellen der PlugIns ( Gästebuch etc.) z.B. Seite, Seiteninhalt, News, Galerien, Gästebuch-Eintrag, Kalender
* Tabellen auswählen in denen Datensätze verändert werden können (s.o.)
* Page Types auswählen – das sind die Arten von Seiten die der Benutzer anlegen kann. Z.B. Standard, Erweitert, Externe URL, Shortcut.
* Weitere Felder erlauben oder verbieten
* DB-Mounts das ist die Stelle ab der überhaupt Seiten angeguckt / verändert werden können
* File-Mounts das ist die Stelle im Dateisystem wo Dateien (Bilder, pdf, etc.) abgelegt, oder verändert werden können.)

=== Benutzer einrichten ===
* Listenansicht > Weltkugel anklicken und neuen Backend Benutzer anlegen (Datensatz)
* Name anlegen und eine (oder mehrere) Gruppe auswählen der der Benutzer angehören soll. Die Rechte der Gruppen werden übernommen müssen also nicht neu angewählt werden.<br>
'''Achtung:''' Solange im Modul Access (Zugriff) nicht die Seitenrechte für alle benötigten Seiten auf Show stehen sieht der Benutzer nichts (siehe Zugriff auf die Seiten einstellen). Das gleiche gilt für das Dateisystem.

== Zugriff auf die Seiten einstellen ==
Wenn die Seiten zu Beginn von einem Admin erstellt wurden, wie es meistens der Fall sein dürfte. Dann gehören die Seiten Standardmäßig (läßt sich soweit ich weiß ändern)dem Admin und können nur von diesem gesehen werden. Deshalb müssen die Seitenrechte für die Gruppe geändert werden.

Für jede Seite gibt es folgende Rechte:
* '''Show''' Page
* '''Edit''' Page
* '''Edit''' Content
* '''Delete''' Page
* '''New''' Pages

=== So geht's ===
* Modul Zugriff ('''Access''') wählen.
* dann den Bearbeitungsstift der Seite auswählen
* '''Gruppe einstellen''' für die die Rechte geändert werden sollen.
* evt. Rekursiv auf die '''Unterseiten''' anwenden (unteres Drop Down-Feld)
* Speichern.

Zusätzlich lassen sich auch der Besitzer oder die Rechte für jeden einstellen. Grundsätzlich gilt wenn Benutzer zu mehreren Gruppen gehören:

Rechte addieren sich.

== Zugriff auf das Filesystem (fileadmin) einstellen ==
Sinnvollerweise legt man für die Benutzer eigene Ordner an in denen nicht gerade die Bilder für die Templates etc. liegen.

Diese Ordner müssen ähnlich wie die Seitenbäume gemounted werden.

=== So geht's ===
* Die Ordner müssen vorher natürlich im Filesystem (fileadmin) angelegt werden (z.B. userImages)
* In den Einstellungen für die Gruppe (oder den Benutzer) kann ein neuer Filemount mit Klick im Abschnitt 'File Mount' angelegt werden.
* Es kann anschließend ein beliebiger Name (Label) vergeben werden. Das ist der Name den der Benutzer sieht.
* Wenn der Ordner unterhalb von fileadmin liegt am besten auf relativ klicken und den Pfad ohne 'fileadmin' eingeben (z.B. userImages/pics)

== Welche Rechteeinstellungen sind sinnvoll? ==

== Fortgeschrittene Benutzerkonfiguration ==
Über das Feld User TSConfig kann die Anzeige des Backends bzw. für das Frontend Editing für verschiedene Benutzer und Benutzergruppen eingestellt werden. Folgende Bereiche sind möglich:
* '''admPanel''' - hiermit kann man das admin Panel im Frontend einstellen
* '''options''' - einige globale Einstellungen im Backend
* '''setup''' - damit steuert man die Einstellungen, die man auch unter Benutzer > Einstellungen (User > Setup) einstellen kann; nur eben mit Typo Script. Mit default kann der Admin sogar Standard Vorgaben für neue Benutzer(gruppen) erstellen.
* '''mod''' - hiermit kann man das Modul 'Web' konfigurieren.

Die Benutzer-Einstellungen lassen sich (als Admin) über das Modul '''Tools > User Admin''' vergleichen (TSConfig und TSConfig HL anklicken). Hier sieht man auch gut wie die TS Befehle heißen.

Mehr Info in [[Typo3 - TSConfig]]

=== Nützliche Beispiele ===

==== Dropdown Feld für Cache ====
(PageTS oder UserTS)

options.clearCache.pages = 1
options.clearCache.all = 1

stellt ein Dropdownfeld zur Verfügung mit dem der Benutzer für einzelne und für alle Seiten den '''Cache löschen''' kann.

==== sichtbare Spalten festlegen====
PageTS oder User TS

mod {
SHARED.colPos_list = 0,2
}

Zeigt nur die mittlere und die Spalte Normal und Rechts angezeigt (Links=1, Normal=0, Rechts=2,Rand =3).

==== Dropdown-Feld für die Überschrift anpassen ====
PageTS

So kann man die überflüssigen Menüeinträge im Feld Header löschen(100 steht für den Wert versteckt):
TCEFORM.tt_content.header_layout.removeItems = 2,3,4,5,100
Trick: Wenn man nicht weiß welchen Wert ein eintrag hat, einfach diesen Wert verwenden und in der Datenbank nachgucken.

==== Überschreiben der Menüeinträge: ====
Page TS

TCEFORM.tt_content.header_layout.altLabels.0 = Überschrift Text
TCEFORM.tt_content.header_layout.altLabels.1 = Überschrift Grafik

==== Neue Seiten automatisch einer Benutzergruppe zuordnen ====
Im PageTS wird die Gruppe festgelegt der neue Seiten zugeordnet werden. Außerdem die Rechte für den Besitzer usw. festgelegt.

TCEMAIN.permissions.groupid = 1
TCEMAIN.permissions.user = show, editcontent, new, edit, delete
TCEMAIN.permissions.group = show, editcontent, new, edit, delete
TCEMAIN.permissions.everybody = show, edit

=== Zugriff über das Frontend ===

=== Umleitung auf das Frontend ===

== Freesite Plugin ==

Datei:Typo3-redakteur.t3d

2012-04-04T13:02:58Z

Kholja: Standard Typo3 Redakteur

Standard Typo3 Redakteur

JQuery - Snippets

2012-03-29T09:46:40Z

Kholja: /* Einfaches Rollover Hide Show Skript */

Nützliche jQuery Schnipsel
== Links ==
http://css-tricks.com/snippets/jquery/

== Formulare ==
=== Fokus auf erstes Input-Feld im Formular setzen ===
// focus on the first text input field on the page
$("input[type='text']:first", document.forms[0]).focus();

== Browser ==
=== Resize des Browserfensters feststellen ===
<pre>
<script type="text/javascript" charset="utf-8" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){

//If the User resizes the window, adjust the #container height
$(window).bind("resize", resizeWindow);
function resizeWindow( e ) {
var newWindowHeight = $(window).height();
$("#container").css("min-height", newWindowHeight );
}

});
</script>

</pre>

== Templates - Vorlagen ==
=== XHTML 1.0 Template mit jQuery ===
<pre>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" dir="ltr">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Title goes here » Site title here</title>


<base href="" />
<meta name="author" content="#" />
<meta name="description" content="#" />
<meta name="copyright" content="#" />
<meta name="robots" content="#" />
<meta name="generator" content="#" />
<meta name="keywords" content="#" />
<meta http-equiv="expires" content="#" />
<meta http-equiv="cache-control" content="#" />


<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />


<script type="text/javascript">
/*<![CDATA[*/
// add 'js' class to root element to nicely allow css that degrades gracefully if js is disabled
document.getElementsByTagName('html')[0].className = 'js';
/*]]>*/
</script>


<link rel="stylesheet" href="/stylesheets/screen.css" type="text/css" media="screen, projection" />
<link rel="stylesheet" href="/stylesheets/print.css" type="text/css" media="print" />



</head>
<body>
<div id="container">

<div id="header">
<h1>Title of page goes here</h1>
<h2>Subtitle of page goes here</h2>
</div>

<div id="nav">
<ul class="menu">
<li><a href="#">Link #1</a></li>
<li><a href="#">Link #2</a></li>
<li><a href="#">Link #3</a></li>
</ul>
<ul class="breadcrumbs">
<li><a href="#">Home</a></li>
<li><a href="#">Sub directory</a></li>
<li><a href="#">Current page</a></li>
</ul>
</div>

<div id="main">
<ul class="sidebar">
<li><a href="#">Sidebar link #1</a></li>
<li><a href="#">Sidebar link #2</a></li>
</ul>

<div id="sub1">
<h3>Title of content</h3>
<p>Begin content here</p>
</div>

<div id="sub2" class="hide">
<h3>Title of content</h3>
<p>Begin content here</p>
</div>
</div>

<div id="footer">
<p>©2XXX company name here. Creative Commons link, your own link, validation, etc.</p>
</div>

</div>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript" src="/scripts/app.js"></script>



</body>
</html>
</pre>
== JavaScript nachladen während die Seite schon angezeigt wird ==
<pre>
// Add this onDocumentReady function to the end of the jQuery.js file.
// It MUST be in the jquery file to work correctly.
$(function(){
var scripts = /\?(.*)/, files = [], path = /^.*\//, loaded = 0, count = 0;

$('script').each(function(){
var src = $(this).attr('src');
if (!scripts.test(src)) return;
var pathto = src.match(path);
files = files.concat($.map(src.match(scripts).pop().split(','), function(e,i){
return pathto+e+'.js'
}));
})

count = files.length;

$.each(files, function(){
$.getScript(this, function(){
loaded++;
if(loaded == count && typeof onBackload == 'function')
onBackload(loaded)
})
})
});

/**
* If you have the following script tags:
* <script src="/path/to/jquery.min.js?somefile,otherfile.min,thirdfile"></script>
* <script src="/other/path/foo.js?different.file,final.file"></script>
* This script will "backload" the following files:
* /path/to/somefile.js
* /path/to/otherfile.min.js
* /path/to/thirdfile.js
* /other/path/different.file.js
* /other/path/final.file.js
*/

// And if you declare a function named "onBackload", it will be fired when all the scripts are loaded
// This is handy for getting things going once you're confident your scripts have all been included.
function onBackload(loaded){
alert('All ' + loaded + ' files backloaded!')
}
</pre>

== DOM Manipulation ==
=== Einfaches Rollover Hide Show Skript ===
<pre>
<script type="text/javascript">
/*<![CDATA[*/

/*]]>*/
</script>
</pre>

Siehe auch: [[Media:Maphilight-sample01.zip]]‎

===Append Site Overlay DIV===

Quelle: http://css-tricks.com/snippets/jquery/append-site-overlay-div/ (11/2011)

<pre>
$(function() {

var docHeight = $(document).height();

$("body").append("<div id='overlay'></div>");

$("#overlay")
.height(docHeight)
.css({
'opacity' : 0.4,
'position': 'absolute',
'top': 0,
'left': 0,
'background-color': 'black',
'width': '100%',
'z-index': 5000
});

});
</pre>
=== jQuery - overlay, modal box, lightbox, tooltips ===
Infos über die verschiedenen Möglichkeiten und die Unterschiede (Todo)

Beispiele:

JQuery - Snippets

2012-03-29T09:46:07Z

Kholja: /* Einfaches Rollover Hide Show Skript */

Nützliche jQuery Schnipsel
== Links ==
http://css-tricks.com/snippets/jquery/

== Formulare ==
=== Fokus auf erstes Input-Feld im Formular setzen ===
// focus on the first text input field on the page
$("input[type='text']:first", document.forms[0]).focus();

== Browser ==
=== Resize des Browserfensters feststellen ===
<pre>
<script type="text/javascript" charset="utf-8" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){

//If the User resizes the window, adjust the #container height
$(window).bind("resize", resizeWindow);
function resizeWindow( e ) {
var newWindowHeight = $(window).height();
$("#container").css("min-height", newWindowHeight );
}

});
</script>

</pre>

== Templates - Vorlagen ==
=== XHTML 1.0 Template mit jQuery ===
<pre>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" dir="ltr">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Title goes here » Site title here</title>


<base href="" />
<meta name="author" content="#" />
<meta name="description" content="#" />
<meta name="copyright" content="#" />
<meta name="robots" content="#" />
<meta name="generator" content="#" />
<meta name="keywords" content="#" />
<meta http-equiv="expires" content="#" />
<meta http-equiv="cache-control" content="#" />


<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />


<script type="text/javascript">
/*<![CDATA[*/
// add 'js' class to root element to nicely allow css that degrades gracefully if js is disabled
document.getElementsByTagName('html')[0].className = 'js';
/*]]>*/
</script>


<link rel="stylesheet" href="/stylesheets/screen.css" type="text/css" media="screen, projection" />
<link rel="stylesheet" href="/stylesheets/print.css" type="text/css" media="print" />



</head>
<body>
<div id="container">

<div id="header">
<h1>Title of page goes here</h1>
<h2>Subtitle of page goes here</h2>
</div>

<div id="nav">
<ul class="menu">
<li><a href="#">Link #1</a></li>
<li><a href="#">Link #2</a></li>
<li><a href="#">Link #3</a></li>
</ul>
<ul class="breadcrumbs">
<li><a href="#">Home</a></li>
<li><a href="#">Sub directory</a></li>
<li><a href="#">Current page</a></li>
</ul>
</div>

<div id="main">
<ul class="sidebar">
<li><a href="#">Sidebar link #1</a></li>
<li><a href="#">Sidebar link #2</a></li>
</ul>

<div id="sub1">
<h3>Title of content</h3>
<p>Begin content here</p>
</div>

<div id="sub2" class="hide">
<h3>Title of content</h3>
<p>Begin content here</p>
</div>
</div>

<div id="footer">
<p>©2XXX company name here. Creative Commons link, your own link, validation, etc.</p>
</div>

</div>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript" src="/scripts/app.js"></script>



</body>
</html>
</pre>
== JavaScript nachladen während die Seite schon angezeigt wird ==
<pre>
// Add this onDocumentReady function to the end of the jQuery.js file.
// It MUST be in the jquery file to work correctly.
$(function(){
var scripts = /\?(.*)/, files = [], path = /^.*\//, loaded = 0, count = 0;

$('script').each(function(){
var src = $(this).attr('src');
if (!scripts.test(src)) return;
var pathto = src.match(path);
files = files.concat($.map(src.match(scripts).pop().split(','), function(e,i){
return pathto+e+'.js'
}));
})

count = files.length;

$.each(files, function(){
$.getScript(this, function(){
loaded++;
if(loaded == count && typeof onBackload == 'function')
onBackload(loaded)
})
})
});

/**
* If you have the following script tags:
* <script src="/path/to/jquery.min.js?somefile,otherfile.min,thirdfile"></script>
* <script src="/other/path/foo.js?different.file,final.file"></script>
* This script will "backload" the following files:
* /path/to/somefile.js
* /path/to/otherfile.min.js
* /path/to/thirdfile.js
* /other/path/different.file.js
* /other/path/final.file.js
*/

// And if you declare a function named "onBackload", it will be fired when all the scripts are loaded
// This is handy for getting things going once you're confident your scripts have all been included.
function onBackload(loaded){
alert('All ' + loaded + ' files backloaded!')
}
</pre>

== DOM Manipulation ==
=== Einfaches Rollover Hide Show Skript ===
<pre>
<script type="text/javascript">
/*<![CDATA[*/

/*]]>*/
</script>
</pre>

Siehe auch: [[Media:Maphilight-sample01.zip]]‎

===Append Site Overlay DIV===

Quelle: http://css-tricks.com/snippets/jquery/append-site-overlay-div/ (11/2011)

<pre>
$(function() {

var docHeight = $(document).height();

$("body").append("<div id='overlay'></div>");

$("#overlay")
.height(docHeight)
.css({
'opacity' : 0.4,
'position': 'absolute',
'top': 0,
'left': 0,
'background-color': 'black',
'width': '100%',
'z-index': 5000
});

});
</pre>
=== jQuery - overlay, modal box, lightbox, tooltips ===
Infos über die verschiedenen Möglichkeiten und die Unterschiede (Todo)

Beispiele:

JQuery - Snippets

2012-03-29T09:45:24Z

Kholja: /* Einfaches Rollover Hide Show Skript */

Nützliche jQuery Schnipsel
== Links ==
http://css-tricks.com/snippets/jquery/

== Formulare ==
=== Fokus auf erstes Input-Feld im Formular setzen ===
// focus on the first text input field on the page
$("input[type='text']:first", document.forms[0]).focus();

== Browser ==
=== Resize des Browserfensters feststellen ===
<pre>
<script type="text/javascript" charset="utf-8" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){

//If the User resizes the window, adjust the #container height
$(window).bind("resize", resizeWindow);
function resizeWindow( e ) {
var newWindowHeight = $(window).height();
$("#container").css("min-height", newWindowHeight );
}

});
</script>

</pre>

== Templates - Vorlagen ==
=== XHTML 1.0 Template mit jQuery ===
<pre>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" dir="ltr">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Title goes here » Site title here</title>


<base href="" />
<meta name="author" content="#" />
<meta name="description" content="#" />
<meta name="copyright" content="#" />
<meta name="robots" content="#" />
<meta name="generator" content="#" />
<meta name="keywords" content="#" />
<meta http-equiv="expires" content="#" />
<meta http-equiv="cache-control" content="#" />


<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />


<script type="text/javascript">
/*<![CDATA[*/
// add 'js' class to root element to nicely allow css that degrades gracefully if js is disabled
document.getElementsByTagName('html')[0].className = 'js';
/*]]>*/
</script>


<link rel="stylesheet" href="/stylesheets/screen.css" type="text/css" media="screen, projection" />
<link rel="stylesheet" href="/stylesheets/print.css" type="text/css" media="print" />



</head>
<body>
<div id="container">

<div id="header">
<h1>Title of page goes here</h1>
<h2>Subtitle of page goes here</h2>
</div>

<div id="nav">
<ul class="menu">
<li><a href="#">Link #1</a></li>
<li><a href="#">Link #2</a></li>
<li><a href="#">Link #3</a></li>
</ul>
<ul class="breadcrumbs">
<li><a href="#">Home</a></li>
<li><a href="#">Sub directory</a></li>
<li><a href="#">Current page</a></li>
</ul>
</div>

<div id="main">
<ul class="sidebar">
<li><a href="#">Sidebar link #1</a></li>
<li><a href="#">Sidebar link #2</a></li>
</ul>

<div id="sub1">
<h3>Title of content</h3>
<p>Begin content here</p>
</div>

<div id="sub2" class="hide">
<h3>Title of content</h3>
<p>Begin content here</p>
</div>
</div>

<div id="footer">
<p>©2XXX company name here. Creative Commons link, your own link, validation, etc.</p>
</div>

</div>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript" src="/scripts/app.js"></script>



</body>
</html>
</pre>
== JavaScript nachladen während die Seite schon angezeigt wird ==
<pre>
// Add this onDocumentReady function to the end of the jQuery.js file.
// It MUST be in the jquery file to work correctly.
$(function(){
var scripts = /\?(.*)/, files = [], path = /^.*\//, loaded = 0, count = 0;

$('script').each(function(){
var src = $(this).attr('src');
if (!scripts.test(src)) return;
var pathto = src.match(path);
files = files.concat($.map(src.match(scripts).pop().split(','), function(e,i){
return pathto+e+'.js'
}));
})

count = files.length;

$.each(files, function(){
$.getScript(this, function(){
loaded++;
if(loaded == count && typeof onBackload == 'function')
onBackload(loaded)
})
})
});

/**
* If you have the following script tags:
* <script src="/path/to/jquery.min.js?somefile,otherfile.min,thirdfile"></script>
* <script src="/other/path/foo.js?different.file,final.file"></script>
* This script will "backload" the following files:
* /path/to/somefile.js
* /path/to/otherfile.min.js
* /path/to/thirdfile.js
* /other/path/different.file.js
* /other/path/final.file.js
*/

// And if you declare a function named "onBackload", it will be fired when all the scripts are loaded
// This is handy for getting things going once you're confident your scripts have all been included.
function onBackload(loaded){
alert('All ' + loaded + ' files backloaded!')
}
</pre>

== DOM Manipulation ==
=== Einfaches Rollover Hide Show Skript ===
<pre>
<script type="text/javascript">
/*<![CDATA[*/

/*]]>*/
</script>
</pre>

===Append Site Overlay DIV===

Quelle: http://css-tricks.com/snippets/jquery/append-site-overlay-div/ (11/2011)

<pre>
$(function() {

var docHeight = $(document).height();

$("body").append("<div id='overlay'></div>");

$("#overlay")
.height(docHeight)
.css({
'opacity' : 0.4,
'position': 'absolute',
'top': 0,
'left': 0,
'background-color': 'black',
'width': '100%',
'z-index': 5000
});

});
</pre>
=== jQuery - overlay, modal box, lightbox, tooltips ===
Infos über die verschiedenen Möglichkeiten und die Unterschiede (Todo)

Beispiele:

Datei:Maphilight-sample01.zip

2012-03-29T09:44:10Z

Kholja: hat eine neue Version von „Datei:Maphilight-sample01.zip“ hochgeladen: Map mit Tooltips erweitert

ImageMap mit jQuery und Map Hilighter

JQuery - Snippets

2012-03-29T09:42:50Z

Kholja: /* jQuery - overlay, modal box, lightbox, tooltips */

Nützliche jQuery Schnipsel
== Links ==
http://css-tricks.com/snippets/jquery/

== Formulare ==
=== Fokus auf erstes Input-Feld im Formular setzen ===
// focus on the first text input field on the page
$("input[type='text']:first", document.forms[0]).focus();

== Browser ==
=== Resize des Browserfensters feststellen ===
<pre>
<script type="text/javascript" charset="utf-8" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){

//If the User resizes the window, adjust the #container height
$(window).bind("resize", resizeWindow);
function resizeWindow( e ) {
var newWindowHeight = $(window).height();
$("#container").css("min-height", newWindowHeight );
}

});
</script>

</pre>

== Templates - Vorlagen ==
=== XHTML 1.0 Template mit jQuery ===
<pre>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" dir="ltr">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Title goes here » Site title here</title>


<base href="" />
<meta name="author" content="#" />
<meta name="description" content="#" />
<meta name="copyright" content="#" />
<meta name="robots" content="#" />
<meta name="generator" content="#" />
<meta name="keywords" content="#" />
<meta http-equiv="expires" content="#" />
<meta http-equiv="cache-control" content="#" />


<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />


<script type="text/javascript">
/*<![CDATA[*/
// add 'js' class to root element to nicely allow css that degrades gracefully if js is disabled
document.getElementsByTagName('html')[0].className = 'js';
/*]]>*/
</script>


<link rel="stylesheet" href="/stylesheets/screen.css" type="text/css" media="screen, projection" />
<link rel="stylesheet" href="/stylesheets/print.css" type="text/css" media="print" />



</head>
<body>
<div id="container">

<div id="header">
<h1>Title of page goes here</h1>
<h2>Subtitle of page goes here</h2>
</div>

<div id="nav">
<ul class="menu">
<li><a href="#">Link #1</a></li>
<li><a href="#">Link #2</a></li>
<li><a href="#">Link #3</a></li>
</ul>
<ul class="breadcrumbs">
<li><a href="#">Home</a></li>
<li><a href="#">Sub directory</a></li>
<li><a href="#">Current page</a></li>
</ul>
</div>

<div id="main">
<ul class="sidebar">
<li><a href="#">Sidebar link #1</a></li>
<li><a href="#">Sidebar link #2</a></li>
</ul>

<div id="sub1">
<h3>Title of content</h3>
<p>Begin content here</p>
</div>

<div id="sub2" class="hide">
<h3>Title of content</h3>
<p>Begin content here</p>
</div>
</div>

<div id="footer">
<p>©2XXX company name here. Creative Commons link, your own link, validation, etc.</p>
</div>

</div>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript" src="/scripts/app.js"></script>



</body>
</html>
</pre>
== JavaScript nachladen während die Seite schon angezeigt wird ==
<pre>
// Add this onDocumentReady function to the end of the jQuery.js file.
// It MUST be in the jquery file to work correctly.
$(function(){
var scripts = /\?(.*)/, files = [], path = /^.*\//, loaded = 0, count = 0;

$('script').each(function(){
var src = $(this).attr('src');
if (!scripts.test(src)) return;
var pathto = src.match(path);
files = files.concat($.map(src.match(scripts).pop().split(','), function(e,i){
return pathto+e+'.js'
}));
})

count = files.length;

$.each(files, function(){
$.getScript(this, function(){
loaded++;
if(loaded == count && typeof onBackload == 'function')
onBackload(loaded)
})
})
});

/**
* If you have the following script tags:
* <script src="/path/to/jquery.min.js?somefile,otherfile.min,thirdfile"></script>
* <script src="/other/path/foo.js?different.file,final.file"></script>
* This script will "backload" the following files:
* /path/to/somefile.js
* /path/to/otherfile.min.js
* /path/to/thirdfile.js
* /other/path/different.file.js
* /other/path/final.file.js
*/

// And if you declare a function named "onBackload", it will be fired when all the scripts are loaded
// This is handy for getting things going once you're confident your scripts have all been included.
function onBackload(loaded){
alert('All ' + loaded + ' files backloaded!')
}
</pre>

== DOM Manipulation ==
=== Einfaches Rollover Hide Show Skript ===
<pre>
<script type="text/javascript">
/*<![CDATA[*/

/*]]>*/
</script>
</pre>

===Append Site Overlay DIV===

Quelle: http://css-tricks.com/snippets/jquery/append-site-overlay-div/ (11/2011)

<pre>
$(function() {

var docHeight = $(document).height();

$("body").append("<div id='overlay'></div>");

$("#overlay")
.height(docHeight)
.css({
'opacity' : 0.4,
'position': 'absolute',
'top': 0,
'left': 0,
'background-color': 'black',
'width': '100%',
'z-index': 5000
});

});
</pre>
=== jQuery - overlay, modal box, lightbox, tooltips ===
Infos über die verschiedenen Möglichkeiten und die Unterschiede (Todo)

Beispiele: