0

データベースから取得した情報を表示するように設定されたテーブルがあります。

この表の最後に更新ボタンがあります。私はブートストラップを使用しています。このボタンをクリックすると、フォームでモーダルが開きます。特定の行の値をフォームに渡して、ユーザーが情報を編集できるようにしたいと考えています。

テーブルはこれで生成されます：

<?php
                $con=mysqli_connect("50.63.106.181","TheGreenPandaWeb","MacBook1!","TheGreenPandaWeb");
                // Check connection
                if (mysqli_connect_errno())
                  {
                  echo "Failed to connect to MySQL: " . mysqli_connect_error();
                  }

                $query = "SELECT * FROM affiliate_tasks WHERE username = '$_SESSION[username]'";

                if( isset($_POST['sort-selection']) && $_POST['sort-selection'] != 'all' ) 
                {
                    $query .= " AND status = '". $_POST['sort-selection']."';" ;
                }

                $result = mysqli_query($con, $query);

                echo "<table class='table table-message table-hover'>
                <tr class='heading'>
                <td class='cell-title'>Tasks</td> 
                <td class='cell-status hidden-phone hidden-tablet'>Status</td> 
                <td class='cell-time align-right'>Due Date</td>
                <td class='check-box' width='10px'>&nbsp;</td>
                <td class='check-box' width='10px'>&nbsp;</td>
                </tr>";

                while($row = mysqli_fetch_array($result))
                  {
                  echo "<tr class='task " . ($row['resolved'] == 1 ? 'resolved' : '') . "' id='task-$row[task_id]'>";
                  echo "<td class='cell-ttle'>" . $row['task_name'] . "</td>";
                  echo "<td class='cell-status hidden-phone hidden-tablet " . ($row['status'] == Done ? 'text-success' : '') ." " . ($row['status'] == Overdue ? 'text-warning' : '') ."'>"  . $row['status'] . "</td>";
                  echo "<td class='cell-time align-right'>" . $row['due_date'] . "</td>";
                  echo "<td class='check-box' width='10px'>" . "<a class='icon-arrow-up' href='#updateTaskModal' role='button' data-toggle='modal'></a>" . "</td>";
                  echo "<td class='check-box' width='10px'>" . "<a class='icon-remove' href='#deleteTaskModal' role='button' data-toggle='modal'></a>" . "</td>";
                  echo "</tr>";
                  }
                echo "</table>";

                mysqli_close($con);
            ?>

フォームは次のようになります。

<form class="form-horizontal" name="new_task" action="scripts/form_scripts/new_task.php" method="post"> 
            <div class="control-group">
                <div class="controls">
                    <input type="text" name="username" id="username" class="hide" value="<?php session_start(); echo $_SESSION[username]; ?>">
                </div>
            </div>
            <div class="control-group">
                <label class="control-label" for="task_name">Task Name</label>
                <div class="controls">
                    <input type="text" name="task_name" id="task_name" placeholder="Something with description.">
                </div>
            </div>
            <div class="control-group">
                <label class="control-label" for="status">Task Status</label>
                <div class="controls">
                    <select id="status" name="status">
                        <option value="Pending">Pending</option>
                        <option value="In Progress">In Progress</option>
                        <option value="Done">Done</option>
                    </select>
                </div>
            </div>
            <div class="control-group">
                <label class="control-label" for="due_date">Due Date</label>
                <div class="controls">
                    <input type="date" name="due_date" id="due_date" placeholder="mm/dd/yyyy">
                </div>
            </div>

JavaScriptが必要になると思いますが、どこから始めればよいかわかりません。

4

2 に答える 2

2

これが私が行う方法です.... タグに「更新」のクラスを与え、以下のようにタグにいくつかのデータ属性を設定します。

echo "<a class='icon-arrow-up update' href='#updateTaskModal' data-status='".$row['status']."'  data-name='".$row['task_name']."' data-date='".$row['due_date']."' role='button' data-toggle='modal'></a>";

次に、Jquery は次のようになります。

$(document).ready(function(){

 $('a.update').click(function(){
   var name = $(this).data('name');
   var date = $(this).data('date');
   var status = $(this).data('status');    

   $('#task_name').val(name);
   $('#status').val(status);
   $('#due_date').val(date);
    });

 });

理想的には、このコードをモーダル コールバックに統合します。頭の中で Twitter のブートストラップにあまり慣れていないので、その部分を理解させてください。

PS完全にテストされていないコードです。ここでアイデアを提供するだけです....ここから理解できると確信しています。:)

于 2013-06-08T07:20:09.030 に答える
0

ここでは、URL に値を渡すことができる graybox または fancybox を使用できます。そして、呼び出されたページ内でそれらの値を取得できるようになります。

于 2013-06-08T07:39:25.150 に答える