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

首先，请接受我对冗长代码和解释的道歉，因为我是JQuery新手，这里有一个非常具体的案例

我在我的项目的管理面板中为员工、学生和课程创建了一个仪表板。 我有三个部门，分别提取员工记录、学生记录和课程。我已使用以下代码将我的部门拖拽并转弯：

CSS

JAVASCRIPT

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

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

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

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

</script>

$（函数（）{
$（“#可拖动”）.draggable（）；
});
$（“#可拖动”）.corner（）；
$（“#divheader”）.corner（）；
$（函数（）{
$（“#draggable 2”）.draggable（）；
});
$（“#draggable2”）.corner（）；
$（“#divheader2”）.corner（）；
$（函数（）{
$（“#draggable 3”）.draggable（）；
});
$（“#draggable3”）.corner（）；
$（“#divheader3”）.corner（）；

我还为“刷新”和“隐藏”添加了两个链接，分别刷新和隐藏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>

员工
名称
职位名称
开始日期
剩余日期
地位
$（“a”）。单击（函数（）{
$（“#可拖动”）.hide（）；
});

其他两个部门也是如此

但问题是：

1）如何隐藏每个超链接上的单个DIV

2）当单击“刷新”链接而不刷新整个页面或其他DIV时，我想将数据从数据库拉入特定DIV

---

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

尝试从服务器发送请求和接收响应帮助您从数据库中提取数据：

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);
}

功能拉取数据（id）{
$.ajax({
类型：'POST'，
url:'data\u pull/show\u data'，//指向控制器的url，
数据：'id='+id，//如果必须向服务器发送一些数据，请将其发送到此处
成功：功能（响应）{
$（“#show div”）.show（）；
$（“#隐藏div”）.hide（）；
$（“#替换div”）.html（响应）；
}
});
}
//我假设您的控制器名为data_pull，函数名为show_data（）；
代码是
公共函数show_data（）{
$id=$this->input->post（'id'）；
//将您的mysql查询写在$data数组中。将您的div html保存在一个文件中并作为
echo$this->load->view（'place-your-div-html'，$data，true）；
}

从HTML调用这个函数，如下所示

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

谢谢@Naeem。我有两个链接“隐藏”和“刷新”。如何在刷新单击事件上实现这一点？抱歉，我是JqueryNaeem的新手，如果您能确保您的答案具有良好的缩进，您将更容易发现缺少的大括号。单击事件时简单调用。请参阅答案我已经为您编辑了它，但是如何使用AJAX/Jquery从数据库中提取数据？上面的代码使用简单的mysql查询提取数据。

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