[英]Pull information from table to modal to edit
好的我有一個表來設置顯示從數據庫中提取的信息。
在這個表的末尾,我有一個更新按鈕。 我正在使用引導程序,當您單擊此按鈕時,您打開一個帶有表單的模式,我希望將某行中的值傳遞到表單中,以便用戶可以編輯信息。
該表是使用以下方法生成的:
<?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'> </td>
<td class='check-box' width='10px'> </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,但我不知道從哪里開始。
我就是這樣做的....給一個標簽一個“更新”類,並在標簽中填充一些數據屬性,如下所示。
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完全未經測試的代碼,只是在這里給你一個想法....我相信你可以從這里弄明白。 :)
在這里你可以使用greybox或fancybox,你可以在url上傳遞你的價值。 然后,您將能夠在被調用頁面中檢索這些值。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.