Jquery UI Dialogbox met dynamische content openen

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Java developer met testervaring

Java developer met testervaring Functieomschrijving "De drempel tussen de burger en de Belastingdienst zo laag mogelijk houden: dat is de belangrijke taak van ons team. Dit doen we door het burgerportaal Mijn Belastingdienst continu te verbeteren." René, Java-specialist bij de Belastingdienst. De keten Interactie is een samenwerkingsverband van alle dienstonderdelen binnen de Belastingdienst. Samen zorgen we dat het contact met burgers en bedrijven goed kan plaatsvinden. Onze belangrijkste opgave? Zoveel mogelijk digitaliseren. Dat doen we binnen het onderdeel Informatievoorzieningen (IV), de ICT-organisatie van de Belastingdienst. Denk bij de producten die IV-Interactie ontwikkelt en onderhoudt aan portalen, formulieren en authenticatie- en

Bekijk vacature »

Bart Willemsen

Bart Willemsen

17/07/2012 23:40:55
Quote Anchor link
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 (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
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');
            }
        }
    });
});


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


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

PHP hulp

22/10/2021 15:28:08
 
Erwin H

Erwin H

17/07/2012 23:49:27
Quote Anchor link
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

Kris Peeters

18/07/2012 10:59:19
Quote Anchor link
Op lijn 35 staat:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
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)
PHP script in nieuw venster Selecteer het PHP script
1
$myWindow.dialog('close');


En verder best ook doen wat Erwin zegt.
Maak daar 'discard_and_exit' van, of zo.
 
Roel Goens

Roel Goens

13/10/2012 21:39:40
Quote Anchor link
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

kees Schepers

14/10/2012 11:04:34
Quote Anchor link
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?

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

Ger van Steenderen

14/10/2012 12:11:12
Quote Anchor link
Werkt dit zo ook Kees?
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
 
Jaron T

Jaron T

14/10/2012 14:01:53
Quote Anchor link
nee ger, dat is als je je content niet dynamisch inlaad
 
Ger van Steenderen
Tutorial mod

Ger van Steenderen

14/10/2012 14:39:05
Quote Anchor link
Aha, ik wist niet dat het zo ook kon.
 



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.