Opening jQuery UI Dialog box with dynamic content

Question

I have a question about jQuery UI Dialog boxes and showing dynamic content from a database.

So I got a webapplication where I also need to make a admin module to manage all users and other information. I created a page that shows all users in a list, in every row I also made an edit button. I wanted to make it so that when you press on a users' edit button, a dialog box opens and shows all the user information and stuff in the dialog box.

So my question is, what is the best way to do this? I was thinking about making a PHP page where I execute the MySQL Query and show that in the dialog box, but I am sure there are better ways..

EDIT: Here is the code for the page as it is right now. I added a small placeholder dialogbox that I used for testing purposes.

Javascript:

script type="text/javascript"> 
    jQuery(document).ready( function(){       
        jQuery(".edit-button").click( showDialog );

            //variable to reference window
            $myWindow = jQuery('#myDiv');

            //instantiate the dialog
            $myWindow.dialog({ height: 600,
                    width: 800,
                    modal: true,
                    position: 'center',
                    autoOpen:false,
                    title:'Bewerk therapeut',
                    overlay: { opacity: 0.5, background: 'black'}
                    });
            }

    );
//function to show dialog   
var showDialog = function() {
    $myWindow.show(); 
    //open the dialog
    $myWindow.dialog("open");
    }

var closeDialog = function() {
    $myWindow.dialog("close");
}

PHP:

<?php
//LEFT OUTER JOIN Vragen ON Vragen.bsn_nummer = Gebruikers.bsn_nummer
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="myDiv" style="display: none">
<p>Gebruiker bewerken</p>
</div>

Solution 1

Nope. Sounds like you've got it right.

placeholder for the popup ->

<div id="popup"></div>

jQuery ui dialog ->

$('#popup').dialog({
  autoOpen: 'false',
  modal: 'true',
  minHeight: '300px',
  minWidth: '300px',
  buttons: {
    'Save Changes': function(){
      $.ajax({
        url: 'path/to/my/page.ext',
        type: 'POST',
        data: $(this).find('form').serialize(),
        success: function(data){
          //some logic to show that the data was updated
          //then close the window
          $(this).dialog('close');
        }
      });
    },
    'Discard & Exit' : function(){
      $(this).dialog('close');
    }
  }
});

Now that the default settings have been created, send a ajax request for the data from the php file, and update the content in the 'popup' div.

$('.edit').click(function(e){
  e.preventDefault();
  $.ajax({
    url: 'path/to/my/page.ext',
    type: 'GET',
    data: //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');
    }
  });
});

in the PHP page, construct a form to be sent back ->

<?php
  if(isset($_GET['id'])){
    //build the query, do your mysql stuff
    $query = mysql_query(sprintf("SELECT * FROM sometable WHERE id = %d", $_GET['id']));
    //construct constant objects outside of the array
?>
  <form>
  <?php
    while($row = mysql_fetch_array($query)){
  ?>
    <tr>
      <td>
        <input type="text" name="<?php echo $row['id']?>" value="<?php echo $row['name'] ?>" />
      </td>
    </tr>   
  <?php 
    }
  ?>
  </form>
<?php
  }    
?>

Solution 2

I am sure there are better ways..

No, that's about it.

You'll need a PHP script to give you the user's current details, and a second in which you should combine adding a new user, or updating an existing user.

Use AJAX to obtain the list of users, and likewise have the "current detail" page send back an JSON blob containing the information.

Use the client side Javascript to populate the dialog itself.

The hardest part is making sure that only authorised users can talk to the backend scripts.

Solution 3

Here's what I would do:

1. when creating the list of users, I know the id (unique) for each user. Then attach an event handler for the edit button that will make an ajax request to a server side script with that user id, the server side script will send you user details in JSON format.

2. have a template, for example a div, that has all the fields you need for updating user details (with classes attached or ids so you will know how to find them with selectors). when you receive data from the server you set the value of the fields in your template to the data in the response of the server then open the dialog (which is pre populated now with the data you need).

3. updating user details can also be done by ajax, to keep things simple. (grabbing the values in the inputs, and send a request to the server, sending also the id of the user you want to change details.

So... good luck!