GET_[edit] met javascript meesturen
Kan iemand me ff op weg helpen met javascript? Ik heb zeer weinig ervaring en kennis over javascript.
Ik heb nu een gasten lijst in een tabel met een link om de gegevens te wijzigen. Nu gebruik ik voor het toevoegen van gasten een pop up div wat met javascript gemaakt is.
http://www.pat-burt.com/web-development/how-to-do-a-css-popup-without-opening-a-new-window/
heb ik hiervoor gebruikt.
Hoe kan ik bij een onclick() een variabel meesturen zodat die later gebruikt kan worden bij include() voor de div met popup gegevens.
[script]
onclick('popupdiv','get gegevens')
[/script]
hoe kan ik nu die get gegevens weer gebruiken bij de div die geopend word met de popup?
Gewijzigd op 16/12/2010 14:45:36 door Erik waarom
Je kan connectie maken tussen javascript en de server; dat gebeurt via Ajax.
Als je dan toch niet veel weet van javascript, zou je direct met jQuery kunnen beginnen. Geen bezwaar?
Als het goed is doe ik het nu met jQeury. Alleen loop ik vast op het formulier.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<?php
while($rij = mysql_fetch_array($klanten)){
?>
<tr>
<td><?php echo $rij['klant_id'];?></td>
<td><?php echo $rij['klant_naam'];?></td>
<td><?php echo $rij['klant_bedrijfsnaam'];?></td>
<td><?php echo $rij['klant_woonplaats'];?></td>
<td><?php echo $rij['klant_telefoon'];?></td>
<td><?php echo $rij['klant_mob'];?></td>
<td><?php echo $rij['klant_fax'];?></td>
<td align="center"><input type="radio" name="tekst" id="tekst" value="<?php echo $rij['klant_id']; ?>" onClick="show_alert()">
<a href="#" ">edit</a></td>
</tr>
<?php
}
?>
while($rij = mysql_fetch_array($klanten)){
?>
<tr>
<td><?php echo $rij['klant_id'];?></td>
<td><?php echo $rij['klant_naam'];?></td>
<td><?php echo $rij['klant_bedrijfsnaam'];?></td>
<td><?php echo $rij['klant_woonplaats'];?></td>
<td><?php echo $rij['klant_telefoon'];?></td>
<td><?php echo $rij['klant_mob'];?></td>
<td><?php echo $rij['klant_fax'];?></td>
<td align="center"><input type="radio" name="tekst" id="tekst" value="<?php echo $rij['klant_id']; ?>" onClick="show_alert()">
<a href="#" ">edit</a></td>
</tr>
<?php
}
?>
Als ik er nu op klik krijg ik alleen de value van de eerste radio button die door de loop komt.
En daarnaast is het altijd goed om een basis kennis van js te hebben. Als je dat niet hebt kom je ook niet zo ver met jq. Daarnaast lijkt js heel veel op php, dus als je veel van php kent heb je ook een basis kennis js.
@erik, ik zie in jou code geen js? (op die onclick functie na).
En dit is trouwens geen js, maar dat is voor zoiets alleen maar goed. :)
Gewijzigd op 16/12/2010 16:53:22 door Wouter J
Wouter J op 16/12/2010 16:48:53:
@jQuery, dit is niet zomaar iets. Dit is toch wel iets van 40kb. Dit kost redelijk wat laad tijd en als je het voor maar 1 ding gebruikt kan je beter gewoon met js werken. Alles wat met jq kan kan immers ook gewoon met js (aangezien jq js is).
En daarnaast is het altijd goed om een basis kennis van js te hebben. Als je dat niet hebt kom je ook niet zo ver met jq. Daarnaast lijkt js heel veel op php, dus als je veel van php kent heb je ook een basis kennis js.
En daarnaast is het altijd goed om een basis kennis van js te hebben. Als je dat niet hebt kom je ook niet zo ver met jq. Daarnaast lijkt js heel veel op php, dus als je veel van php kent heb je ook een basis kennis js.
Als je hem door google laat hosten, dan wordt die één keer gedownload en verder niet. En dat hoeft niet eens op jou site te zijn. Kan ook op de site van pietsje zijn. Want daar wordt ook gebruik gemaakt van jQuery die bij google staat.
En dan nog, 40 kb, dat is niets. Beetje nonsens verhaal weer.
Gewoon op een van de volgende manieren oplossen:
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
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
<?php
// Query
$query = '....';
// Controleren of query gelukt is
if(!$result = mysql_query($query)) {
echo '....';
}
else {
// Query is gelukt, fetchen
while($row = mysql_fetch_assoc($result) {
echo
'
<tr>
<td> ' .htmlspecialchars($row['klant_id']). ' </td>
<td> ' .htmlspecialchars($row['klant_naam']). ' </td>
<td> ' .htmlspecialchars($row['klant_bedrijfsnaam']). ' </td>
<td> ' .htmlspecialchars($row['klant_woonplaats']). ' </td>
<td> ' .htmlspecialchars($row['klant_telefoon']). ' </td>
<td> ' .htmlspecialchars($row['klant_mob']). ' </td>
<td> ' .htmlspecialchars($row['klant_fax']). ' </td>
<td><input type="radio" name="tekst" value=' .htmlspecialchars($row['klant_id']). '</td>
<td><input type="submit" value="edit"></td>
</tr>
';
}
}
// PHP omdat phphulp geen JS parser heeft
$(function() {
$('#divwaarinformstaat form').each(function(i, e) {
// Mogelijkheid 1
$('input[name=tekst]', e).click(function() {
alert('test..');
// Of andere actie uitvoeren
});
// Mogelijkheid 2
$('#idvandeinputtype', e).click(function() {
// Actie uitvoeren
};
// Formulier submit
$(this).submit(function() {
// False retourneren om refresh van pagina te voorkomen
return false;
});
});
});
// Query
$query = '....';
// Controleren of query gelukt is
if(!$result = mysql_query($query)) {
echo '....';
}
else {
// Query is gelukt, fetchen
while($row = mysql_fetch_assoc($result) {
echo
'
<tr>
<td> ' .htmlspecialchars($row['klant_id']). ' </td>
<td> ' .htmlspecialchars($row['klant_naam']). ' </td>
<td> ' .htmlspecialchars($row['klant_bedrijfsnaam']). ' </td>
<td> ' .htmlspecialchars($row['klant_woonplaats']). ' </td>
<td> ' .htmlspecialchars($row['klant_telefoon']). ' </td>
<td> ' .htmlspecialchars($row['klant_mob']). ' </td>
<td> ' .htmlspecialchars($row['klant_fax']). ' </td>
<td><input type="radio" name="tekst" value=' .htmlspecialchars($row['klant_id']). '</td>
<td><input type="submit" value="edit"></td>
</tr>
';
}
}
// PHP omdat phphulp geen JS parser heeft
$(function() {
$('#divwaarinformstaat form').each(function(i, e) {
// Mogelijkheid 1
$('input[name=tekst]', e).click(function() {
alert('test..');
// Of andere actie uitvoeren
});
// Mogelijkheid 2
$('#idvandeinputtype', e).click(function() {
// Actie uitvoeren
};
// Formulier submit
$(this).submit(function() {
// False retourneren om refresh van pagina te voorkomen
return false;
});
});
});
Gewijzigd op 16/12/2010 17:25:54 door Niels K
Gewijzigd op 16/12/2010 17:24:42 door - SanThe -
- SanThe - op 16/12/2010 17:22:19:
@Niels: Beetje vreemd. Of de where() is overbodig (slechts één record verwacht) óf de $html wordt steeds overschreven.
While?
Helemaal gelijk, te snel getypt. Geef me een sec dan zal ik het veranderen.
Jens V op 16/12/2010 17:23:38:
While?
- SanThe - op 16/12/2010 17:22:19:
@Niels: Beetje vreemd. Of de where() is overbodig (slechts één record verwacht) óf de $html wordt steeds overschreven.
While?
Inderdaad. Vreemde typo, is aangepast.
Gewijzigd op 16/12/2010 17:26:51 door Niels K
Zie eens of je op deze weg zou willen voort doen (Ik ben niet veel beschikbaar de komende dagen, dus van mijn kant zal je even wat geduld moeten hebben.)
Op deze manier is dit trouwens zonder Ajax.
Je zet de gegevens binnen de tabel in een formulier. Dat formulier kan uiteraard ook via Ajax worden doorgestuurd.
Je zal zelf moeten aanvullen, waar nodig.
index.php
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
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
<?php
echo '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//NL" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<link rel="shortcut icon" type="image/gif" href="favicon.ico"/>
<meta http-equiv=content-type content="text/html; charset=UTF-8">
<title> GET_[edit] met javascript meesturen </title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="js.js"></script>
<style>
#popup {margin: 20px; background-color: #bbbbbb; width: 300px;}
#popup form {padding: 5px; margin: 0;}
</style>
</head>
<body>
<table id="user_table" border="1">
<tr>
<th>ID</th>
<th>Naam</th>
<th>bedrijfsnaam</th>
<th>aanpassen</th>
</tr>
<tr class="user_row">
<td>5</td> <td>Steve Jobs</td> <td>Apple</td> <td> <input class="edit" type="radio" name="edit"/> </td>
</tr>
<tr class="user_row">
<td>7</td> <td>Bill Gates</td> <td>Microsoft</td> <td> <input class="edit" type="radio" name="edit"/> </td>
</tr>
<tr class="user_row">
<td>11</td> <td>Dries Buytaert</td> <td>Drupal</td> <td> <input class="edit" type="radio" name="edit"/> </td>
</tr>
</table>
<div id="popup"></div>
</body>
</html>';
?>
echo '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//NL" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<link rel="shortcut icon" type="image/gif" href="favicon.ico"/>
<meta http-equiv=content-type content="text/html; charset=UTF-8">
<title> GET_[edit] met javascript meesturen </title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="js.js"></script>
<style>
#popup {margin: 20px; background-color: #bbbbbb; width: 300px;}
#popup form {padding: 5px; margin: 0;}
</style>
</head>
<body>
<table id="user_table" border="1">
<tr>
<th>ID</th>
<th>Naam</th>
<th>bedrijfsnaam</th>
<th>aanpassen</th>
</tr>
<tr class="user_row">
<td>5</td> <td>Steve Jobs</td> <td>Apple</td> <td> <input class="edit" type="radio" name="edit"/> </td>
</tr>
<tr class="user_row">
<td>7</td> <td>Bill Gates</td> <td>Microsoft</td> <td> <input class="edit" type="radio" name="edit"/> </td>
</tr>
<tr class="user_row">
<td>11</td> <td>Dries Buytaert</td> <td>Drupal</td> <td> <input class="edit" type="radio" name="edit"/> </td>
</tr>
</table>
<div id="popup"></div>
</body>
</html>';
?>
Uiteraard jQuery in je pagina laden (al dan niet via Google)
js.js
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
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
// functie wordt aangeroepen wanneer alle html elementen van de pagia volledig geladen zijn
$(document).ready(function() {
// voeg een onClick event toe aan alle html elementen (hier dus de radiobuttons) met class="edit", binnen een tabel rij (<tr>) met class="user_row"; binnen de tabel met id="user_table"
// bij een onclick van zo'n element wordt de functie edit_row() aangeroepen
// merk op: je kan elementen aanspreken precies zoals css
$('#user_table .user_row .edit').click(edit_row);
});
function edit_row (event) {
var element_targeted = event.target;
// geeft je de index van op welke button is gedrukt. 0 => 1e radio button, 15 => 16e radio button, ...
var index_row = $('#user_table .user_row .edit').index(event.target);
// haal nu de rij zelf
var row_targeted = $('#user_table .user_row')[index_row];
// eerst even de popup leeg maken en een formulier al toevoegen
$('#popup').html(
'<form method="post" action="edit_user.php"></form>'
);
// de children van row_targeted zijn de cellen (<td>) waar we de gegevens gaan halen
$(row_targeted).children().each(function(key, item){
var field = "";
// deze switch moet je zelf maar aanvullen
switch (key) {
case 0: // klant_id
field = '<input name="klant_id" value="'+ $(item).html() +'"/> ID<br/>';
break;
case 1: // klant_naam
field = '<input name="klant_naam" value="'+ $(item).html() +'"/> Naam<br/>';
break;
case 2: // klant_bedrijfsnaam
field = '<input name="klant_bedrijfsnaam" value="'+ $(item).html() +'"/> Bedrijfsnaam<br/>';
break;
}
// voeg field toe aan het formulier
$('#popup form').append(field);
});
// nu nog een submit knop toevoegen
$('#popup form').append('<input type="submit" value="OK"/>');
}
$(document).ready(function() {
// voeg een onClick event toe aan alle html elementen (hier dus de radiobuttons) met class="edit", binnen een tabel rij (<tr>) met class="user_row"; binnen de tabel met id="user_table"
// bij een onclick van zo'n element wordt de functie edit_row() aangeroepen
// merk op: je kan elementen aanspreken precies zoals css
$('#user_table .user_row .edit').click(edit_row);
});
function edit_row (event) {
var element_targeted = event.target;
// geeft je de index van op welke button is gedrukt. 0 => 1e radio button, 15 => 16e radio button, ...
var index_row = $('#user_table .user_row .edit').index(event.target);
// haal nu de rij zelf
var row_targeted = $('#user_table .user_row')[index_row];
// eerst even de popup leeg maken en een formulier al toevoegen
$('#popup').html(
'<form method="post" action="edit_user.php"></form>'
);
// de children van row_targeted zijn de cellen (<td>) waar we de gegevens gaan halen
$(row_targeted).children().each(function(key, item){
var field = "";
// deze switch moet je zelf maar aanvullen
switch (key) {
case 0: // klant_id
field = '<input name="klant_id" value="'+ $(item).html() +'"/> ID<br/>';
break;
case 1: // klant_naam
field = '<input name="klant_naam" value="'+ $(item).html() +'"/> Naam<br/>';
break;
case 2: // klant_bedrijfsnaam
field = '<input name="klant_bedrijfsnaam" value="'+ $(item).html() +'"/> Bedrijfsnaam<br/>';
break;
}
// voeg field toe aan het formulier
$('#popup form').append(field);
});
// nu nog een submit knop toevoegen
$('#popup form').append('<input type="submit" value="OK"/>');
}
edit_user.php
Gewijzigd op 16/12/2010 18:20:31 door Kris Peeters
Waarom php html laten uitspuwen terwijl je in de rest van de pagina geen php meer gebruikt?
- $document.ready(function({}); Is verouderd, je kan het beste $(function(){}); gebruiken.
- Zelf functies genereren is niet de bedoeling als je met JQuery werkt. Daarvoor gaf ik dus een voorbeeld met dat each(function(){}); welke je overigens wel in de functie zelf gebruikt. En als je dan toch met functions wilt werken kan je het misschien best OO gaan javascripten?
Ik hou graag $document.ready kort.
Nog een reden, vaak heb ik 1 functie, zoals edit_row die ik door verschillende triggers wil laten aanroepen.
Een voorbeeld: een nieuwe foto halen in een foto galerij. Zowel een klik op "volgende", een klik op de foto zelf, een muiswiel draai naar onder, een druk op "pijl naar rechts" moeten die functie aanroepen.
Dan is het gemakkelijk als je die functie met zijn naam kan aanspreken.
En nu jij.
Waarom niet?
Gewijzigd op 16/12/2010 18:50:21 door Kris Peeters