Scripts
Ajax pagina's bookmarken
Wanneer je een ajax request uitvoert, kom je, over het algemeen, op een pagina terecht die je niet zomaar kan bookmarken. met dit script toon ik hoe je variabelen kan meegeven die enkel bestemd zijn voor javascript. Die worden in de url na de # gezet. Deze string wordt niet meegestuurd naar de server. Het veranderen van die string in de adresbalk zorgt er ook niet voor dat de pagina wordt ververst. met die variabelen kan je dan ajax requests uitvoeren. Voor het gemak gebruik ik strings zoals we ze gewoon zijn in de urlbalk, bv. index.php?pagina=profiel#action=get_profiel&lid=5 ( Merk op, enkel met &, niet met ? bij de eerste var). Op deze manier kan je dus een url opslaan/bookmarken/doormailen/... en krijg je telkens weer de zelfde pagina terug. Merk ook op dat de links als visited komen te staan, wanneer je er op klikt (voor zover je dat effect in css niet uitschakelt) Dit is slechts het uiterste minimum. Voel je vrij om dit uit te breiden. Denk je iets interessants te kunnen toevoegen, contacteer me gerust. Ik hoop dat de voorbeelden alles duidelijk maken. Edit : Ondertussen is de functie veranderd. Het script reageert nu ook op op de back- en forward knop (misschien werkt dit laatste niet in IE).
ajax-paginas-bookmarken
navigatie.js
[code]
//////////////////////////////////////////////////////
//navigatie.js - copyleft Emmanuel Delay 2009 - [email protected]
//
// Thanks to:
// * Fixing the Back Button and Enabling Bookmarking for AJAX Apps http://www.contentwithstyle.co.uk/content/fixing-the-back-button-and-enabling-bookmarking-for-ajax-apps
// * timer.js: http://www.codingforums.com/archive/index.php/t-10531.html
//
// gebruik:
// * zorg dat je navigatie.js en timer.js op hebt en laadt.
// * maak het navigatie object aan (bv. var m_navig). Je geeft een callback mee met de constructor. Dat is de functie waarmee je je ajax request regelt. In die functie kan je m_navig.vars aanspreken.
// * Maak het object actief, bv. met <body onload="m_navig.init()">
// * that's it.
//
// voorbeeld van gebruik:
// index.php
/*
<html>
<head>
<script src="timer.js" language="javascript" type="text/javascript"></script>
<script src="ajax.js" language="javascript" type="text/javascript"></script>
<script src="navigatie.js" language="javascript" type="text/javascript"></script>
<script language="javascript">
var m_navig = new navigatie(ajaxActie);
function ajaxActie()
{
action = m_navig.getVarValue('action');
switch(action)
{
case 'get_profiel':
var lid = m_navig.getVarValue('lid');
if ( lid != false )
get_profiel( Number(lid) );
break;
}
}
function get_profiel(lid)
{
// hier zou je dus een ajax request aanroepen
// van daar ook ajax.js. Dit hoor je zelf te regelen
// om toch maar iets te tonen ...
document.getElementById("profiel").innerHTML = 'Hier zou dus het profiel van '+ lid +' komen';
}
</script>
<title>Voorbeeld van Ajax navigatie</title>
</head>
<body onload="m_navig.init()">
<div>
<a href="#action=get_profiel&lid=5" onClick="get_profiel(5);" >Profiel van Mevr. 5 </a>
</div>
<div>
<a href="#action=get_profiel&lid=8" onClick="get_profiel(8);" >Profiel van Mr. 8 </a>
</div>
<div id="profiel"></div>
</body>
</html>
*/
///////////////////////////////////////////////////////////
// constructor
function navigatie(actieCallBack)
{
this.timerInterval = 200;
this.actieCallBack = actieCallBack;
this.idle = true;
this.vars = null;
this.timer = new Timer(this);
}
// voer deze methode uit bv. bij body="onload"
navigatie.prototype.init = function ()
{
this.idle = false;
this.urlVeranderd(0);
}
navigatie.prototype.go = function ()
{
if (this.idle == true)
this.init();
var url = this.getUrl();
this.vars = this.getVars(url);
this.actieCallBack();
}
navigatie.prototype.getVarValue = function (key)
{
for (var i=0; i< this.vars.length; i++)
{
if (this.vars[i][0] == key)
return this.vars[i][1];
}
return false;
}
navigatie.prototype.getUrl = function ()
{
var url = String(window.location);
return this.getHash(url);
}
navigatie.prototype.getVars = function (url)
{
var a = url.split("&");
var result = Array();
for (var i=0; i< a.length; i++)
{
var b = a[i].split("=");
if ( b[1] == null)
break;
result[i] = b;
}
return result;
}
navigatie.prototype.getHash = function(url)
{
var temp = new Array();
temp = url.split("#");
if (temp.length > 1)
return temp[1];
else
return '';
}
navigatie.prototype.urlVeranderd = function(location)
{
// om de zoveel tijd peil je of de url veranderd is.
if( this.getUrl() != location)
{
this.go();
}
this.timer.setTimeout("urlVeranderd", this.timerInterval, this.getUrl() );
}
///////////
// timer.js (niet van mijn hand, zeer handig)
/*
Timer by Algorithm
http://www.codingforums.com/archive/index.php/t-10531.html
*/
function Timer(){
this.obj = (arguments.length)?arguments[0]:window;
return this;
}
// The set functions should be called with:
// - The name of the object method (as a string) (required)
// - The millisecond delay (required)
// - Any number of extra arguments, which will all be
// passed to the method when it is evaluated.
Timer.prototype.setInterval = function(func, msec){
var i = Timer.getNew();
var t = Timer.buildCall(this.obj, i, arguments);
Timer.set[i].timer = window.setInterval(t,msec);
return i;
}
Timer.prototype.setTimeout = function(func, msec){
var i = Timer.getNew();
Timer.buildCall(this.obj, i, arguments);
Timer.set[i].timer = window.setTimeout("Timer.callOnce("+i+");",msec);
return i;
}
// The clear functions should be called with
// the return value from the equivalent set function.
Timer.prototype.clearInterval = function(i){
if(!Timer.set[i]) return;
window.clearInterval(Timer.set[i].timer);
Timer.set[i] = null;
}
Timer.prototype.clearTimeout = function(i){
if(!Timer.set[i]) return;
window.clearTimeout(Timer.set[i].timer);
Timer.set[i] = null;
}
// Private data
Timer.set = new Array();
Timer.buildCall = function(obj, i, args){
var t = "";
Timer.set[i] = new Array();
if(obj != window){
Timer.set[i].obj = obj;
t = "Timer.set["+i+"].obj.";
}
t += args[0]+"(";
if(args.length > 2){
Timer.set[i][0] = args[2];
t += "Timer.set["+i+"][0]";
for(var j=1; (j+2)<args.length; j++){
Timer.set[i][j] = args[j+2];
t += ", Timer.set["+i+"]["+j+"]";
}
}
t += ");";
Timer.set[i].call = t;
return t;
}
Timer.callOnce = function(i){
if(!Timer.set[i]) return;
eval(Timer.set[i].call);
Timer.set[i] = null;
}
Timer.getNew = function(){
var i = 0;
while(Timer.set[i]) i++;
return i;
}
[/code]
Reacties
0