PHPhulp.nl
35k+ leden Over PHPhulp Offerte opdracht Contact
B

Jquery UI Dialogbox met dynamische content openen

Door Bart Willemsen op 17-07-2012 23:40 gewijzigd op 17-07-2012 23:43
3.797 views
Hallo allemaal,

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 javascript]
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');
}
}
});
});
[/code]

PHP:

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


Heeft iemand misschien tips met hoe ik het voor elkaar kan krijgen, en wat ik fout doe?

Alvast bedankt!
E
Erwin H
17-07-2012 23:49
Misschien handig om erbij te vermelden wat er dan fout gaat, waar er niet gebeurt wat je wil.

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.
Kris Peeters
18-07-2012 10:59
Op lijn 35 staat: 

$(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 

$myWindow.dialog('close');


En verder best ook doen wat Erwin zegt.
Maak daar 'discard_and_exit' van, of zo.
R
Roel Goens
13-10-2012 21:39
Hallo,

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?
kees Schepers
14-10-2012 11:04
Je reageert op een oud topic Misschien beter om in het vervolg een nieuwe aan te maken. Maar om je toch te helpen. Je kunt toch de gebruikersid in de URL opnemen?


<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>
Ger van Steenderen
14-10-2012 12:11 gewijzigd op 14-10-2012 12:11
Werkt dit zo ook Kees?
Ik ben altijd in de veronderstelling geweest dat je een div moet hebben om daaraan een dialog te koppelen.
Jaron T
14-10-2012 14:01
nee ger, dat is als je je content niet dynamisch inlaad

Reageren

Inloggen om te reageren