Javascript/jQuery showdiv on click [met database]

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Senior DevOps-ontwikkelaar eIDAS

Functie­omschrijving Burgers en bedrijven veilig en betrouwbaar digitaal toegang geven tot diensten en producten van het ministerie van Economische Zaken en Klimaat. Als senior DevOps-ontwikkelaar bouw je daar letterlijk aan mee. En dat doe je bij DICTU: een van de grootste en meest vooruitstrevende ICT-dienstverleners van de Rijksoverheid. Jij werkt mee aan de doorontwikkeling van eIDAS, dat staat voor Electronic IDentification Authentication and trust Services. Deze koppeling maakt de grensoverschrijdende authenticatie op overheidswebsites binnen de Europese Unie mogelijk. Het ministerie van Economische Zaken en Klimaat heeft één moderne toegangspoort voor zijn diensten en inspecties. Enkele daarvan zijn dankzij eIDAS inmiddels

Bekijk vacature »

Technisch Ontwerper / Applicatie Ontwikkelaar

Technisch Ontwerper / Applicatie Ontwikkelaar Actief Wat ga je doen? Als Technisch Ontwerper / Applicatie Ontwikkelaar kom je te werken bij onze gerenommeerde klanten op projecten of opdrachten van omvang en formaat. Je bent verantwoordelijk voor het omzetten van functionele specificaties naar een technisch ontwerp, het ontwerp van programmaspecificaties voor toepassingen, de realisatie van (gewijzigde) programmaonderdelen en databestanden van toepassingen en de technische systeemtest van applicatietoepassingen. Daarnaast geef je vorm aan webpagina’s en applicaties, stel je gebruikersdocumentatie op en verleen je ondersteuning bij het oplossen van productiefouten. Tevens ben je verantwoordelijk voor het samenstellen en onderhouden van de applicatie c.q.

Bekijk vacature »

Front-end Developer Vue.js Meewerkend voorman

Functieomschrijving Ben jij een ervaren Front-end Developer, bedreven in Vue.js en lijkt het jou gaaf om als meewerkend voorman verantwoordelijk te zijn voor de ontwikkeling van drie junior ontwikkelaars? Werk jij graag aan diverse projecten t.b.v. het vergroten van klant- en medewerkerbeleving? Lee dan snel verder! Het onderhouden, ontwikkelen en testen van front-end software van diverse klant- en medewerkersapplicaties; Het ontwikkelen van maatwerk front-end oplossingen in Vue.js en participeren in een scrumteam; Verantwoordelijk voor het begeleiden en coachen van drie junior front-end developers; Verantwoordelijk voor code-reviews en het opstellen van de juiste documentatie zoals userstories en api ontwerp; Participeren in

Bekijk vacature »

Technisch Ontwerper / Applicatie Ontwikkelaar

Technisch Ontwerper / Applicatie Ontwikkelaar Actief Wat ga je doen? Als Technisch Ontwerper / Applicatie Ontwikkelaar kom je te werken bij onze gerenommeerde klanten op projecten of opdrachten van omvang en formaat. Je bent verantwoordelijk voor het omzetten van functionele specificaties naar een technisch ontwerp, het ontwerp van programmaspecificaties voor toepassingen, de realisatie van (gewijzigde) programmaonderdelen en databestanden van toepassingen en de technische systeemtest van applicatietoepassingen. Daarnaast geef je vorm aan webpagina’s en applicaties, stel je gebruikersdocumentatie op en verleen je ondersteuning bij het oplossen van productiefouten. Tevens ben je verantwoordelijk voor het samenstellen en onderhouden van de applicatie c.q.

Bekijk vacature »

Technisch Ontwerper / Applicatie Ontwikkelaar

Technisch Ontwerper / Applicatie Ontwikkelaar Actief Wat ga je doen? Als Technisch Ontwerper / Applicatie Ontwikkelaar kom je te werken bij onze gerenommeerde klanten op projecten of opdrachten van omvang en formaat. Je bent verantwoordelijk voor het omzetten van functionele specificaties naar een technisch ontwerp, het ontwerp van programmaspecificaties voor toepassingen, de realisatie van (gewijzigde) programmaonderdelen en databestanden van toepassingen en de technische systeemtest van applicatietoepassingen. Daarnaast geef je vorm aan webpagina’s en applicaties, stel je gebruikersdocumentatie op en verleen je ondersteuning bij het oplossen van productiefouten. Tevens ben je verantwoordelijk voor het samenstellen en onderhouden van de applicatie c.q.

Bekijk vacature »

Technisch Ontwerper / Applicatie Ontwikkelaar

Technisch Ontwerper / Applicatie Ontwikkelaar Actief Wat ga je doen? Als Technisch Ontwerper / Applicatie Ontwikkelaar kom je te werken bij onze gerenommeerde klanten op projecten of opdrachten van omvang en formaat. Je bent verantwoordelijk voor het omzetten van functionele specificaties naar een technisch ontwerp, het ontwerp van programmaspecificaties voor toepassingen, de realisatie van (gewijzigde) programmaonderdelen en databestanden van toepassingen en de technische systeemtest van applicatietoepassingen. Daarnaast geef je vorm aan webpagina’s en applicaties, stel je gebruikersdocumentatie op en verleen je ondersteuning bij het oplossen van productiefouten. Tevens ben je verantwoordelijk voor het samenstellen en onderhouden van de applicatie c.q.

Bekijk vacature »

Technisch Ontwerper / Applicatie Ontwikkelaar

Technisch Ontwerper / Applicatie Ontwikkelaar Actief Wat ga je doen? Als Technisch Ontwerper / Applicatie Ontwikkelaar kom je te werken bij onze gerenommeerde klanten op projecten of opdrachten van omvang en formaat. Je bent verantwoordelijk voor het omzetten van functionele specificaties naar een technisch ontwerp, het ontwerp van programmaspecificaties voor toepassingen, de realisatie van (gewijzigde) programmaonderdelen en databestanden van toepassingen en de technische systeemtest van applicatietoepassingen. Daarnaast geef je vorm aan webpagina’s en applicaties, stel je gebruikersdocumentatie op en verleen je ondersteuning bij het oplossen van productiefouten. Tevens ben je verantwoordelijk voor het samenstellen en onderhouden van de applicatie c.q.

Bekijk vacature »

Technisch Ontwerper / Applicatie Ontwikkelaar

Technisch Ontwerper / Applicatie Ontwikkelaar Actief Wat ga je doen? Als Technisch Ontwerper / Applicatie Ontwikkelaar kom je te werken bij onze gerenommeerde klanten op projecten of opdrachten van omvang en formaat. Je bent verantwoordelijk voor het omzetten van functionele specificaties naar een technisch ontwerp, het ontwerp van programmaspecificaties voor toepassingen, de realisatie van (gewijzigde) programmaonderdelen en databestanden van toepassingen en de technische systeemtest van applicatietoepassingen. Daarnaast geef je vorm aan webpagina’s en applicaties, stel je gebruikersdocumentatie op en verleen je ondersteuning bij het oplossen van productiefouten. Tevens ben je verantwoordelijk voor het samenstellen en onderhouden van de applicatie c.q.

Bekijk vacature »

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

07/08/2020 11:59:32
 
- 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.