Sidste gang jeg skiftede design m.m. her på bloggen tog jeg hijax-princippet til mig, hvilket f.eks. har gjort, at man nu kan søge “live” med Javascript og “almindeligt” uden Javascript. Jeg ville have brugt samme teknik til kommentering, men kom aldrig længere end til at man kunne kommentere via et “normalt” POST.

Blog spam helvede 

At have en ganske almindelig standard HTML-formular er, nu til dags, næsten det samme som at sige “Jeg vil gerne være offer for al jeres lorte-spam – bare fyr løs“. Det var i hvert hvad resultatet for mig…

Heldigvis havde jeg implementeret Akismet Antispam, og havde i min administration rimelig nem mulighed for at se hvilke kommentarer der var spam… men ærlig talt, det er sku liiiidt irriterende at være nød til konstant at slette spam-kommentarer! Man kunne selvfølgelig bare lade være med at gemme de kommentarer Akismet tror er spam – men man kan jo aldrig vide sig sikker?

Følgende screenshot var resultatet af ikke at have været ved computeren en ellers så stille og rolig søndag – Mandag morgen; vær så god at slette spam!

Spam kan mindskes med AJAX!

Nu har jeg endelig fået taget mig sammen til at få implementeret kommentering med AJAX, ligesom i det gamle design. Men ikke nok med det – jeg har nu helt fjernet muligheden for at kommentere, hvis man ikke har Javascript understøttet! Jeps, det er grove løjer, men jeg har set mig nødsaget til det → se ovenstående screenshot .

Faktisk har jeg haft det nye “setup” til at kører i et par dage nu, og indtil nu er der ikke kommet en eneste spam-kommentar igennem – Herligt!

Kommenteringen er testet i IE 6 og 7 + Firefox 3 til Windows samt Firefox 3 og Safari 3 til Mac – skulle der være nogen derud, som ikke synes at kunne få det til at virke må I MEGET GERNE skrive mig en mail på “admin[snabela]simon-jensen.net”.

Mens sidste post om hijax kort fortalte princippet bag hijax, og snakken mere gik på “hvorfor” man burde bruge det, har jeg nu haft mulighed for rent faktisk at lege lidt med hijax, og mener nu der skulle være basis for at skrive endnu en post herom.

Hijax super kort

Jeg har taget udgangspunkt i et simpelt eksempel, som jeg selv synes forklare det praktiske bag princippet. Super kort fortalt, så går hijax ud på at “hijacke” (overtage) funktionalitet på din hjemmeside og udføre denne via AJAX, men SAMTIDIG skal det være muligt at afvikle samme funktionalitet UDEN brug af Javascript – grundtanken i graceful degradation.

Hijax en formular

Hijax kan f.eks. bruges i forbindelse med en formular – I denne post har jeg taget udgangspunkt i en simpelt udgave af en tilmeldingsformular til et tænkt nyhedsbrev, men i princippet kan hijax bruges til en hvilken som helst formular.

HTML formularen:

Formularen er meget standard med to inputs og postering via POST-metoden. Vi kan bruge onsubmit-attributten til at hijacke formularen. onsubmit giver os nemlig mulighed for at udføre en stump Javascript før dataen vil blive postet til serveren. I eksemplet herunder tager jeg hele formularen med som parameter til Javascript funktionen hijax(form). For at være sikker på at det “almindelige” POST ikke bliver udført returnerer vi false efterfølgende… da dette faktisk er direkte Javascripting i formularen vil dennes postering kun stoppes hvis Javascript er understøttet.

<form method="post" action="signup.php" onsubmit="hijax(this); return false;">
    <label>Name:</label>
    <input type="text" name="name"   />
    <label>E-mail:</label>
    <input type="text" name="email"   />
    <input type="submit"   />
</form>

Javascriptet:

Selve Javascriptet behøver ikke være mere indviklet end vist herunder. Jeg har endnu engang taget udgangspunkt i et AJAX request med Prototype JS.

Her serializerer jeg hele formularen, og tilføjet en ekstra parameter hijax=true. Selve værdien er denne parameter bruger jeg faktisk ikke til noget, hvilket du vil kunne se i understående PHP-script. Vi poster det hele til PHP-filen signup.php, hvilken også var action-fil i HTML-formularen ovenfor.

hijax = function(formular) {
    var url = signup.php;
    var params = Form.serialize(formular) + &hijax=true;
    new Ajax.Request(url, {method:post, postBody:params});
}

PHP serveren:

Som programmør forsøger jeg at være doven!? Jeg vil gerne have et optimalt resultat af min kode, og jeg vil skrive så få linier som muligt. Og her er hijax fantastisk, for ligemeget om vi posterer formularen “almindeligt” eller via AJAX, kan vi bruge samme fil til at håndtere posteringen.

Da jeg også forsøger at være lidt af en sucker for brugervenlighed, vil jeg gerne have mulighed for at give brugeren et response ligemeget om denne har Javascript-understøttelse eller ej. Tricket er altså at kunne adskille de to posteringer fra hinanden. Jeg har brugt den ekstra parameter ved AJAX-posteringer, men du vil sikkert selv kunne komme på andre løsninger (tilføj dem gerne i kommentaren)?

<?php
session_start();
$name = mysql_real_escape_string($_POST[name]);
$email = mysql_real_escape_string($_POST[email]);
$isHijax = $_POST[hijax];
mysql_query("INSERT INTO signups (name, email) VALUES ($name, $email)");
if(isset($isHijax)) {
    echo Saved using AJAX...;
} else {
    $_SESSION[message] = Saved using normal post...;
    $redirect = $_SERVER[HTTP_REFERER];
    header("Location: $redirect");
}
?>

Med ovenstående metode vil du kunne “hijaxe” en formular, og med lidt få ændringer i formularens action-fil, vil du også have mulighed for at give brugerene et response, ligemeget om de bruger AJAX eller ej – Det er skudda smart .

Download

Hijax af en formular (.zip)

Grunden til at du måske har siddet og mumlet lidt i skægget, skal findes hos webbrowseren, det er nemlig her restriktionen ligger. Jeg tror ikke jeg kan forklare det meget bedre end Yahoo!, som skriver følgende:

All modern web browsers impose a security restriction on network connections, which includes calls to XMLHttpRequest. This restriction prevents a script or application from making a connection to any web server other than the one the web page originally came from.

But fear not – der selvfølgelig en løsning …

No-go scenariet

Lad os starte med at forklare no-go scenariet visuelt (tak til Yahoo! for allerede at have lavet grafiken ).

Har du en webapplikation, som findes på en webserver, og afvikles i en browser hos den besøgende, kan det altså ikke lade sig gøre, at lave et request til en ekstern server/service som f.eks. Yahoo! via XMLHttpRequest (AJAX) – Dette sørger browseren for, vha. den omtalte restiktion ved denne type kald.

Et sådanne forsøg, vil se ud som herunder:

Do-go scenariet

Vi ved altså at restiktionen ligger hos browseren – Samtidig kan jeg så fortælle, at det godt kan lade sig gøre at lave et request fra domænets server til en anden ekstern server/service/domæne. Når det er sagt, så kan du vel næsten gætte dig til, hvordan vi kan overkomme at lave et AJAX-request til et andet domæne?!

Jeps – I stedet for at lave AJAX-requestet direkte til den eksterne server, kalder vi en proxy, på vores egen server. Med proxy, menes faktisk bare et script som sender kaldet videre til den eksterne server, samt leverer responset herfra tilbage til browseren.

Scenariet ser ud som herunder:

En sådanne proxy kan laves på flere måder. Hos Yahoo! kan du downloade en version som benytter CURL. Jeg har leget med en version som benytter sig af PEAR.

Proxy med PEAR HTTP/Request

PEAR er et stort framework som fungerer som et pakke-system. PEAR leverer pakker/klasser til mere eller mindre alt, hvad du kunne tænke dig – men for at lave vores omtalte proxy, skal vi faktisk ikke bruge andet, end en standard PEAR-error-klasse samt en Request-klasse til en HTTP pakke – det lyder indviklet?! Bare rolig, du kan downloade det hele i slutningen af denne post .

Server proxy

Et lidt simplificeret eksempel på en proxy med PEAR, ser ud som herunder:

<?php
require_once "HTTP/Request.php";

$url = $_REQUEST[url];
$req =& new HTTP_Request($url);

if (!PEAR::isError($req->sendRequest())) {
    print $req->getResponseBody();
}
?>

Klienten / Javascriptet

Proxy-scriptet skal altså modtage den URL som den skal hente. Der oprettes et objekt af typen HTTP_Request, som vi kan bruge til at sende requestet videre med, samt “print” responset. Responset skal herefter modtages på klient-siden, og endelig udskrives – dette kunne se ud som herunder:

proxy_request = function()
{
    $("loading").toggle();
    var info = function(t) {
        $("loading").toggle();
        $("status").innerHTML = t.responseText;
    };

    var url = proxy.php?reg_url=   encodeURIComponent("http://flickr.com/photos/simon_jensen/");
    new Ajax.Request(url, {method:get, onSuccess:info, onFailure:info});
}

Download

Cross Domain AJAX Request (.zip)

Problematikken med at visse applikationer udelukker visse brugere, har længe fundet sted, og specielt opstår dette problem ved brugen af Javascripts, Flash eller andet scripting, som stille specielle krav til browseren. AJAX is all about Javascript, og med den store fremgang denne “teknik” har fået, er problemet, selvsagt, ikke blevet mindre.

Vi hopper på Javascript-vognen uden at tænke over at der stadig kan komme brugere til, som ikke har mulighed for at afvikle de smarte features man kan opnå med AJAX, og i værste fald ødelægger dette mere, end den vundne feature ville have givet.

Dette er lige nøjagtig hvad man med Hijax vil forsøge at komme til livs! I denne post vil jeg forklare lidt mere grundlæggende, hvad der ligger i Hijax, for snarest at komme med en mere praktisk gennemgang.

Hvorfor er det så vigtigt?

Den aller vigtigste grund er, som beskrevet ovenfor, at der faktisk stadig er brugere der ikke kan afvikle Javascript! Jeps, den er god nok, og selvom det er brugergrupper som vi måske ikke tænker så meget på i det daglige, er de faktisk pænt store og med voksende indflydelse.

Den største gruppe af disse er vel stadig søgemaskinernes søgerobotter! Søgerobotter “taler” ganske simpelt ikke Javascript sproget. Robotterne læser bedst ren (X)HTML, og det er som om de bare springer over, hvor der står noget med <script…>.

En anden stor, og voksende, gruppe er brugere på mobiltelefoner! At designe en webapplikation til mobiltelefoner er et større kapitel, og Javascript er langt fra den eneste ting man skal tage højde for her – Men mobile browsere der understøtter Javascripts er pt., efter min bedste overbevisning, stadig i undertal! iPhonen er (officielt) ikke kommet til Danmark endnu, men når det sker vil jeg tro, at man vil kunne måle et stigning i søgninger/besøg med mobiltelefonerne på de danske sider. Der findes selvfølgelig mobile løsninger derude, men det skal ikke være nødvendigt at installere en 3. parts browser, for at kunne surfe (ordentligt) på nettet vel?

Specielt er du i farvezonen, hvis du bruger Javascript til navigation på din hjemmeside! Tags som onclick, window.localtion.href, bør ikke være nødvendige at kunne afvikle, for at navigere din side. I henhold til mobiltelefonen, bør man huske på, at langt de fleste ikke har den samme måde at navigere på – musen mangler! Jo, nogle har touchscreen, og nogle kan til dels bruge en pen – men mouseover, og ligeledes CSS tagget :hover, bør du ikke regne med virker specielt godt på en mobiltelefon!

Test hvad der virker uden Javascript

Den letteste måde at teste din sides funktionalitet, som den vil være på en mobiltelefon er ganske simpelt, at slå Javascript fra i din browser – noget langt de fleste browser har mulighed for. Den funktionalitet der efterfølgende kan afvikles, vil højst sandsynligt være den samme som du vil kunne bruge på en mobiltelefon.

For at se hvad søgemaskinernes søgerobotter møder og kan, på din side, findes den tekstbaserede browser Lynx. Lynx findes både til Windows, Mac og Linux, og afvikles i en kommandoprompt som vist på billedet herunder.

Man skal lige vende sig til at navigere i “browseren”, men når det er på plads, kan du få et ret godt billede af, hvordan en søgerobot kan “benytte” din side. Besøger du min side, vil du sikkert ligge mærke til at det ikke er muligt at søge via min Live Search, da denne udelukkende aktiveres via Javascript.

Kernen i Hijax: Graceful degradation

Kernen til at undgå at udelukke en håndfuld besøgende i at kunne bruge dit site ordenligt, skal findes i teknikken Graceful degradation – som også er kernen i Hijax.

Graceful degradation er en meget logisk en simpel tanke – kort fortalt, levere du et alternativ, til de brugere som ikke har mulighed for at afvikle Javascript. Den letteste måde at forklare graceful degradataion på, er gennem et lille eksempel. Du bruger faktisk browserens mulighed for at checke understøttelsen af Javascript. Hvis browseren ikke understøtter Javascript “falder den tilbage” til en standard funktionalitet.

Kodestumpen nedenfor vil udføre Javascript-funktionen popUp(url), som tænkt vil åbne www.simon-jensen.net i et popup-vindue – hvis ellers Javascript er understøttet. Hvis Javascript ikke er understøttet, vil brugeren på normal vis blive videresendt til adressen.

<a href="http://www.simon-jensen.net/" onclick="popUp(http://www.simon-jensen.net); return false;">Simon Jensen</a>

Hijax i en nødeskald

Tankegangen i Hijax er, på samme måde som Gracefull degradation, meget logisk og simpel.

Som Jeremy beskriver Hijax, går dette i praksis ud på, at ud først udvikler en “normal/klassisk” version af din webapplikation. Med normal menes der, en version som ikke udelukker søgemaskinerobotter og andet godtfolk, som ikke kan afvikle Javascript. Herefter kan du “pakke” dine formulare, og evt. andet, ind i Javascript-funktionalitet – Med andre ord “hijacke dine formulare med AJAX“.

Denne “overtagelse” skal selvfølgelig gøres efter Gracelfull degradation, således at vi ikke bare ender med en Javascript baseret løsning, men biholder den klassiske version, så alle kan være med.

Hijax i praksis

Jeg har endnu ikke haft leget med Hijax i praksis, men forventer at komme igang med det snarrest … herefter vil der, som skrevet i starten, komme en lille opfølger på teknikken. Nu skulle de vigtigste pointer være slået fast, og jeg er pændt sikker på at jég, for eftertiden, vil tænke mere over, at levere alternativer til Javascript-baseret funktionaliter.

I forbindelse med det sidste nye redesign, har jeg oprettet en “Live search”. Nåhhh ja, den er måske ikke så live som en definition vil have det – men det er da en fed feature – og funktionaliteten bag den, vil jeg da gerne dele med jer.

Denne post består således af en gennemgang, af de vigtigste punkter i implementeringen, det være sig lidt XHTML, CSS, Javascript samt PHP.

I slutningen af posten, kan du desuden downloade en lille demo-version af funktionen.

For at benytte koden i denne post kræves det, at du har downloaded og inkluderet Javascript frameworket Prototype JS, samt effektbiblioteket script.aculo.us. Disse skal inkluderes i sidens <head>-sektion, som med et hvert andet Javascript.

XHTML

Jeg har gjort det til god skik, at oprette en “container”-div. Dette div er ikke nødvendig, men her er det taget med for at få bare en smule design med.

Inde i denne container findes et billede, som er stylet til at være skjuldt. Dette er hvad jeg bruger som loading animation – altså en animation der skal vise, at et script arbejder. Input feltet skulle gerne tale for sig selv. Straks herunder er der, i endnu et div, oprettet en ul/li-liste – det er denne vi vil fremvise resultater i. Resultaterne skal ligeledes fremkommet/tilføjes som li-elementer til listen.

<div id="container">
    <img src="loading.gif" id="lsloading" align="right" alt="" style="display:none;"  />
    <input type="text" value="Type and you´ll find..." id="lsquery"  />
    <br  />
    <div id="lsresults" style="display:none;">
        <ul id="lsResList">
            <li><i>Type and you´ll find...</i></li>
        </ul>
    </div>
</div>

CSS

CSS delen af dette script, taler også lidt for sig selv. Det er muligt, at designer kan laves en hel del nemmere (læs: med mind css), men her er indsat hvad du finder i demoen.

Det vigtigste her, vil nok være at påpege, at resultatlisten er sat til absolut positionering. Dvs. vi kan vise den ovenpå andre elementer, hvorfor den ikke skal til at “skubbe” rundt på designet. Du har måske bemærket at resultatlisten er en smule gennemsigtigt – Dette ER en CSS feature, men den bliver udført gennem Javascript-delen.

body {
    font-family: "Trebuchet MS";
    font-size: 1em;
    background: #333;
}

#container {
    background: #fff;
    width: 400px;
    padding: 20px;
    margin: 0 auto;
}

#container #lsloading {
    position: relative;
    top: 5px;
}

#container input {
    font-family: "Trebuchet MS";
    font-size: 1em;
    width: 350px;
    margin-left: 20px;
}

#container #lsresults {
    position: absolute;
    background: #fff;
    color: #333;
    width: 354px;
    margin-left: 20px;
}

#container #lsresults ul {
    list-style: none;
    margin: 0px;
    padding: 0px;
}

#container #lsresults ul li {
    list-style: none;
    margin: 10px;
    padding: 0px;
}

Javascript

Javascriptet er den største del af denne “applikation”. JS-delen består af et Live Search objekt (ls) med metoderne init(), search(), showResults() og hideResults(). Derudover bliver der, når en side er loaded,  initialiseret nogle observer eventhandlers på søgefelter.

Humlen ligger i init() og search() metoderne. init() bliver kaldt hver gang der tastes i søgefeltet, og denne kalder search() som udføre et AJAX-kald til serveren, som levere selve søgningen. For ikke at spamme serveren er der indbygget en timer i init() metoden som gør, at search() metoden kun bliver kaldt hvis der ikke er tastet noget i søgefeltet i 0.5 sekunder.

/**
 * Live search
 */
var ls = {
	queryField: "lsquery", //id name of queru input-field
	results: "lsresults", //id name of result-list
	loading: "lsloading", //id name for loading animation
	timer: null,

	/**
	 * Initialize a search:
	 * reset timer, and performe search
	 * if nothing has been typed in 0.5 sec.
	 */
	init: function(event) {
		var query = Event.element(event).value;
		ls.timer = clearTimeout(ls.timer);
		if(query != "" || query != "Type and you´ll find...") {
			ls.timer = setTimeout("ls.search(" query ");", 500);
		}
	},

	//start a search using AJAX
	search: function(query) {
		if(query != "") {
			$(ls.loading).show();
			var done = function(t) {
				$(ls.loading).hide();
			}
			var url = php-backend.php;
			var pars = action=search&query=   query;
			new Ajax.Updater(lsResList, url,
			{
				method: post,
				parameters: pars,
				onSuccess:done,
				onFailure:done,
				inserting:Insertion.Before
			});
		}
	},

	//show the result list
	showResults: function() {
		if($(ls.results).getStyle(opacity) != 0.9)
			new Effect.Appear(ls.results, {duration:0.2, from:0.0, to:0.9});
	},

	//hide the result list
	hideResults: function() {
		new Effect.Opacity(ls.results, {duration:0.2, from:0.9, to:0.0});
	}
}

/**
 * Initialize key-observers for search input field.
 */
Event.observe(window, load, function() {
	$(ls.queryField).observe(keyup, ls.init);
	$(ls.queryField).observe(keydown, ls.init);

	//remove input field value when first focused
  	$(ls.queryField).onfocus = function() {
  		if($(ls.queryField).value == "Type and you´ll find...")
			$(ls.queryField).value = "";
		ls.showResults();
	}

	//reset input field when not focused and value is ""
  	$(ls.queryField).onblur = function() {
  		if($(ls.queryField).value == "")
  			$(ls.queryField).value = "Type and you´ll find...";
  		ls.hideResults();
  	}
});

PHP

PHP delen, er hvad jeg ovenfor har kaldt “serveren”. Hvordan du vil udføre selve søgningen er mere eller mindre op til dig selv. Vælger du at benytte dette script, skal resultaterne dog returneres som én streng. Hvert resultat skal, for at designet holder stik, leveres som et <li>-element.

Bare for at give en ide, leveres scriptet med følgende PHP backend.

<?php
/************************************************************************
 * Here you would probably perform som DB-search.
 * In this example, you will only find a hit, when typing a string that -
 * is in the array $results.
 ************************************************************************/
if($_POST["action"] == "search") :
	$query = utf8_decode(urldecode($_POST["query"]));
	$results = array("","webprogrammering","blog","ajax","javascript","php","css");
	$key = array_search($query, $results);
	if($key) :
		echo "<li><a href="#">"".utf8_encode($results[$key])."" found with key: ".$key."</a></li>";
	else :
		echo "<li><i>Intet resultat</i></li>";
	endif;
endif;
?>

Som beskrevet i kommentaren, vil man selvfølgelig lave en reel database søgning eller lignende, hvilket lige nøjagtig er hvad jeg gør her på sitet.

Sååå – uden yderligere forklaringer skal du være velkommen til at downloade, modificere osv. følgende version af Live Search. Skulle der opstå problemer, eller mangler du yderligere forklaring, skal du endelig kommentere nedenfor.

Download

Live Search med Prototype JS og PHP (.zip)

Live Search med Prototype JS og PHP (Æ,Ø,Å understøttet) (.zip)

Jeg kommer forbi mange blogs som f.eks. har et plugin der viser personens sidst afspilede musik numre, eller posters af de spil personen spiller pt., projekter som en udvikler arbejder på osv. – Lidt ligesom jeg har min Flickr Feed, altså små widgets som kan være med til at der sker lidt mere på siden.

Og så har jeg længe ikke rigtig vidst hvorfor jeg har den “nyheds post” som du pt. finder nederst på siden. For læææænge side, da jeg besluttede mig for at lave dette site, brugte jeg den lidt som en todo/updater, altså et sted hvor jeg kunne skrive et par linier om de sidste nye tiltag jeg havde lavet på sitet – dette bliver den vel til dels også brugt til stadigvæk, men nu tror jeg nok, at den skal til at have et lidt andet formål.

Jeg har oplevet flere gange, at falde over en artikkel på nettet, som jeg i gennemlæsningens rus, synes at have en masse at skrive om. Jeg er efter et sådanne trip gået til min administration og oprettet en klade-post, men er sjældent blevet færdig med at skrive posten. En tid senere, kan jeg så komme tilbage til administrationen og finde adskillige påbegyndte klader, som jeg nu ikke har den fjerneste anelse om, hvor jeg ville hen med?!

Dette skal være “In other news…“s nye job – en slags shout-out felt, hvor jeg kan skrive alverden hjernegas, så det ikke bare går tabt. På denne måde kan jeg vedligeholde de egentlige blogpost til lidt længere poster, stadig med mulighed for at kommenterer, og samtidig få de mindre betydningsfulde ting med. I den anledning har jeg oprettet en mulighed for at browse frem og tilbage mellem de skrevne “nyheder”, og håber på den måde at kunne få presset lidt mere ind her.

Og ja, så er jeg vel ved at have taget bare en lille smule skade af alt den projektskrivning, diagram designen, og ellers generelt at skulle dokumenterer hvad jeg laver – så her er et diagram, der skulle fortælle hvordan jeg har opbygget funktionaliteten – Jeg har forresten brugt OpenSource programmet Dia, som er et let og anvendeligt alternativ til M$ Visio, hvis nogen skulle være interesseret.

Lidt om det nye design

Der er faktisk ikke så meget at sige til det – jeg har ikke selv designet denne gang, hvilket vidst kun er for det bedre. Jeg er endnu engang blevet bekrætet i, ikke at være designer.

URLerne, og selve navigationen, er den samme som før – læs evt. her. Til gengæld har jeg fået en del øvelse i at kode administrationen (CMS om man vil). Som jeg kort forklarede sidste gang jeg lavede om, var jeg ude i noget vældig smart “on site” AJAX redigering – men det holdt ikke, så nu har jeg lavet en blog administration fra bunden – og den er jeg faktisk riiiimelig tilfreds med.

Alt dette kan I, i-og-for-sig være ligeglade med – men jeg har også tænkt på jer

Reader Appreciation

Af en eller anden grund tog en kommentar-diskusion om “AJAX og Æ,Ø,Å” pludselig en drejning overmod optimering af et websites størrelse. Ikke noget der kom bag på mig, da jeg havde fået det at vide før, men nu har jeg også fået gjort noget ved det. Sitet er nu GZip komprimeret – Tak til Joseph, for links og opfordring (PS. vi bruger PHP 5 nu ).

Safari Webbrowser er pt. i beta til Windows – og med et stigende antal brugere med Macintosh, har jeg taget mig mere sammen mht. browser kompatibilitet. Jeg har således verficeret at sitet ser udemærket ud (og fungerer) i både IE, Firefox, Opera og Safari – også med kommentarer! Var faktisk ikke klar over det, men det var ikke muligt at kommenterer i browsere som ikke understøttede FCKeditoren (f.eks. Safari og Opera).

Mere til kommentarer

Da jeg den sidste tid har fået en del henvendinger omkring scripting (programmering generelt), har jeg tilføjet muligheden for at bruge lidt typografi. Jeg har oprettet mulighed for at markerer en tekst som enten citat eller kode, foruden de normale fed, kursiv, og understreget.

Håber I kan bruge det til noget – Jeg er i hvert fald allerede blevet glad for det

Et af de første problemer jeg hørte om, var problemet med browsers back-buttons, hvilket der heldigvis findes en løsning på – og lad os ikke glemme, at dette faktisk kun finder sted, når vi bruger AJAX til navigation, eller fjerner/opdaterer et element, så det gamle indhold forsvinder.

Alex Bosworth har skrevet et par artikler om diverse problemer, som folk enten overser eller ikke kender til – Meget interessant og relevant læsning, for folk der vil igang, eller er igang med AJAX.

AJAX og Æ,Ø,Å

I de to nævnte artikler ovenfor, kan du læse meget mere om diverse små problemer. Jeg har i mellemtiden fundet mit eget problem – og det er der nu mange der har, hvis man googler det lidt. Problemet er Æ, Ø, Å og muligvis også andre specielteng i forbindelse med request i AJAX.

I resten af denne post vil jeg tage udgangspunkt i at lave et request med prototypes AJAX objekt.

Men prototype, kan vi lave et AJAX-request på følgende måde:

Vi kan også definerer en eventhandler funktion til at hånterer requestet. Dette gøres med Prototype, ved at definerer funktionen, og tilføje denne til onSucess-propertien, således:

Problemet er nu, at hvis det respons vi modtager, indeholder Æ, Ø eller Å, vil disse tegn komme til at se rimelig underlige ud, hvis du bruger det dansk tegnsæt ISO-8859-1. Grunden til dette er, at request-metoden (som sendes som XML) som standard benytter UTF-8!

Løsningen kan findes ganske simpelt ved at sætte det korrekte charset i den action fil du benytter (some-file.php i ovenstående).

Jeg har kun prøvet dette af i PHP, men her kan det lade sig gøre, hvis du i starten af filen indsætter følgende:

Herefter kan du bruge Æ, Ø og Å lige så tosset du vil, og de vil blive vist om forventet gennem dit AJAX request.

Skal du bare sende en enkelt streng, kan du nøjes med at benytte PHPs UTF8 dekoder: string : utf8_decode(string). Du kan læse mere om korrekt brug af tegnsæt her.

Problemet ligger i Prototypes Ajax.Updater funktion, mere specifikt er det AJAX.Updater og Internet Explorers cache. Løsningen skulle vise sig at være noget så simpel.

Ajax.Updater

Ajax.Updater er en funktion i Prototypes framework, som hurtigt og nemt lader dig updaterer et valgt div-tag med en valgt fil, metodekaldet se ud som følgende:

new Ajax.Updater(myDivTag, /some_url,
{ method: get }
);

Funktionen er en forenkling af deres Ajax.Request funktion, i hvilket du ofte vil definerer ekstra funktion til at hånderer responset. Ajax.Updater gør det hele for dig, opretter et requets til filen (anden parameter) og placerer responset i dit div-tag (første parameter) – Det var i hvert fald meningen.

Internet Explorer super cache?!

Af en eller anden grund, som jeg ikke har undersøgt nærmere, lader IE 7.0 til at have en super cache. Jeg brugte Updater-funktionen til at hente en fil, som genererede en drop-down box ud fra et database kald. Når jeg opdaterede databasen (tilføjede til drop-down boxen) kunn IE ikke opfatte at der var foretaget ændringer? I hvertfald ikke når jeg bare kaldte filen uden parametre.

Ajax.Updater cache løsning

Løsningen er utrolig simpel. Du skal ganske simpelt tilføje en (ekstra) mere eller mindre tilfældig (i hvertfald ligegyldig) parameter til dit kald – vær dog sikker på at denne ikke skal bruges i dit kald.

Jeg havde en funktion der så ud som følgende:

function reloadFile(fileName, divID, pars) {
    new Ajax.Updater(divID, fileName,{
        method: get, parameters: pars

    });
}

Denne funktion kom til at se ud som følgende, og alt var nu godt i IE:

function reloadFile(fileName, divID, pars) {
    pars = pars+&cacheFix=+Math.random();
    new Ajax.Updater(divID, fileName, {
        method: get, parameters: pars
    });
}

Ved at bruge Math.random() er du mere eller mindre sikker på at dit fil-kald er forskelligt fra gang til gang – hvilket åbenbart er hvad der skal til, før IE fatter AJAX?! Meget simpelt, men en fantastik lettelse for mig, da jeg fandt ud af det =;)

Du har måske lagt mærke til at der har være lidt stille her den seneste tid, hvilket langt hen af vejen grunder i arbejde med at få de mange idéer implementeret. Til sidst var jeg knap nok inde og se på mit gamle site, da jeg allerede så på det med gamle øjne. Det resulterede i et væld af spam (Tjaa, fik aldrig rigtigt mit spam-filter til at virke ordentligt), og jeg endte med at fjerne muligheden for at kommentere.

Nu er der nye tider på vej – jeg har lavet en hel del ændringer, og her kommer så en kort introduktion til det nye site.

Design

Design er selvfølgelig noget af det mest bemærkelsesværdige. Jeg har beholdt de grønne grundfarver, mest af alt fordi jeg er vild med grøn, men jeg synes heller ikke man ser så mange grønne sites omkring på nettet, hvilket man skulle mene ville være med til at gøre mit site lidt mere specielt =;). Jeg startede med at beholde de grønne farver, er stadig glad for grønt, men på et tidspunkt blev det dog for meget, hvilket jeg nu har prøvet at gøre noget ved. Designet er table-less og benytter sig i særdeleshed af CSS, hvilket gør det meget nemt at skifte ud =;).

Alt skal jo være transparent and lass-like idag, og jeg falder lige i den fælde. Til at starte med, brugete jeg faktisk et filter i CSS som gjorde det meste af sitet gennemsigtigt, men det tog samtigt en helvedes masse CPU-kraft, så jeg lavede det om til statiske billeder – men det blev da heller ikke så ringe endda?!

Layout

Jeg har længe ville af med det klassiske blog-layout, med en banner, sidebar, og en liste poster. Og lige så længe har ikke været i tvivl om at jeg ville over til et 3-spaltet layout – og indholdet passer jo meget godt. Navigation og feed til venstre i en farve der er til at se, nyeste blog-post i midten, og andre nyheder, links og meta til højre i en mindre prangende farve.
Derudover har jeg fået min Flickr-feed op i toppen af sitet, denne var næsten gemt helt væk i sidste design.

Navigation

Jeg har igen været ved at se på rewrite-links, hvilket problematikken bl.a. gik på i sidste post, og er kommet frem til følgende regler:

• Side: www.simon-jensen.net/side-navn-her/
• Kategori: www.simon-jensen.net/category/categori-navn-her/
• Tags: www.simon-jensen.net/tags/tag-navn-her/
• Poster: www.simon-jensen.net/post-title-her.html

Reglerne ligger tæt op af de gamle, og med 301-redirects på plads, skulle evt. links og bookmarks fra det gamle design blive guided til deres rigtige destination på det nye – tak til Marcel.

Funktionalitet

Jeg har selvfølgelig ikke kunne lade være med at lege bare en lille smule med AJAX, hvilket I f.eks. vil se, når I poster en kommentar, men langt størstedelen er det kun mig der får at se, da denne hører til administrationen. Hvorfor det? For jeres skyld – selvom jeg benytter Prototype frameworket, vil jeg være sikker på at alle kan læse hvad jeg skriver.

Derudover kan jeg nævne at jeg denne gang, har anvendt en objekt orienteret indgangsvikel til database håndtering, hvilket jeg tror jeg vil gøre fremover – fantastiskt nemt, og 1000 tak til skal lyde til Sébastien Laoût for at lave klassen.

Den største nyhed, i mit hovede, er det nye spamfilter. Denne gang er jeg gået hele vejen, og implementeret Akismet Antispam, som også bliver brugt i WordPress. Glæder mig vildt meget til at se om det virker som forventet!

Endelgt er FCK editoren (den jeg skriver poster, og I kommenterer med) også blevet opdateret – og den er kun blevet bedere, Shift-Enter virker nu som en drøm!

Andet

Der er stadig en del til min backend, der ikke er på plads, hvilket I i-og-for-sig kan være ligeglade med. Muligheden for at skrive/rette og slette både poster og kommentarer er på plads, så vi skulle kunne kommunikerer, hvilket er det vigtigste … jeg kunne bare ikke vente længere.

Min reference-side er også lavet helt om – Eller er i hvert fald igang med det. Den var efterhånden temmelig outdated. I stedet for at skrive om de projekter jeg har være en del af, vil denne side i fremtiden komme til at fungerer som en reel reference-side til de folk jeg har arbejdet sammen med, og hvilke kvalifikationer de har givet til mine projekter.

Når tiden kommer til mig, skal jeg også have implementeret en søgefunktion, og måske et arkiv med alle bloggens poster – I mellemtiden må I nøjes med kategorierne og tagclouden herunder. Indtil da – velkommen til det nye simon-jensen.net!