Ouverture de jQuery UI boîte de Dialogue de contenu dynamique

Nope. On dirait que vous avez vu juste.

espace réservé pour le popup ->

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

jQuery dialogue de l'interface utilisateur ->

$('#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');
    }
  }
});

Maintenant que les paramètres par défaut ont été créés, envoyer une requête ajax pour les données à partir du fichier php, et de mettre à jour le contenu de la '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');
    }
  });
});

dans la page PHP, la construction d'un formulaire à renvoyer ->

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

OriginalL'auteur Ohgodwhy

Voici ce que je ferais:

1. lors de la création de la liste des utilisateurs, je sais que l'id (unique) pour chaque utilisateur. Ensuite associer un gestionnaire d'événement pour le bouton modifier qui va faire une requête ajax vers un serveur de script côté avec cet id d'utilisateur, le serveur de script côté permettra de vous envoyer des détails de l'utilisateur au format JSON.

2. disposez d'un modèle, par exemple un div, qui a tous les champs dont vous avez besoin pour mettre à jour les détails de l'utilisateur (avec des classes attaché ou les id de sorte que vous savez comment les trouver avec les sélecteurs). lorsque vous recevez des données à partir du serveur vous définissez la valeur des champs dans votre modèle de données dans la réponse du serveur, puis ouvrez la boîte de dialogue (qui est pré maintenant rempli avec les données dont vous avez besoin).

3. mise à jour des détails de l'utilisateur peut aussi le faire en ajax, pour garder les choses simples. (saisissant les valeurs dans les entrées, et d'envoyer une demande au serveur, l'envoi également l'id de l'utilisateur dont vous souhaitez modifier les détails.

Alors... bonne chance!

OriginalL'auteur Angel