如何使用 JQuery 和 Codeigniter/PHP 刷新 3 个数据库驱动的 div？

Question

首先，对于冗长的代码和解释，我深表歉意，因为我是 JQuery 的新手，这里有一个非常具体的案例。

我在项目的管理面板中为员工、学生和课程创建了一个仪表板。 我有三个 DIV，我分别在其中提取员工记录、学生记录和课程。我使用以下代码使我的 div 可拖动和圆角：

CSS

 #draggable { width: 600px;vertical-align: top; }
 #draggable2 { width: 600px; }#draggable3 { width: 600px; }
 #divheader {width:100%px; background-color: #C50C2F; color:#fff;font-weight: 500;  border-color:#C50C2F;}
 #divheader2 {width:100%px; background-color: #C50C2F; color:#fff;font-weight: 500;  border-color:#C50C2F;}
 #divheader3 {width: 700px; float: left; margin: 0 20px 0 0; background-color: #C50C2F; color:#fff;font-weight: 500;  border-color:#C50C2F;}

JAVASCRIPT

 <script>
 $(function() {
  $( "#draggable" ).draggable();
 });

 $("#draggable").corner();
 $("#divheader").corner();

 $(function() {
  $( "#draggable2").draggable();
 });
 $("#draggable2").corner();
 $("#divheader2").corner();

$(function() {
$("#draggable3").draggable();
});
$("#draggable3").corner();
$("#divheader3").corner();

</script>

我还为“刷新”和“隐藏”添加了两个链接，分别刷新和隐藏 div。

从数据库中提取和显示数据的代码：

 <div id="draggable" class="ui-widget-content" style="width:700px; vertical-align: top;" align="center" >
  <div id="divheader">Employees<a href="#" ><img src="/images/admin/icons/minimize.png" title="Hide Employee panel" alt="Hide" height="20px;" width="20px;" align="right">       </a>&nbsp;
  <a href="/secure/admin/" ><img src="/images/admin/icons/refresh.png" title="Refresh Employee Records" alt="Refresh" height="20px;" width="20px;" align="right"></a> 
   </div> 
 <div id="adminHeaders">
<div class="adminOverviewBlockTitle" align="left" >Name</div>
 <div class="adminOverviewBlockTitle">Job Title</div>
<div class="adminOverviewBlockTitle" >Start Date</div>
 <div class="adminOverviewBlockTitle" >Date Left</div>
  <div class="adminOverviewBlockTitle" >Status</div>
   <div class="adminOverviewCells emptyblockimg" ></div>
 </div>
<script>
$( "a" ).click(function() {
 $("#draggable").hide();
});
</script>

<div>

<?

if (isset($sets))
{
 foreach ($sets as $key=>$pos)
  {
?>

 <div class="adminOverviewBlockTitle" align="left" ><?=$pos->name?></div>
 <div class="adminOverviewBlockTitle" ><?=$pos->title?></div>
 <div class="adminOverviewBlockTitle" ><?=$pos->date_entered?></div>
 <div class="adminOverviewBlockTitle" ><?=$pos->date_left?></div>
  <div class="adminOverviewBlockTitle" ><?=$pos->status?></div>
  <div class="adminOverviewBlocksCells emptyblockimg" ><a href="<?=base_url()?>secure/mpt/edit/<?=$pos->id?>" ><img border="0" src="/images/admin/icons/pencil.png" alt="Edit" width="20px;" height="20px;"  alt=""></a></div>
  <div>&nbsp;</div>
 <p>&nbsp;</p>
  <?}
  }
  ?>
  </div>
 </div>

其他 2 个 DIV 也是如此。

但问题是：

1) 如何在每个超链接上隐藏单独的 DIV？

2)我想在点击“刷新”链接而不刷新整个页面或其他DIV时将数据从数据库中提取到特定DIV？

请帮助我。我如何使用 Jquery/Ajax 和 PHP/Codeigniter 来实现这一点。

Answer 1

试试这个发送请求并从服务器接收响应帮助你从数据库中提取数据：

function pull_data(id) {
    $.ajax({
        type:'POST',
        url:'<?=base_url()?>data_pull/show_data', //url to controller,
        data:'id='+id,//If you have to send some data to server then send it here
        success:function(response){
            $("#show-div").show();
            $("#hide-div").hide();
                            $("#replace-div").html(response);
        }
    });
}
  //I assume that your controller name is data_pull and your function name is show_data();
    code for that is
public function show_data(){
    $id=$this->input->post('id');
    //write your mysql query over here in $data array.Save your div html in a file and load it as

    echo $this->load->view('place-your-div-html',$data,true);
}

从 HTML 中调用这个函数为

 <a href="javascript:void(0)" onCLick="pull_data(id)">Refresh</a>