Javascript/jQuery showdiv on click [met database]
Ik ben voor een klein projectje op school bezig en daarvoor moet ik op de een of andere manier deze functie kunnen klaarspelen:
- In een database zitten users met allerlei gegevens opgeslagen
- Deze users worden in een lijst weergegeven
- Als ik op een van deze users klik, zou ik graag willen dat er naast de lijst alle bijbehorende informatie die in de database staat opgehaald wordt en daar neergezet wordt zonder de pagina te herladen.
- De layout maak ik zelf
Volgensmij is dit niet heel moeilijk, maar ik heb geen idee waar/hoe ik moet beginnen.
Als iemand hierbij zou kunnen helpen zou dat tof zijn! Ik denk dat ik in deze richting moet zoeken: http://www.youtube.com/watch?v=-EHbBHm5l4g
Hartelijk dank alvast!!
Met vriendelijke groet,
Reno
Gewijzigd op 05/03/2013 21:29:42 door Reno L
Zou je daarom je titel van dit topic kunnen aanpassen door je bericht te bewerken?
Een goede titel geeft de probleemstelling aan.
Alvast bedankt.
Gewijzigd op 05/03/2013 21:37:33 door - Ariën -
Aan de hand of je nou POST of GET gebruikt, kan je eventueel eens kijken naar de $.get of $.post, terwijl $.ajax() als functie uitgebreider is.
Gewijzigd op 05/03/2013 21:39:29 door - Ariën -
En per gebruiker een <div id="user_xxx">...</div> met daarin alle informatie. Standaard allemaal verborgen, tot je er op 1 klikt.
Heb je geen ajax-dingen nodig en kan alles echt op 1 pagina.
Ik zal alvast eens wat onderzoek naar Ajax gaan doen, kijken of ik daar wat wijzer van wordt.
Als er iemand toevallig zo'n scriptje klaar heeft, of iets wat er op lijkt, zou ik het zeer op prijs stellen als diegene het zou willen sturen.
Alvast bedankt.
Om dit te kunnen doen zal je een aantal stappen moeten doornemen, nadat je je HTML opmaak klaar hebt moet je zorgen dat je gegevens op kunt halen via een PHP file, deze kun je ophalen doormiddel van jQuery/json.
Om de juiste data op te halen zal je de gebruikers moeten markeren met bijv hun userid die je vervolgens met jQuery ophaald en doorstuurd naar de php file, hier even een voorbeeldje:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<?php
include('database.php');
?>
<html>
<body>
<ul>
<?php
$checkUsers = mysql_query("SELECT `userId`, `userName` FROM `users`");
while($userData = mysql_fetch_assoc( $checkUsers )) {
?>
<li id="<? echo $userData['userId']; ?>"><? echo $userData['userName']; ?></li>
<?php
}
?>
</ul>
<div id="userInfo"></div>
<body>
</html>
include('database.php');
?>
<html>
<body>
<ul>
<?php
$checkUsers = mysql_query("SELECT `userId`, `userName` FROM `users`");
while($userData = mysql_fetch_assoc( $checkUsers )) {
?>
<li id="<? echo $userData['userId']; ?>"><? echo $userData['userName']; ?></li>
<?php
}
?>
</ul>
<div id="userInfo"></div>
<body>
</html>
Zoals je ziet geven wijzen we de userId aan de ID van de LI, vervolgens als hierop geklikt word moet je deze ophalen om vervolgens door te sturen naar de PHP file, weer een voorbeeld:
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
<script type="text/javascript">
jQuery(document).ready(function() {
// Als er word geklikt
jQuery("li").click(function() {
// userId ophalen
var userId = jQuery(this).attr("id");
// haal data op via php file
jQuery.post("userData.php", {user: userId}, function(returnData) {
// zet data in userInfo div
jQuery("#userInfo").html(returnData);
}, "json");
});
});
</script>
jQuery(document).ready(function() {
// Als er word geklikt
jQuery("li").click(function() {
// userId ophalen
var userId = jQuery(this).attr("id");
// haal data op via php file
jQuery.post("userData.php", {user: userId}, function(returnData) {
// zet data in userInfo div
jQuery("#userInfo").html(returnData);
}, "json");
});
});
</script>
de userId word in een POST doorgestuurd onder de naam user, dus: $_POST['user'], zorg dat je de gegevens print in de php file zodat jQuery het kan lezen en vervolgens kan plaatsen.
Ook is er natuurlijk de mogelijkheid om data in een array te zetten en deze array door te sturen, hier even een voorbeeld:
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
<?php
if(isset($_POST['user']) && !empty($_POST['user'])) {
$checkUser = mysql_query("SELECT `plaats`, `stad`, `straat`, `nummer` FROM `users` WHERE `userId` = '".$_POST['user']."'");
if(mysql_num_rows( $checkUser ) > 0) {
$userData = mysql_fetch_assoc( $checkUser );
$userArray = array();
array_push($userData['plaats'], $userArray);
array_push($userData['stad'], $userArray);
array_push($userData['straat'], $userArray);
array_push($userData['nummer'], $userArray);
echo json_encode($userArray);
}
}
?>
if(isset($_POST['user']) && !empty($_POST['user'])) {
$checkUser = mysql_query("SELECT `plaats`, `stad`, `straat`, `nummer` FROM `users` WHERE `userId` = '".$_POST['user']."'");
if(mysql_num_rows( $checkUser ) > 0) {
$userData = mysql_fetch_assoc( $checkUser );
$userArray = array();
array_push($userData['plaats'], $userArray);
array_push($userData['stad'], $userArray);
array_push($userData['straat'], $userArray);
array_push($userData['nummer'], $userArray);
echo json_encode($userArray);
}
}
?>
deze data kun je dan weergeven via jQuery op de volgende manier:
plaats: returnData[0];
stad: returnData[1];
straat: returnData[2];
nummer: returnData[3];
Ik hoop je hierbij voldoende geholpen te hebben :)
Gewijzigd op 05/03/2013 22:02:38 door Tim Kampherbeek
Super bedankt!! Ik ga er meteen mee aan de slag!
Heel fijn voor de snelle en goede reacties allemaal!!