打開帶有動態內容的jQuery UI對話框

Question

我有一個關於jQuery UI對話框的問題，並顯示數據庫中的動態內容。

所以我得到了一個web應用程序，我還需要創建一個管理模塊來管理所有用戶和其他信息。 我創建了一個頁面，顯示列表中的所有用戶，在每一行中我也創建了一個編輯按鈕。 我想這樣做，當你按下用戶的編輯按鈕時，會打開一個對話框，在對話框中顯示所有用戶信息和內容。

所以我的問題是，最好的方法是什么？ 我正在考慮制作一個PHP頁面，我執行MySQL查詢並在對話框中顯示，但我相信有更好的方法..

編輯：這是現在頁面的代碼。 我添加了一個用於測試目的的小占位符對話框。

使用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>

Answer 1

不。 聽起來你說得對。

彈出窗口的占位符 - >

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

jQuery ui對話框 - >

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

現在已經創建了默認設置，從php文件發送數據的ajax請求，並更新'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');
    }
  });
});

在PHP頁面中，構造一個要發送回的表單 - >

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

Answer 2

我相信有更好的方法..

不，那就是它。

您需要一個PHP腳本來為您提供用戶的當前詳細信息，並且您需要在其中組合添加新用戶或更新現有用戶。

使用AJAX獲取用戶列表，同樣讓“當前詳細信息”頁面發回包含該信息的JSON blob。

使用客戶端Javascript填充對話框本身。

最難的部分是確保只有授權用戶才能與后端腳本通信。

Answer 3

這就是我要做的事情：

1. 在創建用戶列表時，我知道每個用戶的id（唯一）。 然后為編輯按鈕附加一個事件處理程序，該處理程序將向具有該用戶標識的服務器端腳本發出ajax請求，服務器端腳本將以JSON格式向您發送用戶詳細信息。

2. 有一個模板，例如div，它包含更新用戶詳細信息所需的所有字段（附加了類或ids，因此您將知道如何使用選擇器查找它們）。 當您從服務器接收數據時，您將模板中字段的值設置為服務器響應中的數據，然后打開對話框（現在預先填充了您需要的數據）。

3. 更新用戶詳細信息也可以通過ajax完成，以保持簡單。 （抓取輸入中的值，並向服務器發送請求，同時發送要更改詳細信息的用戶的ID。

所以......祝你好運！

Answer 4

最簡單的方法是使用PHP在數據庫中獲取信息，並填充UI表。 主要缺點是加載時間。 如果您發現頁面加載時間過長，那么您可能需要查看jQuery的.ajax（）