jQuery routing
Ik ben bezig met een website maar moet hiervoor veel pagina's maken en de routing hiervan moet gemaakt worden en hierbij kan ik geen php gebruiken omdat de schoolserver dit niet ondersteunt. Nu is mijn vraag kan ik iets soortgelijks met jQuery (AJAX) doen?
een lijst ( array ) met alle links erin en dan een loopje waarbij elk element in de array omgezet wordt in een werkend ajax link zodat ik daarmee de juiste content tevoorschijn tover? ( if its possible heeft iemand dan een voorbeeldje o.i.d? of een kleine opzet ) mijn Javascript kennis is niet zo uitgebreid dat ik zelf iets kan maken wat erop lijkt :) of althans om ermee te starten..
Een JSON file met de routing maken. Deze laad je in met een AJAX script (in jQuery bij type JSON opgeven, zodat alle data al mooi in een array wordt geplaatst). Vervolgens kun je die array gewoon af gaan en krijg je zo telkens alle linkjes.
Code (php)
1
var links = [home, webshop, diensten, nieuws, horloges, brillen, gps, pennen];
en dan deze vervolgens uit te lezen in een loopje en elke waarde als een link te gebruiken. En wanneer een van deze links geklikt is deze te laden d.m.v. Ajax
edit: dit is wat ik tot nu toe heb bedacht...
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
<script type="text/javascript">
$(document).ready(function() {
// put all your jQuery goodness in here.
var links = ['home', 'webshop', 'diensten', 'nieuws', 'horloges', 'brillen', 'gps', 'pennen'];
for(i=0; i<links.length; i++) {
document.write(links[i] + '<br>');
console.log('#' + links[i]);
}
});
</script>
$(document).ready(function() {
// put all your jQuery goodness in here.
var links = ['home', 'webshop', 'diensten', 'nieuws', 'horloges', 'brillen', 'gps', 'pennen'];
for(i=0; i<links.length; i++) {
document.write(links[i] + '<br>');
console.log('#' + links[i]);
}
});
</script>
uiteraard moet het loopje iets anders nog en moet AJAX erin verwerkt maar dat moet ik nog uitzoeken :)
Gewijzigd op 01/11/2012 22:29:00 door Reshad F
JSON is gewoon het opbouwen van een array zoals je in JavaScript doet, maar dan als bestand, bijv:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
routing.json
============
{
"home": {
"pattern": "/home",
"target": "home.html"
},
"webshop": {
"pattern": "/webshop",
"target": "webshop.html"
},
"..."
}
============
{
"home": {
"pattern": "/home",
"target": "home.html"
},
"webshop": {
"pattern": "/webshop",
"target": "webshop.html"
},
"..."
}
Vervolgens kun je deze inladen met AJAX, jQuery heeft speciale methoden voor JSON AJAX requests.
dus het is simple as that? gewoon inladen en klaar? en natuurlijk de links verwijzen als volgt:
<a href="/home" .....> Home </a>
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
jQuery.doeEenJSONAjaxRequest(..., function(data) {
var nav = $('#nav ul');
jQuery.each(data, function(route) {
nav.append('<li><a href="' + route.deRoute + '">' + route.deNaam + '</a></li>');
});
});
var nav = $('#nav ul');
jQuery.each(data, function(route) {
nav.append('<li><a href="' + route.deRoute + '">' + route.deNaam + '</a></li>');
});
});
En om te kijken of het de huidige url is zou ik werken met hashtags in urls. Het wordt dan dus domein.nl/#/home en domein.nl/#/webshop.
Code (php)
1
2
3
2
3
jQuery.each(data, function(route) {
nav.append('<li><a href="' + route.deRoute + '">' + route.deNaam + '</a></li>');
});
nav.append('<li><a href="' + route.deRoute + '">' + route.deNaam + '</a></li>');
});
is dit gewoon een vervanging van mijn navigatie nu? ( stel dat ik andere links heb ) moet daar dan helemaal aparte code voor geschreven worden?
Dat stukje code doet precies wat het zegt, voor elke (each) data (dus route) voegen we een list item met daarin een anchor naar de route toe aan de navigatie (append). Merk wel op dat mijn code het global verteld, je moet zelf kijken hoe je deNaam en deRoute kunt krijgen, hoe je hashtags erin verwerkt (1 tip: window.location.hash) en wat die JSON Ajax functie is.
mijn code tot nu toe
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<script type="text/javascript">
$(document).ready(function() {
//wacht op laden pagina
$.ajax({
url: 'routing.json',
async: false,
dataType: 'json',
success: function (response) {
// do stuff with response.
var nav = $('.nav_menu ul');
$.each(response, function(route) {
nav.append('<li><a href="index.html/#/' + route + '">' + route + '</a></li>');
console.log(route);
});
}
});
});
</script>
$(document).ready(function() {
//wacht op laden pagina
$.ajax({
url: 'routing.json',
async: false,
dataType: 'json',
success: function (response) {
// do stuff with response.
var nav = $('.nav_menu ul');
$.each(response, function(route) {
nav.append('<li><a href="index.html/#/' + route + '">' + route + '</a></li>');
console.log(route);
});
}
});
});
</script>
Gewijzigd op 01/11/2012 23:26:33 door Reshad F
Code (php)
1
2
3
4
5
6
2
3
4
5
6
{
"home": {
"path": "/home",
"target": "home.html"
}
}
"home": {
"path": "/home",
"target": "home.html"
}
}
Dan is Route dit:
Code (php)
1
2
3
4
2
3
4
Array(
'path' : '/home',
'target': 'home.html'
)
'path' : '/home',
'target': 'home.html'
)
Je zult die items moeten pakken en die op de juiste plek plaatsen. De naam van een route is de index, kijk eens in de documentatie voor jQuery.each (let op! jQuery.each niet .each) hoe je de index kan krijgen.
ik vond dit voorbeeldje maar wanneer ik dit toepas krijg ik niet het gewenste resultaat..
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
var map = {
'flammable': 'inflammable',
'duh': 'no duh'
};
$.each(map, function(key, value) {
alert(key + ': ' + value);
});
'flammable': 'inflammable',
'duh': 'no duh'
};
$.each(map, function(key, value) {
alert(key + ': ' + value);
});