Hallo!

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?
Wat heeft het gebruik van foreach hier mee te maken? Misschien helpt een stukje code van wat je al hebt wel...
dit is het stukje:

<?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'];


?>
<div class="reactiondiv_by_comment">

<div class="reaction_name_time"><p><span class="reactions_name"><?php echo $name_reaction ?></span><span class="reactions_time"><?php echo $date ?></span></p></div>
<div class="reaction_message"><?php echo $message_reaction ?></div>
</div>
<?php
}
?>
</div>

<?php

} else {

echo "<p style='padding-left: 10px;'>There're no comments yet.</p>";

}

?>
Nu begrijp ik alleen niet wat er dan mis gaat. Je zegt omdat je foreach gebruikt gaat het mis omdat alles dan tegelijk komt.... uh...
stel er zijn 5 reacties, dan krijg je dus 5 reacties te zien door foreach. als ik dat dan terug stuur en het met html(data) uitlees krijg ik in het div waar ik (data) ik plaats eigenlijk gewoon 1 reactie met alle data van (data) en in (data) staat dus een paar keer

<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>

[size=xsmall]Toevoeging op 05/01/2012 19:25:53:[/size]

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

[size=xsmall]Toevoeging op 05/01/2012 19:26:08:[/size]

ik hoop dat ik het een beetje goed uitleg (???)
Dat komt dan waarschijnlijk omdat je een complete HTML pagina terugstuurt? Via een AJAX call kan je ook een deel sturen, of zelfs alleen maar een JSON object waarin je data zit. De HTML kan je dan opbouwen in de browser. Dit laatste is de manier die ik over het algemeen toepas, omdat je dan veel minder data hoeft te versturen (over het algemeen).

Serverside kan je dan feitelijk in een keer je array met data uit de database echo'en met dit:
<?php
echo json_encode($all_reactions_data);
?>

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.
en dus heb ik in de oude:

<?php

<div class="reactiondiv_by_comment">

<div class="reaction_name_time"><p><span class="reactions_name"><?php echo $name_reaction ?></span><span class="reactions_time"><?php echo $date ?></span></p></div>
<div class="reaction_message"><?php echo $message_reaction ?></div>

</div>

?>

en daarna:

<?php

<div class="reactiondiv_by_comment" id="id_of_reactiondiv_by_comment"></div>

?>

[size=xsmall]Toevoeging op 05/01/2012 19:30:26:[/size]

oke bedankt! klinkt allemaal een beetje ingewikkeld want ik ben net pas een weekje bezig met jquery!

[size=xsmall]Toevoeging op 05/01/2012 19:31:46:[/size]

dus in mijn bestand(url) waar ik naar verwijs met $.ajax ({

url:

})

hoef ik alleen

<?php
echo json_encode($all_reactions_data);
?>

neer te zetten ipv foreach?

[size=xsmall]Toevoeging op 05/01/2012 19:32:46:[/size]

maar wat wordt de rest dan? bij het $.ajax gedeelte?
eigenlijk wel, alleen let wel, je krijgt dan een object terug met je kale data. Run die pagina gewoon eens in je browser zodat je ziet wat je krijgt.

Stel dat dit je code is in javascript om je AJAX call te maken:

$.getJSON("http://www.blabla.nl/get_json.php", {id: 1, action: "iets"}, function(res){
  //doe iets
});


In "res" komt nu je data terecht als javascript object. stel je has de volgende array als data in php:
<?php
$data = array( "elem1" => 12, "elem2" => "something", "elem3" => true );
?>

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:

$("#div").append("<div>"+res.elem1+"</div>");



[size=xsmall]Toevoeging op 05/01/2012 19:44:20:[/size]

Ik hoop dat het een beetje duidelijk is, anders drop hier gewoon wat je hebt en dan gaan we er stap voor stap doorheen.
oke bedankt voor de duidelijke uitleg! ik ga eventjes wat proberen (:

[size=xsmall]Toevoeging op 05/01/2012 20:34:28:[/size]

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?

[size=xsmall]Toevoeging op 05/01/2012 20:39:19:[/size]

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:

<?php

print_r($_POST);

?>

en dan is de output: Array ( )

[size=xsmall]Toevoeging op 05/01/2012 21:06:40:[/size]

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?
Lees ik door alle vragen heen, is het niet meer nodig :-)

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.
oke! bedankt voor alle uitleg :-D

[size=xsmall]Toevoeging op 06/01/2012 18:20:14:[/size]

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?

[size=xsmall]Toevoeging op 06/01/2012 18:30:45:[/size]

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?

[size=xsmall]Toevoeging op 06/01/2012 21:15:30:[/size]

hierbij de broncode:


<!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">&bull;</span>
			<span class="bullets_slider" rel="2">&bull;</span>
			<span class="bullets_slider" rel="3">&bull;</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&amp;width=250&amp;height=258&amp;colorscheme=dark&amp;show_faces=true&amp;border_color=%231D1D1B&amp;stream=false&amp;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&amp;show_comments=true&amp;auto_play=false&amp;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&amp;show_comments=true&amp;auto_play=false&amp;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>

Reageren