Javascript probleem
dit is de code:
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
29
30
31
32
33
34
35
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
29
30
31
32
33
34
35
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
function get() {
$('#age').hide();
$('#age').delay(200);
$.post('data.php', { name: form.name.value },
function(output) {
$('#age').html(output);
$('#age').slideToggle(600);
$('#age').delay(1500);
$('#age').slideToggle(600);
});
}
</script>
</head>
<body>
<div style="display:none;border:1px solid #DCDCDC; width: 500px; height: 40px; text-align: center; line-height: 40px; background-color: #7BF260;" id="age">
</div>
<form name="form" style=",margin: 15px 0px 0px 0px;">
<input type="text" name="name"><input type="button" value="Get" onClick="get();">
</form>
</body>
</html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
function get() {
$('#age').hide();
$('#age').delay(200);
$.post('data.php', { name: form.name.value },
function(output) {
$('#age').html(output);
$('#age').slideToggle(600);
$('#age').delay(1500);
$('#age').slideToggle(600);
});
}
</script>
</head>
<body>
<div style="display:none;border:1px solid #DCDCDC; width: 500px; height: 40px; text-align: center; line-height: 40px; background-color: #7BF260;" id="age">
</div>
<form name="form" style=",margin: 15px 0px 0px 0px;">
<input type="text" name="name"><input type="button" value="Get" onClick="get();">
</form>
</body>
</html>
Weet iemand misschien waar het aan ligt?
Het bestand waar het uiteindelijk voor bedoeld is included wel als allereerst een php document met allerlei php functies en daarna pas het header document..? ligt daar soms het probleem?
Gewijzigd op 24/12/2011 18:30:33 door Marc -
En regel 9 + 10 en 12 - 16 zijn verkeerd JS. Hier zoek je namelijk per regel opnieuw de hele DOM door tot je #age vind en vervolgens herhaal je dit de volgende regel weer. Dit kost veel tijd beter is het om dit te doen:
Code (php)
1
2
3
4
5
6
2
3
4
5
6
var age = $('#age');
age.hide().delay(200);
// jQuery post functie
function() {
age.html(output).slideToggle(600).delay(500).slideToggle(600);
}
age.hide().delay(200);
// jQuery post functie
function() {
age.html(output).slideToggle(600).delay(500).slideToggle(600);
}
Verder kun je beter niet met onclick attributes werken in HTML, maar gewoon jQuery events gebruiken. Ook een jQuery(document).ready() functie is wel handig als je je scripts in de head zet, is hier niet nodig maar wel goed om het gewoon standaard te gebruiken.
Inline CSS moet je ook wegdoen en gewoon met CSS werken in een aparte stylesheet, of met interne CSS.
Die , voor margin op regel 25 lijkt me niet de bedoeling?
Selecteren in JS via names is ouderwets en kun je beter niet meer gebruiken. Geef het input veld een id mee en gebruik die om het te selecteren.
Zet op zijn minst <!doctype html> op regel 1 van je script, anders kunnen er wel wat JS foutjes komen.
Wat krijg je als je van de post functie een jQuery.ajax() functie van maakt en vervolgens ook een error functie bij maakt?
Of wat krijg je als je je console opent in het browser?
Gewijzigd op 24/12/2011 18:46:08 door Wouter J
"Die , voor margin op regel 25 lijkt me niet de bedoeling?" huh?
Gewijzigd op 24/12/2011 18:59:18 door Marc -
en als ik dan de bron van het goede bestand met de include's bekijk zie ik dus dit:
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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="./css/algemeen.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="./javascript/photo_slider.js"></script>
<script type="text/javascript" src="javascript/jquery.js"></script>
<script type="text/javascript" src="javascript/effects.js"></script>
<script type="text/javascript" src="javascript/redirect.js"></script>
<script type="text/javascript" src="javascript/functions.js"></script>
</head>
<body>
<div id="maincontainter">
<div id="header">
<a href="#"><img id="logo" src="image.png" alt="alt" height="160" width="140"></a>
<h1><span style="color:#B81A6F"></span>kopje</h1>
</div>
<div id="nav">
<nav>
<li><a href="index.php">HOME</a></li>
<li><a href="about.php">ABOUT</a></li>
<li><a href="music.php">MUSIC</a></li>
<li><a href="photos.php">PHOTO'S</a></li>
<li><a href="videos.php">VIDEO'S</a></li>
<li><a href="contact.php">CONTACT</a></li>
</nav>
</div>
<div id="slide_photos">
<div class="main_view">
<div class="window">
<div class="image_reel">
<img class="img_slider" src="./images/1.png" alt="">
<img class="img_slider" src="./images/2.png" alt="">
<a href="#"><img class="img_slider" src="" alt=""></a>
</div>
</div>
<div class="paging">
<span class="bullets_slider" rel="1">•</span>
<span class="bullets_slider" rel="2">•</span>
<span class="bullets_slider" rel="3">•</span>
</div>
</div>
</div>
<div style="clear:both;" id="content">
<div id="right_onder">
<p>
<form action="logout.php" method="post"><input class="logout_button" type="submit" name="submit" value="log out">
<h4> facebook</h4>
<iframe src=""></iframe>
<br><br>
<h4>YouTube</h4>
<iframe width="100%" height="200" src="http://www.youtube.com/" frameborder="0" allowfullscreen></iframe>
</p>
</div>
<div id="left">
<h3>h3</h3>
<p>
<div style="display:none;border:1px solid #DCDCDC; width: 500px; height: 40px; text-align: center; line-height: 40px; background-color: #7BF260;" id="result">
</div>
<br>
<p style="font-size:16px;font-weight:bold;">
<form class='add'>
name:<br>
<input class="input_forms" type="text" name="title" size='35'><br><br>
<textarea class="inputarea" name="" cols="65" rows="3"></textarea>
<br>
<input class="" type="button" value='add music' onClick="get();">
</form>
</p>
</p>
<div style="display:none;border:1px solid #DCDCDC; width: 500px; height: 40px; text-align: center; line-height: 40px; background-color: #7BF260;" id="age">
</div>
</div> <!-- end of left -->
</div> <!-- end of content -->
<div id="footer">
<p>
<p>
</div> <!-- end of footer -->
</div> <!-- end of maincontainer -->
</body>
</html>
<html>
<head>
<title>title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="./css/algemeen.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="./javascript/photo_slider.js"></script>
<script type="text/javascript" src="javascript/jquery.js"></script>
<script type="text/javascript" src="javascript/effects.js"></script>
<script type="text/javascript" src="javascript/redirect.js"></script>
<script type="text/javascript" src="javascript/functions.js"></script>
</head>
<body>
<div id="maincontainter">
<div id="header">
<a href="#"><img id="logo" src="image.png" alt="alt" height="160" width="140"></a>
<h1><span style="color:#B81A6F"></span>kopje</h1>
</div>
<div id="nav">
<nav>
<li><a href="index.php">HOME</a></li>
<li><a href="about.php">ABOUT</a></li>
<li><a href="music.php">MUSIC</a></li>
<li><a href="photos.php">PHOTO'S</a></li>
<li><a href="videos.php">VIDEO'S</a></li>
<li><a href="contact.php">CONTACT</a></li>
</nav>
</div>
<div id="slide_photos">
<div class="main_view">
<div class="window">
<div class="image_reel">
<img class="img_slider" src="./images/1.png" alt="">
<img class="img_slider" src="./images/2.png" alt="">
<a href="#"><img class="img_slider" src="" alt=""></a>
</div>
</div>
<div class="paging">
<span class="bullets_slider" rel="1">•</span>
<span class="bullets_slider" rel="2">•</span>
<span class="bullets_slider" rel="3">•</span>
</div>
</div>
</div>
<div style="clear:both;" id="content">
<div id="right_onder">
<p>
<form action="logout.php" method="post"><input class="logout_button" type="submit" name="submit" value="log out">
<h4> facebook</h4>
<iframe src=""></iframe>
<br><br>
<h4>YouTube</h4>
<iframe width="100%" height="200" src="http://www.youtube.com/" frameborder="0" allowfullscreen></iframe>
</p>
</div>
<div id="left">
<h3>h3</h3>
<p>
<div style="display:none;border:1px solid #DCDCDC; width: 500px; height: 40px; text-align: center; line-height: 40px; background-color: #7BF260;" id="result">
</div>
<br>
<p style="font-size:16px;font-weight:bold;">
<form class='add'>
name:<br>
<input class="input_forms" type="text" name="title" size='35'><br><br>
<textarea class="inputarea" name="" cols="65" rows="3"></textarea>
<br>
<input class="" type="button" value='add music' onClick="get();">
</form>
</p>
</p>
<div style="display:none;border:1px solid #DCDCDC; width: 500px; height: 40px; text-align: center; line-height: 40px; background-color: #7BF260;" id="age">
</div>
</div> <!-- end of left -->
</div> <!-- end of content -->
<div id="footer">
<p>
<p>
</div> <!-- end of footer -->
</div> <!-- end of maincontainer -->
</body>
</html>
en daar zit functions.js dus gewoon bij...
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
function get() {
$('#result').hide().delay(200);
$.post('data.php', { name: add.title.value },
function(output) {
$('#result').html(output).slideToggle(600).delay(1500).slideToggle(600);
});
}
$('#result').hide().delay(200);
$.post('data.php', { name: add.title.value },
function(output) {
$('#result').html(output).slideToggle(600).delay(1500).slideToggle(600);
});
}
Gewijzigd op 24/12/2011 23:33:22 door Marc -
(overigens bevat functions.js nog steeds onnodig DOM ophalen (2x #result))
Niet werkt. Het bestand bestaat uit includes en in de browser heb ik dan de broncode gekopieerd en toen kreeg ik dit dus. In mijn eerste post staat het bestand wat wel werkt.
Verder kun je de functie even omzetten naar een jQuery.ajax functie, hierdoor kun je de fouten zien. En ook kun je even de console van je browser bekijken. De ajax functie is dan:
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
jQuery.ajax({
url : 'data.php',
type : 'post',
data : 'name='+$('.add').title.value,
context : $('#result'),
success : function( result ) {
jQuery(this).html(result);
},
error : function( jqXHR, status, errorThrown ) {
jQuery(this).html('Er is een fout: ' + status + (errorTrown !== undefined
? + ' ' + errorTrown
: '');
}
});
url : 'data.php',
type : 'post',
data : 'name='+$('.add').title.value,
context : $('#result'),
success : function( result ) {
jQuery(this).html(result);
},
error : function( jqXHR, status, errorThrown ) {
jQuery(this).html('Er is een fout: ' + status + (errorTrown !== undefined
? + ' ' + errorTrown
: '');
}
});
Nu ik dit script schrijf: Waar komt add vandaan in functions.js op regel 3?
maar is het niet gek dat hij het in het ene bestand wel doet, en in het andere bestand niet?
Marc -:
maar is het niet gek dat hij het in het ene bestand wel doet, en in het andere bestand niet?
Nee, wat dit bestand bevat veel fouten.
Marc -:
dat komt van het <form>.
Dan is het een class en dat moet je ophalen met document.getElementsByClassName vervolgens krijg je een array terug waar je dan dat form element uit moeten vissen. Je kan veel beter met een id werken dan kun je document.getElementById gebruiken en dan krijg je maar 1 element terug.
Of nog beter gebruik gewoon jQuery om .add te selecteren en met jQuery.val() haal je dan de value op.
Toevoeging op 26/12/2011 16:15:18:
de console van mn browser zegt dit:
Uncaught SyntaxError: Unexpected token {
Unsafe JavaScript attempt to access frame with URL http://website.nl/add_music.php from frame with URL http://www.youtube.com/embed/Rsybwpw_uyw. Domains, protocols and ports must match.
Toevoeging op 26/12/2011 17:35:06:
opvallend: Ik heb net zo veel mogelijk verwijderd dat ik in het include's bestand bij de broncode kijk die exact hetzelfde is als de broncode van het bestand wat wél werkt maar tóch werkt het bestand met alle include's niet...
Toevoeging op 26/12/2011 18:14:44:
Thanks iedereen! ik heb alles een beetje zitten ontleden, en heb alles lopen verwijderen tot ie het wél deed, en dan weer beetje voor beetje alles terugzetten en toen vond ik de fout! nu nog even de rest goed zetten en hopen dat ie dan ook werkt! (tot nu toe) was de fout dat ik in ergens een <form> niet afsloot.
Toevoeging op 26/12/2011 18:16:43:
en volgensmij ook dat ik eerst <form class=""> had maar nu <form name=""> heb
Toevoeging op 26/12/2011 18:32:09:
oke het werkt nu gewoon. Alleen @Wouter J, Moet/kan ik nog iets veranderen met Onclick ofzo?
Gewijzigd op 26/12/2011 16:10:29 door Marc -