Meload View CodeIgniter Menggunakan Metode jQuery load()

Published · Updated

Diketahui:

Saya mempunyai form list grade seperti terlihat pada gambar dibawah ini:

Tab Grade itu mempunyai id=’grade’.

Contoh Kasus:

Bagaimana caranya agar pada saat saya mengklik tombol “+ Add New Grade” maka pada tab grade isinya akan menampilkan form new grade  seperti gambar dibawah ini:

Jawaban:

Pembuatan Form New Grade

Saya membuat form new_grade.php dalam folder application/views/setting dengan isi seperti kode dibawah ini:

<form name=”grade”> 

<table width=”343″ border=”1″>

<tr>

<td width=”50″>Grade Code: </td>    <td align=”left” width=”192″><label>      <input type=”text” name=”gra_code” />    </label></td>

</tr>

<tr>

<td>Grade Description:</td>    <td><input type=”text” name=”gra_desc” /></td>  </tr>  <tr>    <td>Grade Sequence:</td>    <td><input type=”text” name=”gra_sequence” /></td>

</tr>

<tr>

<td>Grade Status:</td>    <td><input type=”radio” name=”gra_status” value=”1″ />Active <input type=”radio” name=”gra_status” value=”0″ />Inactive</td>

</tr>

<tr>

<td></td>    <td align=”right”><label>      <input type=”button”  value=”Save” />  <input type=”button”  value=”Cancel” />    </label></td>

</tr>

</table>

</form>

Pembuatan Fungsi dalam Controller

Pada Controller, saya buatkan fungsi untuk memanggil form new_grade seperti kode dibawah ini:

class Setting extends CI_Controller{ 

function open_form_new_grade(){

$this->load->view(‘setting/new_grade’);

}

}

Perubahan pada Tombol

<script type=”text/javascript”> 

function open_form_add_grade(){

$(‘#grade’).load(“<?php echo site_url(‘setting/open_form_new_grade’);?>”)

}

</script>

<input type=”button” value=”+ Add New Grade” onClick=”open_form_add_grade()”>

Keterangan:

  • $(‘#grade’).load(“<?php echo site_url(‘setting/open_form_new_grade’);?>”), Kode ini berarti file view new_grade.php akan diletakkan dalam elemen yang mempunyai id=’grade’.

 

Jika tutorial ini bermanfaat silahkan katakan ‘Terima Kasih Fahmi Basya Kartapura‘.

You may also like...

2 Responses

  1. belajar says:
    September 10, 2011 at 8:49 am

    ‘Terima Kasih Fahmi Basya Kartapura’,

    thks bro atas toritorialnya ane masih newbe banget dg CI
    & thks jg ane dah bisa copy tutorial mas bro,
    ane nga publish…,

    tp dg begini (no klik kanan) banyak yg nga koment…

  2. annas abdullah says:
    May 31, 2019 at 8:01 am

    ‘terima kasih FAhmi Basya Kartapura’

Leave a Reply

Your email address will not be published. Required fields are marked *