如何顯示一個編輯表單作爲一個jQuery彈出模式，當點擊一個鏈接

Question

我在數據庫中顯示信息在視圖文件中，並且有一個選項來編輯，但它的功能尚未。我想要這樣的編輯選項 - 當任何用戶點擊編輯鏈接時（我使用圖像作爲編輯按鈕），jquery模式將彈出並顯示一個簡單的編輯表單（並且在後臺它將使基於點擊值向數據庫查詢信息）。

請您幫助我如何從數據庫中獲取數據，並在編輯鏈接中單擊時顯示編輯表單作爲jQuery彈出模式？ （請在視圖文件下面來看看編輯鏈接）

至少一個例子將高度讚賞:)提前:)

由於這是我的視圖文件：

<article id="dashboard"> 

      <?php if(count($records) > 0) { ?> 
      <h1> Batch Name: <?php echo "$batchname";?> </h1> 
      <table id="table1" class="gtable sortable"> 
      <thead> 
        <tr> 
         <th>S.N</th> 
         <th>Student ID</th> 
         <th>Exam Date</th> 
         <th>Exam Type</th> 
         <th>Subject</th> 
         <th>Total Mark</th> 
         <th>Highest Mark</th> 
         <th>Obtained Mark</th> 
         <th>GPA</th> 
         <th>Grade</th> 
         <th>Status</th> 
         <th>Edit/Delete</th> 
        </tr> 
      </thead> 
      <tbody> 
      <?php $i = $this->uri->segment(3) + 0; foreach ($records as $row){ $i++; ?> 


        <tr> 
         <td><?php echo $i; ?>.</td> 

         <td><a href="<?php echo base_url(); ?>viewbatch/get/<?php echo $row['studentid']; ?>"><?php echo $row['studentid'];?></a></td> 
         <td><?php echo $row['examdate'];?></td> 
         <td><?php echo $row['examtype'];?></td> 

         <td><?php echo $row['subject'];?></td> 
         <td><?php echo $row['totalmark'];?></td> 

         <td><?php echo $row['highestmark'];?></td> 
         <td><?php echo $row['obtainedmark'];?></td> 

         <td><?php echo $row['gradepoint'];?></td> 
         <td><?php echo $row['grade'];?></td> 
         <td><?php echo $row['status'];?></td> 

         <td> <a href="<?php echo base_url(); ?>updatebatch/get/<?php echo $row['id']; ?>" title="Edit"><img src="<?php echo base_url(); ?>support/images/icons/edit.png" alt="Edit" /></a> 
          <a href="#" title="Delete"><img src="<?php echo base_url(); ?>support/images/icons/cross.png" alt="Delete" /></a> 
          </td> 
        </tr> 
      <?php } ?> 

      </tbody> 
      </table> 
      <?php } else { echo "No Record Found";} ?> 
      <div class="tablefooter clearfix"> 

         <div class="pagination"> 
         <?php echo $this->pagination->create_links(); ?> 
         </div> 
      </div> 



     </article> 

編輯::

謝謝你mmmshuddup的幫助。實際上，我的目標是顯示一個jquery彈出式模式窗體，用戶可以通過它更新數據。目前在視圖文件中，我有一個我從數據庫中檢索到的學生信息列表。爲了讓用戶更新學生信息，我有一個編輯選項，但目前它不處於工作模式。到目前爲止，您所回覆的內容已經足夠好了，但請您告訴我如何以模態形式顯示數據。您不必提及控制器部分的任何內容，可以說我將「id」發佈到我的控制器，然後查詢數據庫並以常規方式發回數據以查看文件。現在我只想知道如何向用戶展示「更新」表單（已經填寫相關信息給用戶）。

Answer 1

首先，您要爲您的編輯定位標記添加class和/或id屬性。

事情是這樣的：

<a href="<?= base_url(); ?>updatebatch/get/<?= $row['id']; ?>" title="Edit" 
    id="edit-<?= $row['id']; ?>" class="edit-link"> 
    <img src="<?= base_url(); ?>support/images/icons/edit.png" alt="Edit" /></a> 

接下來，創建一個用於加載模式的內容div：

<div id="modal-dialog"></div> 

現在，您就可以設置您的jQuery的模態的東西和onclick編輯鏈接的事件監聽器：

$('#modal-dialog').dialog({ 
    title: 'Edit Your Item', 
    autoOpen: false, 
    show: 'blind', 
    width: 800, 
    height: 600, 
    modal: true 
}); 

var baseUrl = "<?= base_url(); ?>updatebatch/get/"; 

$('.edit-link').click(function(e) { 
    var id = this.id.split('-')[1]; 
    $('#dialog') 
     .load(baseUrl + id) // or something like this 
     .dialog('open'); 
}); 

再次，這只是你如何可以做到這一點的一個例子。還有其他方式來動態加載內容。而且我不知道你想你的PHP腳本做..什麼

編輯：

每個操作的要求，在這裏是如何使用PHP 在填寫領域的例子（沒有的JavaScript ）：

<!-- assume $row is the query result array of data --> 
<input type="hidden" name="id" value="<?php echo $row['id'];" /> 
<input type="text" name="name" id="name" value="<?php echo $row['name']; ?>" /> 
<textarea name="content" id="content" rows="8" cols="50"> 
    <?php echo $row['content']; ?> 
</textarea>