Javascript/jQuery showdiv on click [met database]

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Reno L

Reno L

05/03/2013 21:20:03
Quote Anchor link
Beste mensen,

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

PHP hulp

17/11/2019 06:37:25
 
- Ariën -
Beheerder

- Ariën -

05/03/2013 21:28:06
Quote Anchor link
Meerdere mensen hier op het forum hebben een vraag m.b.t. Javascript en jQuery.
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 -
 
Reno L

Reno L

05/03/2013 21:29:17
Quote Anchor link
Sorry, ik zal het gelijk aanpassen!
 
- Ariën -
Beheerder

- Ariën -

05/03/2013 21:38:12
Quote Anchor link
Kijk eens naar wat $.ajax() in jQuery voor je kan doen.
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 -
 
Eddy E

Eddy E

05/03/2013 21:52:25
Quote Anchor link
Als de lijst niet te lang is, zou je gewoon alles direct kunnen plaatsen in je HTML, danwel onzichtbaar.
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.
 
Reno L

Reno L

05/03/2013 21:59:46
Quote Anchor link
Het zijn nogal veel gebruikers, vandaar dat ik graag zo'n jquery functie wilde (of ajax is ook best).

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.
 
Tim Kampherbeek

Tim Kampherbeek

05/03/2013 22:00:29
Quote Anchor link
Hey Reno,

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)
PHP script in nieuw venster Selecteer het PHP script
1
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>


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)
PHP script in nieuw venster Selecteer het PHP script
1
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>


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)
PHP script in nieuw venster Selecteer het PHP script
1
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);
    }
}

?>


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

Reno L

05/03/2013 22:05:41
Quote Anchor link
Jaaah hardstikke fijn! dat is precies zoiets wat ik zocht!

Super bedankt!! Ik ga er meteen mee aan de slag!

Heel fijn voor de snelle en goede reacties allemaal!!
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.