Tijden veranderen
Garage maken met koop functie
Ik ga een cursus volgen want anders kom ik niet ver. Dus ik jeb nog niet zo heel veel kennis.
Hier een foto van ongeveer het eindidee
Het gene waar niet staat dat ik het al klaar heb zoek ik hulp. Eventueel een handige functie voor mij is als je op de bovenste menu klikt dat hij op dezelfde url blijft alleen de inhoud veranderd.
Om alles kort samen te vatten. Volgensmij is dit heel simpel. Eigenlijk steeds als je op een ander artikel klikt dan include hij een bestand in een speciale <div> en ook include die een tekst bestand (ook) in een speciale <div>.
Alvast bedankt,
Tim
Gewijzigd op 12/01/2016 16:25:34 door Tim Wolf
Wat meer uitleg zou zeker niet overbodig zijn.
Sorry
Edit:
Ik hoop hierbij genoeg info gegeven te hebben
Gewijzigd op 12/01/2016 16:23:34 door Tim Wolf
Gebruik het alleen als het nodig is, als de rest van de content niet herladen mag worden.
Denk bijvoorbeeld aan zoek-filters of winkelmandjes op websites.
- Ariën - op 12/01/2016 16:27:53:
Als je de inhoud wilt veranderen zonder refresh. Dan moet je kijken naar AJAX.
Gebruik het alleen als het nodig is, als de rest van de content niet herladen mag worden.
Denk bijvoorbeeld aan zoek-filters of winkelmandjes op websites.
Gebruik het alleen als het nodig is, als de rest van de content niet herladen mag worden.
Denk bijvoorbeeld aan zoek-filters of winkelmandjes op websites.
Ik heb een beetje rond gekeken. Ik vond dit maar waar zit de fout in? En kunt u dit oplossen:
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
<script type="text/javascript">
function refresh()
{
new Ajax.Updater('div-name', 'a.php', { method: 'get' });
return false;
}
</script>
<div id="div-name">Hoi</div>
<a href="javascript:refresh('div-name');">Ververs!</a>
function refresh()
{
new Ajax.Updater('div-name', 'a.php', { method: 'get' });
return false;
}
</script>
<div id="div-name">Hoi</div>
<a href="javascript:refresh('div-name');">Ververs!</a>
Gewijzigd op 12/01/2016 17:13:56 door Tim Wolf
Als je Chrome of Firefox heb druk je gewoon op F12 en dan zie je in de console waarschijnlijk errors
Gewijzigd op 12/01/2016 17:15:50 door Marthijn Buijs
Ik zag dit u een wijziging hebt ingevoerd. Eerst ga ik daar maar naar kijken.
Ik zie dit (Uncaught ReferenceError: Ajax is not defined) Staan. Betekent dat ik Ajax weg moet halen?
Ik weet echt (bijna) niets van Ajax af.
Gewijzigd op 12/01/2016 17:19:52 door Tim Wolf
Code (php)
1
2
3
4
5
2
3
4
5
function refresh(element)
{
new Ajax.Updater(element, 'a.php', { method: 'get' });
return false;
}
{
new Ajax.Updater(element, 'a.php', { method: 'get' });
return false;
}
Kijk nu heb ik een argument aan de functie toegevoed, dit zou moeten werken.
Anders zou je moeten kijken of je selector goed is.
Gewijzigd op 12/01/2016 17:19:01 door Marthijn Buijs
Script nu:
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
<!DOCTYPE html>
<body>
<script type="text/javascript">
function refresh(element)
{
new Ajax.Updater(element, 'a.php', { method: 'get' });
return false;
}
</script>
<div id="element">Hoi</div>
<a href="javascript:refresh('element');">Ververs!</a>
</body>
</html>
<body>
<script type="text/javascript">
function refresh(element)
{
new Ajax.Updater(element, 'a.php', { method: 'get' });
return false;
}
</script>
<div id="element">Hoi</div>
<a href="javascript:refresh('element');">Ververs!</a>
</body>
</html>
Of heb ik het verkeerd overgenomen?
Fout in de lijn 6
Fout in de linkGewijzigd op 12/01/2016 17:40:57 door Tim Wolf
Ikzelf ben meer fan van het jQuery-framework, die ook wijdere ondersteuning heeft.
En new Ajax.Updater() gaat dan ook niet werken.
Ik denk dat je beter naar jquery kan gaan kijken.
Die heeft een Load functie die precies doet wat jij wilt.
Code (php)
1
$( "#result" ).load( "ajax/test.html" );
Plaatst de inhoud van ajax/test.html in het element met het id result.
Gewijzigd op 12/01/2016 17:50:02 door Randy vsf
Dus geen error ofzo maar hij geeft niet a.php weer.
Gewijzigd op 16/01/2016 20:51:41 door - Ariën -
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
<script type="text/javascript">
function result() {
$( "#result" ).load( "a.php" );
}
</script>
<div id="result">Hoi</div>
<a href="javascript:result();">Ververs!</a>
function result() {
$( "#result" ).load( "a.php" );
}
</script>
<div id="result">Hoi</div>
<a href="javascript:result();">Ververs!</a>
Je zou in a.php de tijd (secondes) kunnen weergeven dan zie je meteen of er iets veranderd is.
Gewijzigd op 12/01/2016 18:59:50 door Marthijn Buijs
Misschien laad je jQuery wel niet in?
En vergeet je ook niet jQuery te initialiseren aan het begin met
Code (php)
1
2
3
2
3
$(document).ready(function () {
// code
});
// code
});
Tim Wolf op 12/01/2016 18:48:10:
Ik heb het geprobeerd maar als ik op de knop druk gebeurd er niets. Zie **knip**
Dus geen error ofzo maar hij geeft niet a.php weer.
Dus geen error ofzo maar hij geeft niet a.php weer.
Kijk anders eens op Codecademy.
Daar kun je gratis de basis leren van javascript/jquery.
Het werkt een stuk makkelijker als je weet wat je doet.
Gewijzigd op 16/01/2016 20:51:59 door - Ariën -
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
<script type="text/javascript">
function result() {
$( "#result" ).load( "a.php" );
}
</script>
<div id="result">Hoi</div>
<a href="javascript:result();">Ververs!</a>
function result() {
$( "#result" ).load( "a.php" );
}
</script>
<div id="result">Hoi</div>
<a href="javascript:result();">Ververs!</a>
+ dit script van Ariën:
Code (php)
1
2
3
2
3
$(document).ready(function () {
// code
});
// code
});
Ik heb dus dit:
Code (php)
1
2
3
4
5
6
2
3
4
5
6
<script type="text/javascript">
$(document).ready(function () {
$( "#result" ).load( "a.php" ); });
</script>
<div id="result">Hoi</div>
<a href="javascript:result;">Ververs!</a>
$(document).ready(function () {
$( "#result" ).load( "a.php" ); });
</script>
<div id="result">Hoi</div>
<a href="javascript:result;">Ververs!</a>
Ik ben blij dat hij het doet en bedankt allemaal! Maar nu laat hij hem direct als je de pagina opstart maar nu wil ik graag dat die <div> inhoud pas veranderd als ik op die link klik.
Edit:
Inderdaad Randy vsf. Moet ik maar nodig eens mee bezig.
Randy vsf op 12/01/2016 19:03:26:
Kijk anders eens op Codecademy.
Daar kun je gratis de basis leren van javascript/jquery.
Het werkt een stuk makkelijker als je weet wat je doet.
Tim Wolf op 12/01/2016 18:48:10:
Ik heb het geprobeerd maar als ik op de knop druk gebeurd er niets. Zie **knip**
Dus geen error ofzo maar hij geeft niet a.php weer.
Dus geen error ofzo maar hij geeft niet a.php weer.
Kijk anders eens op Codecademy.
Daar kun je gratis de basis leren van javascript/jquery.
Het werkt een stuk makkelijker als je weet wat je doet.
Inderdaad Randy vsf. Moet ik maar nodig eens mee bezig.
Gewijzigd op 16/01/2016 20:52:15 door - Ariën -
Die geef je het id van de link mee in de selector, en in de function block doe je dat stukje met load.
Gewijzigd op 12/01/2016 20:47:14 door Randy vsf
Gewijzigd op 13/01/2016 08:05:33 door Tim Wolf
Google eens naar 'ajax page navigation', zo vind ik bijv. dit: http://tutorialzine.com/2009/09/simple-ajax-website-jquery/.
Wel is het zo dat de URL verandert, maar de browser-refreshes zou je dan niet meer mogen hebben.
Gewijzigd op 13/01/2016 08:24:38 door - Ariën -
Tim Wolf op 13/01/2016 08:05:05:
Ik weet niet of ik het zo duidelijk had gezegd want ik wil graag een beetje in de richting komen van mijn 1ste vraag. Hoe ik meerdere links kan hebben waardoor de div inhoud veranderd omdat hij iets anders include zonder de (complete) pagina te verversen. Dus eigenlijk de case optie waarmee je bijv. dit als url krijgt: ?id=1 Dit kan wel maar alleen ik wil graag dat de url op dezelfde pagina blijft dus niet: http://hallo.nl/leuk.php?id=1 maar dat hij op dezelfde pagina blijft: http://hallo.nl/leuk.php. Hoe kan ik dit het beste doen? Dus was eigenlijk mijn begin vraag maar dit script is wel handig voor updates. Nog bedankt!
Met de tips die we je gegeven hebben zou je dit al moeten kunnen maken.
Je hebt nu al code om voor 1 div te inhoud te wijzigen als er een bepaalde link wordt geklikt. Dit zou je heel makkelijk kunnen vertalen naar wat jij wilt.
U hoort nog van mij!
Dank jullie allen!
Tim