Jquery UI Dialogbox met dynamische content openen
Ik ben zojuist begonnen met het leren van jQuery en AJAX en zo, maar ik loop een beetje vast..
Ik ben namelijk met een webapplicatie bezig die ook een admin module moet krijgen. In deze module moeten alle geregistreerde gebruikers beheerd kunnen worden. Ik heb dus een tabel gemaakt met alle gebruikers erin, aan de linkerkant heb ik bij elke rij een bewerkknop toegevoegd.
Nu wil ik dat wanneer je op de bewerkknop drukt er een jQuery dialogbox opent met alle huidige gebruikersinformatie en zo in de relevante textboxen. Het lukt me alleen nog niet helemaal om dit voor elkaar te krijgen..
Dit is mijn huidige code.
JavaScript:
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
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
Query(document).ready( function(){
jQuery(".edit-button").click( function(e) {
e.preventDefault();
$.ajax({
url: 'webscripts/admin/ophalen.php',
type: 'GET',
data: 'id',//send some unique piece of data like the ID to retrieve the corresponding user information
success: function(data){
//construct the data however, update the HTML of the popup div
//$('#popup').html(data);
$('#popup').dialog('open');
}
});
});
//variable to reference window
$myWindow = jQuery('#popup');
//instantiate the dialog
$myWindow.dialog({ height: 600,
width: 800,
modal: true,
position: 'center',
autoOpen:false,
title:'Bewerk therapeut',
overlay: { opacity: 0.5, background: 'black'},
buttons: {
'Opslaan': function(){
$.ajax({
url: 'webscripts/admin/opslaan.php',
type: 'POST',
data: $(this).find('form').serialize(),
success: function(){
//alert("gegevens opgeslagen!");
$(this).dialog('close');
}
});
},
'Discard & Exit' : function(){
$(this).dialog('close');
}
}
});
});
jQuery(".edit-button").click( function(e) {
e.preventDefault();
$.ajax({
url: 'webscripts/admin/ophalen.php',
type: 'GET',
data: 'id',//send some unique piece of data like the ID to retrieve the corresponding user information
success: function(data){
//construct the data however, update the HTML of the popup div
//$('#popup').html(data);
$('#popup').dialog('open');
}
});
});
//variable to reference window
$myWindow = jQuery('#popup');
//instantiate the dialog
$myWindow.dialog({ height: 600,
width: 800,
modal: true,
position: 'center',
autoOpen:false,
title:'Bewerk therapeut',
overlay: { opacity: 0.5, background: 'black'},
buttons: {
'Opslaan': function(){
$.ajax({
url: 'webscripts/admin/opslaan.php',
type: 'POST',
data: $(this).find('form').serialize(),
success: function(){
//alert("gegevens opgeslagen!");
$(this).dialog('close');
}
});
},
'Discard & Exit' : function(){
$(this).dialog('close');
}
}
});
});
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
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
<script type="text/javascript" src="javascript/dialogbox.js"> </script>
<?php
include_once 'classes/class.mysql.php';
$db = new Mysql();
$dbUsers = new Mysql();
$db->Query("SELECT * FROM USERS_users ORDER BY username ASC");
$db->MoveFirst();
echo "<table>";
echo "<tr><th> </th><th> </th><th>BSN Nummer</th><th>Gebruikersnaam</th><th>Voornaam</th><th>Achternaam</th></tr>";
while(! $db->EndOfSeek()) {
$row = $db->Row();
$dbUsers->Query("SELECT * FROM Gebruikers WHERE user_idnr = '{$row->user_idnr}'");
$rowUser = $dbUsers->Row();
echo "<tr><td><a class='del-button' href='#'><img src='afbeeldingen/edit-delete.png' /></a></td>
<td><a class='edit-button' href='#'><img src='afbeeldingen/edit.png' /></a></td>
<td>".@$rowUser->bsn_nummer."</td>
<td>".@$row->username."</td>
<td>".@$rowUser->voornaam."</td>
<td>".@$rowUser->achternaam."</td></tr>";
}
echo "</table>";
?>
<div id="popup">
<form method="post" action="">
Voornaam: <input type="text" name="voornaam" class="text ui-widget-content ui-corner-all" />
Achternaam: <input type="text" name="achternaam" class="text ui-widget-content ui-corner-all" />
</form>
</div>
<?php
include_once 'classes/class.mysql.php';
$db = new Mysql();
$dbUsers = new Mysql();
$db->Query("SELECT * FROM USERS_users ORDER BY username ASC");
$db->MoveFirst();
echo "<table>";
echo "<tr><th> </th><th> </th><th>BSN Nummer</th><th>Gebruikersnaam</th><th>Voornaam</th><th>Achternaam</th></tr>";
while(! $db->EndOfSeek()) {
$row = $db->Row();
$dbUsers->Query("SELECT * FROM Gebruikers WHERE user_idnr = '{$row->user_idnr}'");
$rowUser = $dbUsers->Row();
echo "<tr><td><a class='del-button' href='#'><img src='afbeeldingen/edit-delete.png' /></a></td>
<td><a class='edit-button' href='#'><img src='afbeeldingen/edit.png' /></a></td>
<td>".@$rowUser->bsn_nummer."</td>
<td>".@$row->username."</td>
<td>".@$rowUser->voornaam."</td>
<td>".@$rowUser->achternaam."</td></tr>";
}
echo "</table>";
?>
<div id="popup">
<form method="post" action="">
Voornaam: <input type="text" name="voornaam" class="text ui-widget-content ui-corner-all" />
Achternaam: <input type="text" name="achternaam" class="text ui-widget-content ui-corner-all" />
</form>
</div>
Heeft iemand misschien tips met hoe ik het voor elkaar kan krijgen, en wat ik fout doe?
Alvast bedankt!
Gewijzigd op 17/07/2012 23:43:22 door Bart Willemsen
Overigens heb ik het idee dat 'Discard & Exit' geen handige naam is voor de key van een object element. Ik ben niet heel erg vertrouwd met de JQuery UI dialog, dus misschien dat het inderdaad een normaal gebruik is in dat ding, maar volgens mij gaat dat niet helemaal goed.
Code (php)
1
$(this).dialog('close');
Het probleem daar: this is het element dat de event heeft getriggerd; in dit geval dus de "opslaan"-knop; niet de popup.
Je kan lijn 35 vervangen door
Code (php)
1
$myWindow.dialog('close');
En verder best ook doen wat Erwin zegt.
Maak daar 'discard_and_exit' van, of zo.
ik heb iets gelijkaardigs nodig.
Ik neem aan dit je maar 1 dialog box maakt en deze opent voor elke gebruiker?
Hoe bepaal je in de ajax call voor welke gebruiker je de data moet gaan ophalen?
Kan je dit een beetje uitleggen?
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
<html>
<a href="userinfo.php?userid=<?php echo $userid; ?>" class="userinfo">Klik hier!</a>
<script>
$('a.userinfo').click(function() {
$.get($(this).attr('href'), function(content) {
$(content).dialog({
'title' : 'Gebruikersinformatie',
'modal' : true,
'width' : 750,
'height': 500
});
});
});
</script>
<a href="userinfo.php?userid=<?php echo $userid; ?>" class="userinfo">Klik hier!</a>
<script>
$('a.userinfo').click(function() {
$.get($(this).attr('href'), function(content) {
$(content).dialog({
'title' : 'Gebruikersinformatie',
'modal' : true,
'width' : 750,
'height': 500
});
});
});
</script>
Ik ben altijd in de veronderstelling geweest dat je een div moet hebben om daaraan een dialog te koppelen.
Gewijzigd op 14/10/2012 12:11:48 door Ger van Steenderen
