5

jQuery UI ダイアログ ボックスとデータベースからの動的コンテンツの表示について質問があります。

そのため、すべてのユーザーとその他の情報を管理するための管理モジュールも作成する必要がある Web アプリケーションを取得しました。リスト内のすべてのユーザーを表示するページを作成し、すべての行に編集ボタンも作成しました。ユーザーの編集ボタンを押すと、ダイアログ ボックスが開き、ダイアログ ボックス内のすべてのユーザー情報と内容が表示されるようにしたかったのです。

だから私の質問は、これを行うための最良の方法は何ですか? MySQLクエリを実行してダイアログボックスに表示するPHPページを作成することを考えていましたが、もっと良い方法があると確信しています..

編集: 現在のページのコードは次のとおりです。テスト目的で使用した小さなプレースホルダー ダイアログ ボックスを追加しました。

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

4 に答える 4

6

いいえ。あなたはそれを正しく持っているように聞こえます。

ポップアップのプレースホルダー ->

<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
  }    
?>
于 2012-07-17T14:57:48.653 に答える
1

これが私がすることです：

  1. ユーザーのリストを作成するとき、各ユーザーの ID (一意) を知っています。次に、そのユーザー ID を持つサーバー側スクリプトに ajax リクエストを行う編集ボタンのイベント ハンドラーをアタッチします。サーバー側スクリプトはユーザーの詳細を JSON 形式で送信します。

  2. ユーザーの詳細を更新するために必要なすべてのフィールドを含む div などのテンプレートを用意します (クラスまたは ID が添付されているため、セレクターでそれらを見つける方法がわかります)。サーバーからデータを受信したら、テンプレートのフィールドの値をサーバーの応答のデータに設定し、ダイアログを開きます (必要なデータが事前に入力されています)。

  3. ユーザーの詳細を更新することも ajax によって行うことができ、物事を単純に保つことができます。(入力の値を取得し、サーバーにリクエストを送信し、詳細を変更するユーザーの ID も送信します。

とても幸運！

于 2012-07-17T14:55:46.020 に答える
1

もっと良い方法があると確信しています..

いいえ、それだけです。

ユーザーの現在の詳細を提供する PHP スクリプトと、新しいユーザーの追加または既存のユーザーの更新を組み合わせる必要がある 2 番目のスクリプトが必要です。

AJAX を使用してユーザーのリストを取得し、同様に「現在の詳細」ページから情報を含む JSON BLOB を送り返します。

クライアント側の Javascript を使用して、ダイアログ自体に入力します。

最も難しいのは、許可されたユーザーのみがバックエンド スクリプトと通信できるようにすることです。

于 2012-07-17T14:40:08.693 に答える
0

最も簡単な方法は、PHP を使用してデータベース内の情報を取得し、そのように UI テーブルに入力することです。主な欠点はロード時間です。ページの読み込みに時間がかかりすぎる場合は、jQuery の.ajax()を調べてください。

于 2012-07-17T14:40:35.933 に答える