Opening jQuery UI Dialog box with dynamic content

javascript, jquery, jquery-ui, mysql, php

Solution

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

Problem

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

Original source