[Opgelost] Jquery probleem
Ik heb 3 mappen:
content [hier staat de files in die de .js moet laden]
css [lijkt me duidelijk]
en de js map, hierin staat de js file
Verder staat er in de root nog een index.php
De html:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!doctype html>
<html>
<head>
<title>AJAX</title>
<link rel="stylesheet" href="css/main.css" />
</head>
<body>
<ul id="navBar">
<li><a href="index">Home</a></li>
<li><a href="about">About us</a></li>
<li><a href="contact">Content</a></li>
</ul>
<div id="content"></div>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="js/general.js"></script>
</body>
</html>
<html>
<head>
<title>AJAX</title>
<link rel="stylesheet" href="css/main.css" />
</head>
<body>
<ul id="navBar">
<li><a href="index">Home</a></li>
<li><a href="about">About us</a></li>
<li><a href="contact">Content</a></li>
</ul>
<div id="content"></div>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="js/general.js"></script>
</body>
</html>
De Jquery:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
$(document).ready(function(){
// initial
$('#content').load('content/index.php');
// handle menu clicks
$('ul#navBar li').click(function(){
var page = $(this).atrr('href');
$('#content').load('content/ '+ page +'.php');
return false;s
});
});
// initial
$('#content').load('content/index.php');
// handle menu clicks
$('ul#navBar li').click(function(){
var page = $(this).atrr('href');
$('#content').load('content/ '+ page +'.php');
return false;s
});
});
Dit laad hij dus het lijkt mij dat je die paginas wel moet aanmaken.
Probeer hierin eens de spatie weg te halen na "content/" dus:
load('content/'+ page +'.php');
Erwin H op 18/03/2012 20:54:50:
load('content/ '+ page +'.php');
Probeer hierin eens de spatie weg te halen na "content/" dus:
load('content/'+ page +'.php');
Probeer hierin eens de spatie weg te halen na "content/" dus:
load('content/'+ page +'.php');
Het heeft niets geholpen :(
Toevoeging op 18/03/2012 20:58:18:
Gerhard l op 18/03/2012 20:52:24:
content/ '+ page +'.php
Dit laad hij dus het lijkt mij dat je die paginas wel moet aanmaken.
Dit laad hij dus het lijkt mij dat je die paginas wel moet aanmaken.
Ik heb al de pagina's:
Index.php
about.php
en contact.php
Die staan in content
$('ul#navBar li').click(function(){
in dit:
$('ul#navBar li a').click(function(){
Erwin H op 18/03/2012 21:05:34:
Dan dit:
$('ul#navBar li').click(function(){
in dit:
$('ul#navBar li a').click(function(){
$('ul#navBar li').click(function(){
in dit:
$('ul#navBar li a').click(function(){
Geeft ook totaal geen effect!
Gewijzigd op 18/03/2012 21:35:38 door Reshad F
maak van je code eens dit ( zie ik heb de console.log erin gezet )
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
$(document).ready(function(){
// initial
$('#content').load('content/index.php');
// handle menu clicks
$('ul#navBar li').click(function(){
var page = $(this).atrr('href');
$('#content').load('content/ '+ page +'.php');
console.log();
return false;s
});
});
// initial
$('#content').load('content/index.php');
// handle menu clicks
$('ul#navBar li').click(function(){
var page = $(this).atrr('href');
$('#content').load('content/ '+ page +'.php');
console.log();
return false;s
});
});
zie je code ( return false;s ) wat doet die s daar?
Gewijzigd op 18/03/2012 21:51:30 door Reshad F
Reshadd farid op 18/03/2012 21:50:38:
console.log zorgt ervoor dat je kan uitlezen wat er gebeurt als er een stukje JS/Jquery in werking gaat. als je deze tussen je code zet kan je de foutmelding/werking zien. heel handig als je de fout even niet weet.
maak van je code eens dit ( zie ik heb de console.log erin gezet )
zie je code ( return false;s ) wat doet die s daar?
maak van je code eens dit ( zie ik heb de console.log erin gezet )
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
$(document).ready(function(){
// initial
$('#content').load('content/index.php');
// handle menu clicks
$('ul#navBar li').click(function(){
var page = $(this).atrr('href');
$('#content').load('content/ '+ page +'.php');
console.log();
return false;s
});
});
// initial
$('#content').load('content/index.php');
// handle menu clicks
$('ul#navBar li').click(function(){
var page = $(this).atrr('href');
$('#content').load('content/ '+ page +'.php');
console.log();
return false;s
});
});
zie je code ( return false;s ) wat doet die s daar?
Die s heb ik verwijderd, dat was een typ fout, het heeft geen invloed gehad op de werking van het script. Console.log toont geen fouten.
Hij pakt overigens wel de index pagina uit het mapje "content", de overige pagina's doet hij niets mee. Dan krijg ik dit te zien:
Object niet gevonden!
De gevraagde URL was niet gevonden op deze server. De link op deze pagina pagina is verkeerd of achterhaald. Gelieve de auteur van die pagina in te lichten over deze fout.
Indien u van oordeel bent dat deze server in fout is, gelieve de webmaster te contacteren.
Error 404
localhost
18-3-2012 21:58:55
Apache/2.2.14 (Win32) DAV/2 mod_ssl/2.2.14 OpenSSL/0.9.8l mod_autoindex_color PHP/5.3.1 mod_apreq2-20090110/2.7.1 mod_perl/2.0.4 Perl/v5.10.1
En de link is: http://localhost/Portfolio%20-%20new/New%20Test%20version%20-%20css/oefentests/AJAX/about. Wanneer ik hier "http://localhost/Portfolio%20-%20new/New%20Test%20version%20-%20css/oefentests/AJAX/content/about.php" van maak, laad de pagina wel, maar niet zoals hij zou moeten laden.
Deze waardes worden gelogd in de console, deze open je zo:
Chrome en Opera, Ctrl + Shift + J en dan het kopje console
FireFox, Ctrl + Shift + K
IE, F12 en dan het kopje console
@Reshadd, je moet natuurlijk wel een waarde meegeven aan de console.log! Of je kan console.count gebruiken om te kijken hoevaak en of hij wordt aangeroepen. Voorbeelden:
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
var hello = 'hello';
console.log(hello); // string 'hello'
console.log('foobar'); // string 'foobar'
console.count(); // 1
for( i=0; i < 100; i++ )
{
console.count(); // 1 - 100
}
console.log(hello); // string 'hello'
console.log('foobar'); // string 'foobar'
console.count(); // 1
for( i=0; i < 100; i++ )
{
console.count(); // 1 - 100
}
Gewijzigd op 18/03/2012 21:59:12 door Wouter J
f.support.ajax.f.ajaxTransport.sendjquery.min.js:4
f.extend.ajaxjquery.min.js:4
f.fn.extend.loadjquery.min.js:4
(anonymous function)
de html die ik even in elkaar geflanst heb
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!doctype html>
<html>
<head>
<title>AJAX</title>
</head>
<body>
<ul id="navBar">
<li><a href="index">Home</a></li>
<li><a href="about">About us</a></li>
<li><a href="contact">Content</a></li>
</ul>
<div id="content"></div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script>
// initial
$('#content').load('content/index.html');
// handle menu clicks
$('ul#navBar li').click(function(){
var page = $(this).atrr('href');
$('#content').load('content/ '+ page +'.html');
console.log();
return false;
});
</script>
</body>
</html>
<html>
<head>
<title>AJAX</title>
</head>
<body>
<ul id="navBar">
<li><a href="index">Home</a></li>
<li><a href="about">About us</a></li>
<li><a href="contact">Content</a></li>
</ul>
<div id="content"></div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script>
// initial
$('#content').load('content/index.html');
// handle menu clicks
$('ul#navBar li').click(function(){
var page = $(this).atrr('href');
$('#content').load('content/ '+ page +'.html');
console.log();
return false;
});
</script>
</body>
</html>
edit: een paar fouten konden weg want ik had de document.ready er nog in zitten. excuus alles is nu goed.
Gewijzigd op 18/03/2012 22:02:18 door Reshad F
1) Die fouten krijg je ook zonder de console.log functie, deze functie is er voor gemaakt om dingen te loggen naar de console (precies zoals met var_dump in PHP)
2) Je hebt op je localhost niet de bestanden staan die je inlaad met AJAX, vandaar dat jij errors krijgt.
en
welke AJAX? ik heb toch hetzelfde als wat hij heeft gebruikt?
edit: oh ik zie het al wouter mijn excuses alweer ik heb niet alles ingeladen inderdaad.
Gewijzigd op 18/03/2012 22:07:50 door Reshad F
@Youri, de fout is dat je .atrr gebruikt waar het .attr moet zijn.
Tevens bevat de li niet een href attribuut, maar zijn child (a element). Je zou dus dit moeten gebruiken:
Code (php)
1
var page = $(this).children('a').attr('href');
Gewijzigd op 18/03/2012 22:19:38 door Wouter J
http://www.youtube.com/watch?v=ytKc0QsVRY4
Toevoeging op 18/03/2012 22:22:07:
Wouter J op 18/03/2012 22:14:20:
@Reshadd, nee. Wat zou hij dan moeten pakken? De functie zelf heb je namelijk niks aan...
@Youri, de fout is dat je .atrr gebruikt waar het .attr moet zijn.
Tevens bevat de li niet een href attribuut, maar zijn child (a element). Je zou dus dit moeten gebruiken:
@Youri, de fout is dat je .atrr gebruikt waar het .attr moet zijn.
Tevens bevat de li niet een href attribuut, maar zijn child (a element). Je zou dus dit moeten gebruiken:
Code (php)
1
var page = $(this).children('a').attr('href');
Ik heb nu de regel: var page = $(this).children('a').attr('href'); toegevoegd. Nu werkt hij :D
En je begrijpt ook hoe de console.log functie werkt? (zodat je dit straks zelf kunt vinden)