een mysql query reloaden met jquery
Ik heb met php en jquery een reactie script gemaakt. Als je naar de pagina gaat worden de reacties met php uit de database gelezen en weer geven met foreach. Daar boven staan 2 knoppen; eentje om reactie's te weergeven en eentje om een reactie toe tevoegen. Als je dus op 'reactie toevoegen' klikt fadeOut() hij het div met reactie's en fadeIn() hij het div om een reactie toe tevoegen. Als je dan een reactie hebt toegevoegd en op reacties weer geven klikt fadeOut() hij het div om een reactie toe tevoegen en fadeIn() hij weer het div met alle reacties. Het probleem is alleen dan dat hij de query niet opnieuw doet en dus niet de gegevens herlaad. Hoe kan ik zorgen dat als de gebruiker op reacties weergeven klikt de query opnieuw word gedaan en dat het div wordt weergeven? ik heb al geprobeerd om met $.ajax in een ander document de gegevens uit de database te halen en dan met $('#div').html(data) te weergeven maar dat gaat mis omdat ik foreach gebruik maar dan komt het allemaal tegelijk en gaat het mis. Wie o wie kan mij helpen?
Gewijzigd op 05/01/2012 19:06:58 door Marc -
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<?php
$all_reactions_data = get_reactions_by_id($music_id);
if (!empty($all_reactions_data)) {
foreach ($all_reactions_data as $each_reaction_data) {
$comment_id = $each_reaction_data['comment_id'];
$music_id = $each_reaction_data['music_id'];
$date_reaction = $each_reaction_data['timestamp'];
$name_reaction = $each_reaction_data['name'];
$message_reaction = $each_reaction_data['message'];
?>
$all_reactions_data = get_reactions_by_id($music_id);
if (!empty($all_reactions_data)) {
foreach ($all_reactions_data as $each_reaction_data) {
$comment_id = $each_reaction_data['comment_id'];
$music_id = $each_reaction_data['music_id'];
$date_reaction = $each_reaction_data['timestamp'];
$name_reaction = $each_reaction_data['name'];
$message_reaction = $each_reaction_data['message'];
?>
<div class="reactiondiv_by_comment">
<div class="reaction_name_time"><p><span class="reactions_name"></span><span class="reactions_time"></span></p></div>
<div class="reaction_message"></div>
</div>
Code (php)
1
2
3
2
3
<?php
}
?>
}
?>
</div>
Code (php)
Gewijzigd op 05/01/2012 19:16:28 door Marc -
<html>
<div></div>
</html>
en het einde van het div wordt gewoon genegeerd. Of naja ik iniedergeval:
De gegevens van (data) wil ik gewoon in het div hebben met alle div tags. dus als in (data) 3 keer:
<div> reactie 1 </div>
<div> reactie 2 </div>
<div> reactie 3 </div>
staat wil ik met:
$(#div).html(data)
die 3 divs gewoon tussen
<div id="div"></div> dus -->
<div id="div">
<div> reactie 1 </div>
<div> reactie 2 </div>
<div> reactie 3 </div>
</div>
Toevoeging op 05/01/2012 19:25:53:
en ik heb dus met css gedaan dat als je over één reactie scrolt de achtergrond een beetje verandert. Als je de data dus invoegt staat er een rij met data waarvan alle achtergronde verandert. Dus hij onderscheidt de verschillende div's niet
Toevoeging op 05/01/2012 19:26:08:
ik hoop dat ik het een beetje goed uitleg (???)
Serverside kan je dan feitelijk in een keer je array met data uit de database echo'en met dit:
Client side kan je dan het beste de AJAX call maken met de JQuery functie $.getJSON(), die zorgt namelijk meteen voor een juiste conversie naar een javascript object. Dat kan je dan vervolgens gebruiken om je HTML te genereren.
Code (php)
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
en daarna:
Code (php)
1
2
3
4
5
2
3
4
5
<?php
<div class="reactiondiv_by_comment" id="id_of_reactiondiv_by_comment"></div>
?>
<div class="reactiondiv_by_comment" id="id_of_reactiondiv_by_comment"></div>
?>
Toevoeging op 05/01/2012 19:30:26:
oke bedankt! klinkt allemaal een beetje ingewikkeld want ik ben net pas een weekje bezig met jquery!
Toevoeging op 05/01/2012 19:31:46:
dus in mijn bestand(url) waar ik naar verwijs met $.ajax ({
url:
})
hoef ik alleen
neer te zetten ipv foreach?
Toevoeging op 05/01/2012 19:32:46:
maar wat wordt de rest dan? bij het $.ajax gedeelte?
Stel dat dit je code is in javascript om je AJAX call te maken:
Code (php)
1
2
3
2
3
$.getJSON("http://www.blabla.nl/get_json.php", {id: 1, action: "iets"}, function(res){
//doe iets
});
//doe iets
});
In "res" komt nu je data terecht als javascript object. stel je has de volgende array als data in php:
Dan kan je het in je javascript zo aanroepen: var myVar = res.elem1;
Als je dat nu in een div wilt gieten doe je het bijvoorbeeld zo:
Code (php)
1
$("#div").append("<div>"+res.elem1+"</div>");
Toevoeging op 05/01/2012 19:44:20:
Ik hoop dat het een beetje duidelijk is, anders drop hier gewoon wat je hebt en dan gaan we er stap voor stap doorheen.
Toevoeging op 05/01/2012 20:34:28:
Ik keek nog eens goed en toen ontdekte ik een hele, hele domme fout had gemaakt! ik had gewoon foute div's gebruikt! ik heb het nu opgelost alleen het enige probleem is nog: op een overzichtspagina kan je dan titels aanklikken die een id meenemen. Die id doe ik vervolgens in een hidden input om ze daarna vervolgens mee te sturen met $.ajax. Wat ik ook bij andere functie doe met $.ajax. Alleen nu zegt hij: undefined index. terwijl het 100% klopt!
en klopt het dat dit werkt met foreach en dan append ipv html. Of zal ik toch jou manier gebruiken zoals je hierboven beschrijft?
Toevoeging op 05/01/2012 20:39:19:
want dan heb ik dus dit:
(dit als functie en die functie dan in de lus als 'reactie weergeven' is geklikt
<script type="text/javascript">
$.ajax({
type: 'POST',
url: 'reload_reactions.php',
data: id_for_reaction,
success: function(data) {
$('#id_of_comments_of_music_by_id').html(data);
}
});
</script>
(dit als de pagina er voor het eerst is)
<script type="text/javascript">
$.ajax({
type: 'POST',
url: 'reload_reactions.php',
data: id_for_reaction,
success: function(data) {
$('#id_of_comments_of_music_by_id').append(data);
}
});
</script>
en dan in reload_functions.php doe ik eventjes voor het testen:
en dan is de output: Array ( )
Toevoeging op 05/01/2012 21:06:40:
Ik heb hem nu werkend! bedankt alsnog voor de hulp: Alleen is mijn manier wel correct? Of kan het beter via de jouwe ivm eventuele problemen later?
Gewijzigd op 05/01/2012 20:39:49 door Marc -
Op zich zie ik niets mis met jouw manier. Het enige punt waarom ik voor mijn manier heb gekozen is dat het minder data verstuurt, maar dat maakt het zeker niet beter. Aan de andere kant, mocht je ooit eens je HTML willen aanpassen dan hoef jij het alleen in je php scripts te doen, terwijl je met mijn manier ook je javascript files moet aanpassen. Kwestie van keuze dus. Als het werkt zoals je het nu doet zou ik het gewoon zo laten.
Toevoeging op 06/01/2012 18:20:14:
ik kom net achter een probleem: de tekst gaat nu dwars door de div heen
dus:
| dit is een div met te|kst en de gaat hier verder
| |
ipv
| dit is een div met tekst |
| en de tekst gaat hier |
| verder |
heeft het iets met foreach te maken?
Toevoeging op 06/01/2012 18:30:45:
en als ik dan gewoon droog even alle code verwijder en dan de div's die in de foreach staan er met de hand in zet werkt het wel gewoon? heeft iemand een idee?
Toevoeging op 06/01/2012 21:15:30:
hierbij de broncode:
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
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
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
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
<!DOCTYPE html>
<html>
<head>
<title>| home</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="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<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/functions.js"></script>
</head>
<body>
<div id="maincontainter">
<div id="header">
<img id="logo" src="http://webdev.we.funpic.org/flippindouble/front/flippindouble_image_3.png" alt="DJ FlippinDOuble" height="160" width="140">
</div>
<div id="nav">
<nav>
<ul id="ul_menu">
<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>
</ul>
</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>
<h4> Like </h4>
<div style="border: 1px solid #6D6D6D; border-top: 0px;"><iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fnl-nl.facebook.com%2Fpages%2FDJ-FlippinDouble%2F296441983708985%3Fv%3Dinfo&width=250&height=258&colorscheme=dark&show_faces=true&border_color=%231D1D1B&stream=false&header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:258px;" allowTransparency="true"></iframe></div>
<br><br>
<h4>YouTube</h4>
<iframe width="100%" height="200" src="http://www.youtube.com/embed/Rsybwpw_uyw" frameborder="0" allowfullscreen></iframe>
<br><br>
</p>
</div>
<div id="left">
<form>
<input type="hidden" name="music_id" id="music_id" value="11">
<input type="hidden" name="page" id="page" value="1">
</form>
<div class="soundcloud_post">
<div class="soundcloud_date"><p>Posted on 03-01-2012</p></div>
<h4>December set 2011</h4>
<div class="soundcloud"><object height="81" width="500px"> <param name="movie" value="https://player.soundcloud.com/player.swf?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F30536909&show_comments=true&auto_play=false&color=a700b3"></param> <param name="allowscriptaccess" value="always"></param> <embed allowscriptaccess="always" height="81" src="https://player.soundcloud.com/player.swf?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F30536909&show_comments=true&auto_play=false&color=a700b3" type="application/x-shockwave-flash" width="500px"></embed> </object> <span><a href="http://soundcloud.com/flippindouble/flippindoubles-progressive-1">Flippin'Double's Progressive House Set December 2011</a> by <a href="http://soundcloud.com/flippindouble">Flippin'Double</a></span>
</div>
<form class='show_reactions' action="music.php" method="post">
<input class="showreactions_button" id="showreactions" type="button" name='showreactions' value='show reactions'>
<input class="showreactions_button" id="addacomment" type="button" name='addacomment' value='add a comment'>
</form>
</div>
<div class="add_a_comment_form" id="id_of_add_a_comment_form">
<h5 style="padding: 8px 5px 8px 10px;">Add a comment</h5>
<div id="response_of_add_comment"><!-- response of the server --></div>
<form class="contactform" id="add_reaction_form">
<table id="table">
<tr> <!-- begin of voornaam -->
<td height="20" valign="middle" class="textform">Name:</td>
<td height="20" valign="top"><input class="inputforms" type="text" name="name_reaction" id="name_reaction" maxlength="50"></td>
</tr> <!-- end of voornaam -->
<tr> <!-- begin of bericht -->
<td height="20" valign="top" class="textform">Comment:</td>
<td height="20" valign="top"><textarea cols="50" rows="6" class="inputarea" name="comment_reaction" id="comment_reaction"></textarea><input type="hidden" name="music_id_reaction" id="music_id_reaction" value="11"><input type="hidden" name="ip_reaction" id="ip_reaction" value="83.80.251.8"></td>
</tr> <!-- end of bericht -->
<tr> <!-- begin of verzenden -->
<td height="25"></td><td height="27" valign="top"><input class="add_comment_button" type="button" id="addcomment" name="addcomment" value="add comment"></td>
</tr> <!-- end of verzenden -->
</table>
</form>
</div>
<div class="comments_of_music_by_id" id="id_of_comments_of_music_by_id">
</div>
<script type="text/javascript">
var id_for_reaction = $('form #music_id').val();
var page = $('form #page').val();
$.ajax({
url: 'reload_reactions.php',
data: {
music_id: id_for_reaction,
page: page
},
success: function(data) {
$('#id_of_comments_of_music_by_id').append(data);
}
});
</script>
</div> <!-- end of left -->
</div> <!-- end of content -->
<div id="footer">
<p>
<a href="login.php">admin</a>
</p>
</div> <!-- end of footer -->
</div> <!-- end of maincontainer -->
</body>
</html>
<html>
<head>
<title>| home</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="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<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/functions.js"></script>
</head>
<body>
<div id="maincontainter">
<div id="header">
<img id="logo" src="http://webdev.we.funpic.org/flippindouble/front/flippindouble_image_3.png" alt="DJ FlippinDOuble" height="160" width="140">
</div>
<div id="nav">
<nav>
<ul id="ul_menu">
<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>
</ul>
</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>
<h4> Like </h4>
<div style="border: 1px solid #6D6D6D; border-top: 0px;"><iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fnl-nl.facebook.com%2Fpages%2FDJ-FlippinDouble%2F296441983708985%3Fv%3Dinfo&width=250&height=258&colorscheme=dark&show_faces=true&border_color=%231D1D1B&stream=false&header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:258px;" allowTransparency="true"></iframe></div>
<br><br>
<h4>YouTube</h4>
<iframe width="100%" height="200" src="http://www.youtube.com/embed/Rsybwpw_uyw" frameborder="0" allowfullscreen></iframe>
<br><br>
</p>
</div>
<div id="left">
<form>
<input type="hidden" name="music_id" id="music_id" value="11">
<input type="hidden" name="page" id="page" value="1">
</form>
<div class="soundcloud_post">
<div class="soundcloud_date"><p>Posted on 03-01-2012</p></div>
<h4>December set 2011</h4>
<div class="soundcloud"><object height="81" width="500px"> <param name="movie" value="https://player.soundcloud.com/player.swf?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F30536909&show_comments=true&auto_play=false&color=a700b3"></param> <param name="allowscriptaccess" value="always"></param> <embed allowscriptaccess="always" height="81" src="https://player.soundcloud.com/player.swf?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F30536909&show_comments=true&auto_play=false&color=a700b3" type="application/x-shockwave-flash" width="500px"></embed> </object> <span><a href="http://soundcloud.com/flippindouble/flippindoubles-progressive-1">Flippin'Double's Progressive House Set December 2011</a> by <a href="http://soundcloud.com/flippindouble">Flippin'Double</a></span>
</div>
<form class='show_reactions' action="music.php" method="post">
<input class="showreactions_button" id="showreactions" type="button" name='showreactions' value='show reactions'>
<input class="showreactions_button" id="addacomment" type="button" name='addacomment' value='add a comment'>
</form>
</div>
<div class="add_a_comment_form" id="id_of_add_a_comment_form">
<h5 style="padding: 8px 5px 8px 10px;">Add a comment</h5>
<div id="response_of_add_comment"><!-- response of the server --></div>
<form class="contactform" id="add_reaction_form">
<table id="table">
<tr> <!-- begin of voornaam -->
<td height="20" valign="middle" class="textform">Name:</td>
<td height="20" valign="top"><input class="inputforms" type="text" name="name_reaction" id="name_reaction" maxlength="50"></td>
</tr> <!-- end of voornaam -->
<tr> <!-- begin of bericht -->
<td height="20" valign="top" class="textform">Comment:</td>
<td height="20" valign="top"><textarea cols="50" rows="6" class="inputarea" name="comment_reaction" id="comment_reaction"></textarea><input type="hidden" name="music_id_reaction" id="music_id_reaction" value="11"><input type="hidden" name="ip_reaction" id="ip_reaction" value="83.80.251.8"></td>
</tr> <!-- end of bericht -->
<tr> <!-- begin of verzenden -->
<td height="25"></td><td height="27" valign="top"><input class="add_comment_button" type="button" id="addcomment" name="addcomment" value="add comment"></td>
</tr> <!-- end of verzenden -->
</table>
</form>
</div>
<div class="comments_of_music_by_id" id="id_of_comments_of_music_by_id">
</div>
<script type="text/javascript">
var id_for_reaction = $('form #music_id').val();
var page = $('form #page').val();
$.ajax({
url: 'reload_reactions.php',
data: {
music_id: id_for_reaction,
page: page
},
success: function(data) {
$('#id_of_comments_of_music_by_id').append(data);
}
});
</script>
</div> <!-- end of left -->
</div> <!-- end of content -->
<div id="footer">
<p>
<a href="login.php">admin</a>
</p>
</div> <!-- end of footer -->
</div> <!-- end of maincontainer -->
</body>
</html>
Toevoeging op 08/01/2012 14:08:42:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
<?php
echo "
<div class=\"reactiondiv_by_comment\" id=\"id_of_reactiondiv_by_comment\">
<div class=\"reaction_name_time\"><p><span class=\"reactions_name\">$name_reaction</span><span class=\"reactions_time\">$count $suffix ago</span></p></div>
<div class=\"reaction_message\"><p>$message_reaction</p></div>
</div>
";
?>
echo "
<div class=\"reactiondiv_by_comment\" id=\"id_of_reactiondiv_by_comment\">
<div class=\"reaction_name_time\"><p><span class=\"reactions_name\">$name_reaction</span><span class=\"reactions_time\">$count $suffix ago</span></p></div>
<div class=\"reaction_message\"><p>$message_reaction</p></div>
</div>
";
?>
<h5 style="padding: 8px 5px 8px 10px;">Comments</h5>
<div class="reactiondiv_by_comment" id="id_of_reactiondiv_by_comment">
<div class="reaction_name_time"><p><span class="reactions_name">sdfsdfdsfdsfdsfsdfsdfsdfsdfdsf</span><span class="reactions_time">1 day ago</span></p></div>
<div class="reaction_message"><p>fdfdsfdsfdfffffffffffffffsdfsdfdsfdsfdsfsdfsdfsdfsdfdsfdsfdsfsdfsdfsdfsdfdsfdsfdsfsdfsdfsdfsdfdsfdsfdsfsdfsdf</p></div>
</div>
<div class="reactiondiv_by_comment" id="id_of_reactiondiv_by_comment">
<div class="reaction_name_time"><p><span class="reactions_name">gfdgdfg</span><span class="reactions_time">1 day ago</span></p></div>
<div class="reaction_message"><p>test</p></div>
</div>
<div class="reactiondiv_by_comment" id="id_of_reactiondiv_by_comment">
<div class="reaction_name_time"><p><span class="reactions_name">hgfhfghfghfg</span><span class="reactions_time">1 day ago</span></p></div>
<div class="reaction_message"><p>hfghgfhsdfsdfdsfdsfdsfsdfsdf</p></div>
</div>
<div class="reactiondiv_by_comment" id="id_of_reactiondiv_by_comment">
<div class="reaction_name_time"><p><span class="reactions_name">hfghfghfghfgh</span><span class="reactions_time">1 day ago</span></p></div>
<div class="reaction_message"><p>fghfghfghsdfsdfdsfdsfdsfsdfsdfsdfsdfdsfdsfdsfsdfsdfsdfsdfdsfdsfdsfsdfsdfsdfsdfdsfdsfdsfsdfsdfsdfsdfdsfdsfdsfsdfsdfsdfsdfdsfdsfdsfsdfsdfsdfsdfdsfdsfdsfsdfsdfsdfsdfdsfdsfdsfsdfsdfsdfsdfdsfdsfdsfsdfsdfsdfsdfdsfdsfdsfsdfsdfsdfsdfdsfdsfdsfsdfsdfsdfsdfdsfdsfdsfsdfsdfsdfsdfdsfdsfdsfsdfsdfsdfsdfdsfdsfdsfsdfsdfsdfsdfdsfdsfdsfsdfsdfsdfsdfdsfdsfdsfsdfsdfsdfsdfdsfdsfdsfsdfsdfsdfsdfdsfdsfdsfsdfsdfsdfsdfdsfdsfdsfsdfsdfsdfsdfdsfdsfdsfsdfsdfsdfsdfdsfdsfdsfsdfsdfsdfsdfdsfdsfdsfsdfsdfsdfsdfdsfdsfdsfsdfsdf</p></div>
</div>
<div class="reactiondiv_by_comment" id="id_of_reactiondiv_by_comment">
<div class="reaction_name_time"><p><span class="reactions_name">trythgfhgfh</span><span class="reactions_time">1 day ago</span></p></div>
<div class="reaction_message"><p>sdfsdfdsfdsfdsfsdfsdfsdfsdfdsfdsfdsfsdfsdfsdfsdfdsfdsfdsfsdfsdfsdfsdfdsfdsfdsfsdfsdfsdfsdfdsfdsfdsfsdfsdfsdfsdfdsfdsfdsfsdfsdfsdfsdfdsfdsfdsfsdfsdfsdfsdfdsfdsfdsfsdfsdfsdfsdfdsfdsfdsfsdfsdf</p></div>
</div>
<div class="reactiondiv_by_comment" id="id_of_reactiondiv_by_comment">
<div class="reaction_name_time"><p><span class="reactions_name">tertretertreertrt</span><span class="reactions_time">1 day ago</span></p></div>
<div class="reaction_message"><p>sdfsdfdsfdsfdsfsdfsdfsdfsdfdsfdsfdsfsdfsdfsdfsdfdsfdsfdsfsdfsdfsdfsdfdsfdsfdsfsdfsdfsdfsdfdsfdsfdsfsdfsdfsdfsdfdsfdsfdsfsdfsdfsdfsdfdsfdsfdsfsdfsdfsdfsdfdsfdsfdsfsdfsdf</p></div>
</div>
<div class="reactiondiv_by_comment" id="id_of_reactiondiv_by_comment">
<div class="reaction_name_time"><p><span class="reactions_name">rtretretertrtr</span><span class="reactions_time">1 day ago</span></p></div>
<div class="reaction_message"><p>sdfsdfdsfdsfdsfsdfsdfsdfsdfdsfdsfdsfsdfsdfsdfsdfdsfdsfdsfsdfsdfsdfsdfdsfdsfdsfsdfsdfsdfsdfdsfdsfdsfsdfsdf</p></div>
</div>
<div class="reactiondiv_by_comment" id="id_of_reactiondiv_by_comment">
<div class="reaction_name_time"><p><span class="reactions_name">fdgfdgdgfdgdfg</span><span class="reactions_time">1 day ago</span></p></div>
<div class="reaction_message"><p>sdfsdfdsfdsfdsfsdfsdfsdfsdfdsfdsfdsfsdfsdfsdfsdfdsfdsfdsfsdfsdfsdfsdfdsfdsfdsfsdfsdfsdfsdfdsfdsfdsfsdfsdfsdfsdfdsfdsfdsfsdfsdfsdfsdfdsfdsfdsfsdfsdfsdfsdfdsfdsfdsfsdfsdfsdfsdfdsfdsfdsfsdfsdfsdfsdfdsfdsfdsfsdfsdfsdfsdfdsfdsfdsfsdfsdfsdfsdfdsfdsfdsfsdfsdf</p></div>
</div>
<div class="reactiondiv_by_comment" id="id_of_reactiondiv_by_comment">
<div class="reaction_name_time"><p><span class="reactions_name">gdrgdfgfdgf</span><span class="reactions_time">1 day ago</span></p></div>
<div class="reaction_message"><p>sdfsdfdsfdsfdsfsdfsdfsdfsdfdsfdsfdsfsdfsdfsdfsdfdsfdsfdsfsdfsdfsdfsdfdsfdsfdsfsdfsdfsdfsdfdsfdsfdsfsdfsdfsdfsdfdsfdsfdsfsdfsdfsdfsdfdsfdsfdsfsdfsdfsdfsdfdsfdsfdsfsdfsdfsdfsdfdsfdsfdsfsdfsdf</p></div>
</div>
<div class="reactiondiv_by_comment" id="id_of_reactiondiv_by_comment">
<div class="reaction_name_time"><p><span class="reactions_name">fsdfsf</span><span class="reactions_time">1 day ago</span></p></div>
<div class="reaction_message"><p>sdfsdfdsfdsfdsfsdfsdfsdfsdfdsfdsfdsfsdfsdfsdfsdfdsfdsfdsfsdfsdfsdfsdfdsfdsfdsfsdfsdfsdfsdfdsfdsfdsfsdfsdfsdfsdfdsfdsfdsfsdfsdfsdfsdfdsfdsfdsfsdfsdfsdfsdfdsfdsfdsfsdfsdf</p></div>
</div>
<div class="reactiondiv_by_comment" id="id_of_reactiondiv_by_comment">
<div class="reaction_name_time"><p><span class="reactions_name">dfsfs</span><span class="reactions_time">1 day ago</span></p></div>
<div class="reaction_message"><p>sdfsdfdsfdsfdsfsdfsdfsdfsdfdsfdsfdsfsdfsdfsdfsdfdsfdsfdsfsdfsdfsdfsdfdsfdsfdsfsdfsdfsdfsdfdsfdsfdsfsdfsdf</p></div>
</div>
Volgende vraag van mijn kant zou zijn hoe de CSS eruit ziet voor deze divs. Opmaak is over het algemeen CSS, dus als je tekst doorloopt zit er wellicht mis in je CSS of in de classes die je gebruikt voor de divs. Heb je daar al naar gekeken?
Toevoeging op 08/01/2012 14:27:19:
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
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
.reactiondiv_by_comment {
min-height: 25px;
padding: 7px 121px 7px 10px;
margin: 0px 0px 0px 0px;
border: 1px solid #1D1D1B;
}
.reactions_name {
font-size: 16px;
font-weight: normal;
color: #CE44B5;
padding: 0px 10px 0px 0px;
}
.reactions_time {
font-size: 12px;
color: #787878;
}
.reaction_message {
font-size: 13px;
color: #E8E8E8;
padding: 5px 0px 0px 5px;
}
min-height: 25px;
padding: 7px 121px 7px 10px;
margin: 0px 0px 0px 0px;
border: 1px solid #1D1D1B;
}
.reactions_name {
font-size: 16px;
font-weight: normal;
color: #CE44B5;
padding: 0px 10px 0px 0px;
}
.reactions_time {
font-size: 12px;
color: #787878;
}
.reaction_message {
font-size: 13px;
color: #E8E8E8;
padding: 5px 0px 0px 5px;
}
Gewijzigd op 08/01/2012 14:27:44 door Marc -
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
<div id="maincontainter">
<div style="clear:both;" id="content">
<div id="left">
<div class="comments_of_music_by_id" id="id_of_comments_of_music_by_id">
</div>
</div> <!-- end of left -->
</div> <!-- end of content -->
</div> <!-- end of maincontainer -->
<div style="clear:both;" id="content">
<div id="left">
<div class="comments_of_music_by_id" id="id_of_comments_of_music_by_id">
</div>
</div> <!-- end of left -->
</div> <!-- end of content -->
</div> <!-- end of maincontainer -->
De dynamische HTML komt terecht in "id_of_comments_of_music_by_id".
In de CSS die je boven geeft zie ik geen enkele style rule die iets zegt over de breedte of overflow van de nieuwe divs die je genereert. Ik krijg dus het idee dat het in een van de parent elementen moet zitten. Wat is de CSS voor die divs?
Heb je overigens Firefox met Firebug? Daarin kan je namelijk heel snel zien welke CSS rules gelden voor een willekeurig element op de pagina, ook dynamische elementen.
Code (php)
1
2
3
4
5
6
2
3
4
5
6
#left {
width: 525px;
min-height: 600px;
border: 0px solid #4F4F4F;
clear:left;
}
width: 525px;
min-height: 600px;
border: 0px solid #4F4F4F;
clear:left;
}
Gewijzigd op 08/01/2012 15:20:50 door Marc -
Dat hij gewoon door gaat komt omdat het 1 woord is. Als je een zin erin stopt breekt hij wel de regel af en gaat eronder verder. Dus als je allemaal tekens achter elkaar hebt breekt hij hem niet af.
Hoe kun je dit oplossen? Gebruik:
Code (php)
1
2
3
4
2
3
4
.reaction_message
{
word-wrap: break-word;
}
{
word-wrap: break-word;
}
Dit breekt je woorden ook, dit is CSS3 maar werkt in alle browsers zelfs IE5.5+.
Ik vrees dat ik je dan niet verder meer kan helpen :-(