Geek asks and answers

Opening the jQuery UI dialog with dynamic content

I have a question about the jQuery UI dialog box and showing dynamic content from a database.

So, I have a web application where I also need to create an administration module to manage all users and other information. I created a page that shows all the users in the list, on each line I also made an edit button. I wanted to make it so that when you click the user edit button, a dialog box opens and displays all the user information and so on in the dialog box.

So my question is: what is the best way to do this? I was thinking of creating a PHP page where I execute a MySQL query and will show what is in the dialog box, but I'm sure there are better ways.

EDIT: Here is the page code as it is now. I added a small placeholder dialog box 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>
+5
source share
4 answers

Nope. Everything seems to be in order.

placeholder for 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 an ajax request for the data from the php file and update the contents in the pop pop 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');
    }
  });
});

on the PHP page, create a form to submit 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
  }    
?>
+6
source

I am sure there are better ways.

No, that's about it.

You will need a PHP script to provide you with current user data, as well as a second one in which you must combine adding a new user or updating an existing user.

AJAX , " " JSON, .

Javascript .

- , .

+1

:

  • () . , ajax script , script JSON.

  • , div, , ( , , ). , , ( , ).

  • Updating user information can also be done using ajax to keep things simple. (capturing the values ​​on the inputs and sending a request to the server, sending also the identifier of the user you want to change).

So ... good luck!

+1
source

The easiest way is to get the information in the database using PHP and populate the user interface tables. The main drawback will be the boot time. If you find that the page has been loading too long, then you might want to check out jQuery . Ajax ()

0
source

More articles:


All Articles