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>

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

CODE TO PULL＆amp;从数据库显示数据：

 <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

尝试此命令发送请求并从服务器接收响应，帮助您从db：

中提取数据

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>

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

1 个答案: