Postingan lainnya
Kelas Premium!
Belajar Javascript untuk website
Gunakan kupon "mulaijs" untuk diskon 75 ribu!
bikin pop up edit di codeigniter
bagaiamana ya gan cara menampilkan form edit menggunakan popup di codeigniter
0
8 Jawaban:
Sama aja gan pake modal boostrap aja, taroh form editnya di dalem modal. jadi kalo di klik form editnya keluar.
0
my view
<a href='<?php echo site_url();?>input_activity/edit/<?php echo $row->activity_detail_id;?>' class="btn btn-outline btn-circle btn-sm purple" data-toggle="modal">i class="fa fa-edit"></i> Edit </a>
sample form popup edit
<div class="modal fade left" id="<?php echo $detail->activity_detail_id;?>">
<div class="modal-dialog"> <div class="modal-content"> <div class="modal-header">
<h3 class="pull-left no-margin">Edit Activity</h3>
<button type="button" class="close" data-dismiss="modal" title="Close"><span class="glyphicon glyphicon-remove"></span></button> </div>
<div class="modal-body">
<form class="form-horizontal" role="form" method="post" action="<?php echo base_url(); ?>input_activity/update">
<div class="form-group">
<label for="name" class="col-sm-3 control-label">Kategori:</label>
<div class="col-sm-9"> <?php $attributes = 'class = "form-control" id = "actype"';
echo form_dropdown('actype',$actype,set_value('actype',$detail[0]->activity_type),$attributes);?>
</div> </div>
my controller
public function edit()
{
$id=$this->uri->segment(3);
$data=array(
'project' => $this->m_inputactivity->get_project(),
'status' => $this->m_inputactivity->get_activity(),
'content' =>'activity/v_updateactivity'
);
$this->load->view('layout/wrapper',$data);
}
saya sudah bikin tapi ke halaman baru gan
0
pakek ajax ajah gan contoh nya nih:
html btn
<a href='' id='btn-edit' class="btn btn-outline btn-circle btn-sm purple" data-id='<?php echo $row->id_profile;?>'>i class="fa fa-edit"></i> Edit </a>
html popup
<div class="modal fade in" id="modal">
<div class="modal-dialog moda-md">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">x</button>
<div class="modal-title"><h5>Edit profile</h5></div>
</div>
<div class="modal-body">
<form id="mb">
<input type="hidden" name="id" value="">
<div class="form-group">
<label>Nama lengkap</label>
<input type="text" name="nama" class="form-control">
</div>
<div class="form-group">
<label>Alamat</label>
<textarea class="form-control" name="alamat"></textarea>
</div>
<div class="form-group clearfix">
<button type="button" data-dismiss="modal">Batal</button>
<button type="button" id='btn' class="btn btn-success pull-right">Simapan</button>
</div>
</form>
</div>
</div>
</div>
</div>
controller
function edit() {
$id = $this->uri->segment(3);
$e = $this->db->where('id_profile', $id)->get('profile')->row();
$kirim['id'] = $e->id_profile;
$kirim['nama'] = $e->nama;
$kirim['alamat'] = $e->alamat;
$this->output
->set_content_type('application/json')
->set_output(json_encode($kirim));
}
file js nya
<script>
$(function () {
$('#btn-edit').click(function (e) {
e.preventDefault();
$('#modal').modal({
backdrop: 'static',
show: true
});
id = $(this).data('id');
// mengambil nilai data-id yang di click
$.ajax({
url: 'profile/edit/' + id,
success: function (data) {
$("input[name='id']").val(data.id);
$("input[name='nama']").val(data.nama);
$("textarea[name='alamat']").val(data.alamat);
}
});
});
}
</script>
semoga membantu gan
0
mohon maaf gan @imamriyadi mau tanya apa html btn sama pop up 1 halaman? trus mau menanyakan tentang controller di bawah ini
function edit() {
$id = $this->uri->segment(3);
$e = $this->db->where('id_profile', $id)->get('profile')->row();
$kirim['id'] = $e->id_profile;
$kirim['nama'] = $e->nama;
$kirim['alamat'] = $e->alamat;
$this->output
->set_content_type('application/json') //application_json nama direktori bukan
->set_output(json_encode($kirim)); //json_encode apa udah standarnya
trus mau nanya js juga
<script>
$(function () {
$('#btn-edit').click(function (e) {
e.preventDefault();
$('#modal').modal({
backdrop: 'static',
show: true
});
id = $(this).data('id');
// mengambil nilai data-id yang di click
$.ajax({
url: 'profile/edit/' + id, //ini url manggil controller bukan?
success: function (data) {
$("input[name='id']").val(data.id);
$("input[name='nama']").val(data.nama);
$("textarea[name='alamat']").val(data.alamat);
}
});
});
}
</script>
0
halo gan @ikhwansr oh iya maaf html btn sama popup itu satu halaman
$this->output
->set_content_type('application/json') //fungsi nya ngeset header file biar browser mengenali jenis data
->set_output(json_encode($kirim)); //json_encode fungsinya untuk merubah data array ke bentuk json
$.ajax({
url: 'profile/edit/' + id, // iya ini fungsinya get data dari controller gan
success: function (data) {
$("input[name='id']").val(data.id);
$("input[name='nama']").val(data.nama);
$("textarea[name='alamat']").val(data.alamat);
}
});
semoga membantu
0
tetep gan saya ngikutin koq ga muncul ya popupnya
my controller
public function edit()
{
$id=$this->uri->segment(3);
$data=array(
'project' => $this->m_inputactivity->get_project(),
'actype' => $this->m_inputactivity->get_actype(),
'detail' => $this->m_inputactivity->per_id($id),
'details'=> $this->m_inputactivity->show_employee($this->session->userdata('nik')),
'status' => $this->m_inputactivity->get_activity(),
);
$this->output
->set_content_type('application/json')
->set_output(json_encode($data));
}
html edit sama pop up
<a href='' id='btn-edit' data-id='<?php echo $row->activity_detail_id;?>'class="btn btn-outline btn-circle btn-sm purple" ><i class="fa fa-edit"></i> Edit </a>
<div class="modal fade left" id="modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3 class="pull-left no-margin">Edit Activity</h3>
<button type="button" class="close" data-dismiss="modal" title="Close"><span class="glyphicon glyphicon-remove"></span>
</button>
</div>
<div class="modal-body">
<form class="form-horizontal" role="form" method="post" action="<?php echo base_url(); ?>input_activity/update">
<div class="form-group">
<label for="name" class="col-sm-3 control-label">Kategori:</label>
<div class="col-sm-9">
<?php $attributes = 'class = "form-control" id = "actype"';
echo form_dropdown('actype',$actype,set_value('actype',$detail[0]->activity_type),$attributes);?>
</div>
</div>
<div class="form-group">
<label for="activity" class="col-sm-3 control-label">Rincian Kegiatan: </label>
<div class="col-sm-9">
<textarea class="form-control" rows="3" name="activity_name" required><?php echo $detail[0]->activity_name;?></textarea>
</div>
</div>
<div class="form-group">
<label for="project" class="col-sm-3 control-label">Peruntukkan:</label>
<div class="col-sm-9">
<?php $attributes = 'class = "form-control" id = "project"';
echo form_dropdown('project',$project,set_value('project',$detail[0]->project_id),$attributes);?>
</div>
</div>
<div class="form-group">
<label for="portion" class="col-sm-3 control-label">Bobot:</label>
<div class="col-sm-4">
<input class="form-control" name="portion" value="<?php echo $detail[0]->portion;?>" required>
<input name="activity_detail_id" type="hidden" id="activity_detail_id" value="<?php echo $detail[0]->activity_detail_id;?>">
</div>
</div>
<div class="form-group">
<div class="col-md-offset-3 col-md-5">
<button type="submit" class="btn green">
<i class="fa fa-save"></i> Update</button>
<button type="button" class="btn default" data-dismiss="modal">Cancel</button>
</div>
</div>
</form>
</div>
<div class="modal-footer">
</div>
</div>
js
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
$(function () {
$('#btn-edit').click(function (e) {
e.preventDefault();
$('#modal').modal({
backdrop: 'static',
show: true
});
id = $(this).data('id');
// mengambil nilai data-id yang di click
$.ajax({
url: 'input_activity/edit/' + id,
success: function (data) {
$("select[name='actype']").val(data.actype);
$("input[name='activity_name']").val(data.activity_name);
$("select[name='project']").val(data.project);
$("textarea[name='portion']").val(data.portion);
}
});
});
});
</script>
0
lihat console nya gan eror nya di mana ?
coba struktur nya gini
<html>
<head>
<meta charset="utf-8">
<title>Pop up </title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
// btn di dalam table nya kan
<a href='' id='btn-edit' data-id='<?php echo $row->activity_detail_id; ?>'class="btn btn-outline btn-circle btn-sm purple" ><i class="fa fa-edit"></i> Edit </a>
//
//ini modal nya kan
<div class="modal fade left" id="modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3 class="pull-left no-margin">Edit Activity</h3>
<button type="button" class="close" data-dismiss="modal" title="Close"><span class="glyphicon glyphicon-remove"></span>
</button>
</div>
<div class="modal-body">
<form class="form-horizontal" role="form" method="post" action="<?php echo base_url(); ?>input_activity/update">
<div class="form-group">
<label for="name" class="col-sm-3 control-label">Kategori:</label>
<div class="col-sm-9">
<?php
$attributes = 'class = "form-control" id = "actype"';
echo form_dropdown('actype', $actype, set_value('actype', $detail[0]->activity_type), $attributes);
?>
</div>
</div>
<div class="form-group">
<label for="activity" class="col-sm-3 control-label">Rincian Kegiatan: </label>
<div class="col-sm-9">
<textarea class="form-control" rows="3" name="activity_name" required><?php echo $detail[0]->activity_name; ?></textarea>
</div>
</div>
<div class="form-group">
<label for="project" class="col-sm-3 control-label">Peruntukkan:</label>
<div class="col-sm-9">
<?php
$attributes = 'class = "form-control" id = "project"';
echo form_dropdown('project', $project, set_value('project', $detail[0]->project_id), $attributes);
?>
</div>
</div>
<div class="form-group">
<label for="portion" class="col-sm-3 control-label">Bobot:</label>
<div class="col-sm-4">
<input class="form-control" name="portion" value="<?php echo $detail[0]->portion; ?>" required>
<input name="activity_detail_id" type="hidden" id="activity_detail_id" value="<?php echo $detail[0]->activity_detail_id; ?>">
</div>
</div>
<div class="form-group">
<div class="col-md-offset-3 col-md-5">
<button type="submit" class="btn green">
<i class="fa fa-save"></i> Update</button>
<button type="button" class="btn default" data-dismiss="modal">Cancel</button>
</div>
</div>
</form>
</div>
<div class="modal-footer">
</div>
</div>
// ini scrip js nya
<script>
$(function () {
$('#btn-edit').click(function (e) {
e.preventDefault();
$('#modal').modal({
backdrop: 'static',
show: true
});
id = $(this).data('id');
// mengambil nilai data-id yang di click
$.ajax({
url: 'input_activity/edit/' + id,
success: function (data) {
$("select[name='actype']").val(data.actype);
$("input[name='activity_name']").val(data.activity_name);
$("select[name='project']").val(data.project);
$("textarea[name='portion']").val(data.portion);
}
});
});
});
</script>
</body>
</html>
0