2

まず第一に、私は JQuery を初めて使用し、非常に特殊なケースがあるため、コードと説明が長くなってしまったことをお詫びします。

プロジェクトの管理パネルに、従業員、学生、およびコース用のダッシュボードを作成しました。私は、従業員の記録、学生の記録、およびコースを個別に取得している3つの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;}

ジャバスクリプト

 <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」の 2 つのリンクを追加して、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 を使用してこれを達成するにはどうすればよいですか。

4

1 に答える 1

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>
于 2013-10-30T09:28:25.963 に答える