dynamic dependent menu dropdown using ajax, codeigniter, php
Question
how to display child menu from options in parent menu with php ci menu dependencies,(when admin check Make Sub Menu & choose Menu Parent in combobox, I want the list in the combobox to select the parent sub-menu containing the sub-menus under the parent menu (which have the selected parent menu)). anyone can help me? please...
But I have problem again, when I try to use ajax and go to (url :appearance/getSubMenu2) and the result is error, and if I try to use (url:"") the result is success.
Image include :
I have script & view like this (menu.php) :
<!-- Content Header (Page header) -->
<section class="content-header" data-page="appearance">
<h1>Menu</h1>
</section>
<!-- Main content -->
<section class="content">
<!-- Main row -->
<div class="row">
<div class="col-md-4">
<div class="box box-primary">
<div class="box-header">
<h3 class="box-title"><i class="fa fa-bars"></i> Insert Menu</h3>
</div>
<!-- /.box-header -->
<!-- <link href="<?php echo base_url() ?>assets/css/"> -->
<div class="box-body">
<form action="<?php echo base_url('pengelola/appearance/tambahMenu') ?>" method="post">
<fieldset class="form-group">
<label for="menu-name">Menu Name</label>
<input type="text" class="form-control" id="menu_name" name="menu_name" autofocus>
</fieldset>
<fieldset class="form-group">
<label for="menu-link">Menu Link</label>
<input type="url" class="form-control" id="menu_link" name="menu_link">
</fieldset>
<div class="checkbox">
<label>
<input type="checkbox" id="isChild" name="isChild"> Make Sub Menu
</label>
</div>
<fieldset class="form-group">
<label for="menu-parent">Sub Menu</label>
<select class="form-control" name="menu_parent" data-placeholder="Choose Menu Parent" onchange="" disabled id="menu_parent">
<option></option>
<?php foreach ($menuParent as $key => $value): ?>
<option value="<?php echo $value->menu_id ?>"><?php echo $value->menu_name ?></option>
<?php endforeach; ?>
</select>
</fieldset>
<div class="checkbox">
<label>
<input type="checkbox" id="isChild2" name="isChild2"> Make Sub Menu Level 2
</label>
</div>
<fieldset class="form-group">
<label for="menu-child">Sub Menu Level 2</label>
<select class="form-control" name="menu_child" data-placeholder="Choose Sub Menu Parent" required="menu_parent" disabled id="menu_child">
<!-- <select class="form-control" name="menu_child" id="menu_child" data-placeholder="Pilih Sub Menu Induk" disabled=""> -->
<option></option>
<?php foreach ($menuChild2 as $key => $value): ?>
<option value="<?php echo $value->menu_id ?>"><?php echo $value->menu_name ?></option>
<?php endforeach; ?>
</select>
</fieldset>
<script type="text/javascript">
$(document).ready(function(){
$("#isChild").change(function() {
if(this.checked) {
$('#menu_parent').removeAttr('disabled');
$('#menu_parent').on('change', function(){
var menu_id = $('#menu_parent').val();
if(menu_id == '') {
$('#menu_child').attr('disabled', true);
return;
} else {
$("#isChild2").change(function() {
if(this.checked) {
$('#menu_child').removeAttr('disabled');
} else {
$('#menu_child').val('').trigger('change');
$('#menu_child').attr('disabled', true);
}
});
$.ajax({
url:"<?php echo base_url(); ?>appearance/getSubMenu",
type: "POST",
data: {'menu_id' : menu_id},
dataType: 'json',
success: function(data){
alert('OK');
$('#menu_child').text(data);
},
error: function(){
alert('Error occur...!!');
}
});
}
});
} else {
$('#menu_parent').val('').trigger('change');
$('#menu_parent').attr('disabled', true);
$('#menu_child').attr('disabled', true);
}
});
});
</script>
<button type="submit" class="btn btn-primary btn-sm"><i class="fa fa-save"></i> Simpan</button>
</form>
</div>
<!-- /.box-body -->
</div>
<!-- /.box -->
</div>
<div class="col-md-8">
<div class="box box-success">
<div class="box-header">
<h3 class="box-title"><i class="fa fa-check"></i> Menu Active</h3>
</div>
<!-- /.box-header -->
<div class="box-body">
<!-- <ul class="todo-list"> -->
<ul class="todo-list sortableParent">
<?php $item = 1; foreach ($menuParent as $key => $value): ?>
<li id="item-<?php echo $value->menu_id ?>">
<span class="handle">
<i class="fa fa-ellipsis-v"></i>
<i class="fa fa-ellipsis-v"></i>
</span>
<span class="text"><?php echo $value->menu_name ?></span>
<div class="tools">
<a href="<?php echo base_url('pengelola/appearance/menuForm/'.$value->menu_id) ?>" style="color:blue"><i class="fa fa-pencil"></i></a>
<?php if ($value->menu_hide != 0): ?>
<a href="<?php echo base_url('pengelola/appearance/hideMenu/'.$value->menu_id) ?>" style="color:black"><i class="fa fa-eye"></i></a>
<?php else: ?>
<a href="<?php echo base_url('pengelola/appearance/hideMenu/'.$value->menu_id) ?>" style="color:green"><i class="fa fa-eye-slash"></i></a>
<?php endif; ?>
<?php if ($value->menu_can_delete != 0): ?>
<a href="<?php echo base_url('pengelola/appearance/deleteMenu/'.$value->menu_id) ?>" style="color:red" class="delete"><i class="fa fa-trash-o"></i></a>
<?php endif; ?>
</div>
<?php if ($value->menuChild): ?>
<ul class="todo-list sortableChild">
<?php foreach ($value->menuChild as $k => $v): ?>
<li id="itemChild-<?php echo $value->menu_id ?>-<?php echo $v->menu_id ?>">
<span class="handle">
<i class="fa fa-ellipsis-v"></i>
<i class="fa fa-ellipsis-v"></i>
</span>
<span class="text"><?php echo $v->menu_name ?></span>
<div class="tools">
<a href="<?php echo base_url('pengelola/appearance/menuForm/'.$v->menu_id) ?>" style="color:blue"><i class="fa fa-pencil"></i></a>
<?php if ($v->menu_hide != 0): ?>
<a href="<?php echo base_url('pengelola/appearance/hideMenu/'.$v->menu_id) ?>" style="color:black"><i class="fa fa-eye"></i></a>
<?php else: ?>
<a href="<?php echo base_url('pengelola/appearance/hideMenu/'.$v->menu_id) ?>" style="color:green"><i class="fa fa-eye-slash"></i></a>
<?php endif; ?>
<a href="<?php echo base_url('pengelola/appearance/deleteMenu/'.$v->menu_id) ?>" style="color:red" class="delete"><i class="fa fa-trash-o"></i></a>
</div>
<?php if (($v->menu_id == 69) && ($value->menuChildest)): ?>
<!-- //cek apakah menuChild(sub menu) mempunyai anak lagi (sub menu 2) atau cek apakah menu_id dari menuChild == menu_child dari menuChildest -->
<ul class="todo-list">
<?php foreach ($value->menuChildest as $key => $v): ?>
<!-- untuk setiap menuChildest(yang nilainya ada di sub menu a maka) -->
<li id="itemGrandChild-<?php echo $value->menu_id ?>-<?php echo $v->menu_parent ?>-<?php echo $v->menu_child ?>">
<span class="handle">
<i class="fa fa-ellipsis-v"></i>
<i class="fa fa-ellipsis-v"></i>
</span>
<span class="text"><?php echo $v->menu_child ?></span>
<div class="tools">
<a href="<?php echo base_url('pengelola/appearance/menuForm/'.$v->menu_id) ?>" style="color:blue"><i class="fa fa-pencil"></i></a>
<?php if ($v->menu_hide != 0): ?>
<a href="<?php echo base_url('pengelola/appearance/hideMenu/'.$v->menu_id) ?>" style="color:black"><i class="fa fa-eye"></i></a>
<?php else: ?>
<a href="<?php echo base_url('pengelola/appearance/hideMenu/'.$v->menu_id) ?>" style="color:green"><i class="fa fa-eye-slash"></i></a>
<?php endif; ?>
<a href="<?php echo base_url('pengelola/appearance/deleteMenu/'.$v->menu_id) ?>" style="color:red" class="delete"><i class="fa fa-trash-o"></i></a>
</div>
</li>
<?php endforeach; ?>
</ul>
<?php endif; ?>
</li>
<?php endforeach; ?>
</ul>
<?php endif; ?>
</li>
<?php $item++; endforeach; ?>
</ul>
<br>
<span>
Keterangan : <br>
<table width="100%">
<tr style="color:blue">
<td width="5%"><i class="fa fa-pencil"></i></td>
<td>Untuk Mengubah Menu (Edit)</td>
</tr>
<tr style="color:black">
<td><i class="fa fa-eye"></i></td>
<td>Untuk Menyembunyikan Menu (Hide)</td>
</tr>
<tr style="color:green">
<td><i class="fa fa-eye-slash"></i></td>
<td>Untuk Menampilkan Menu (Show)</td>
</tr>
<tr style="color:red">
<td><i class="fa fa-trash"></i></td>
<td>Untuk Menghapus Menu (Delete)</td>
</tr>
</table>
</span>
</div>
<!-- /.box-body -->
</div>
<!-- /.box -->
</div>
I have code like this in controller (appearance.php) :
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Appearance extends MY_Controller {
public function __construct()
{
parent::__construct();
if (!$this->check_is_login()) { redirect('pintu_masuk'); }
$this->clear_cache();
$this->load->model(array('widget_model', 'menu_model'));
}
function index()
{
$this->header();
$data['menu_child'] = $this->menu_model->getSubMenuQuery();
$this->load->view('appearance', $data);
}
function getSubMenu()
{
$menu_id = $this->input->post('menu_id');
$submenu = $this->menu_model->getSubMenuQuery($menu_id);
if (count($submenu) > 0) {
$pro_select_box = '';
$pro_select_box .= '<option>Select Sub Menu</option>';
foreach ($submenu as $menu_child) {
$pro_select_box .= '<option value ="'.$menu_child->menu_id.'">'.$menu_child->menu_name.'</option>';
}
echo json_encode($pro_select_box);
}
}
I have code like this in (menu_model.php) :
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Menu_model extends MY_Model{
public function __construct()
{
parent::__construct();
$this->setTable('menu');
}
public function getSubMenuQuery($menu_id)
{
$query = $this->db->get_where('menu', array('menu_id'));
return $query->result();
}
}
1 answers
solution1
0 2018-08-01 04:45:14
您到底想要什么，请正确描述步骤并显示html代码，以便我为您提供帮助。
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
dynamic dependent dropdown using ajax codeigniter
Codeigniter With AJAX Dynamic dependent dropdown
Dynamic Dependent Dropdown CodeIgniter ajax not working
Dynamic dependent Dropdown on Codeigniter
ajax codeigniter double dependent dropdown
Dynamic Dependant Dropdown menu with ajax php mysql
How to do a dynamic dropdown using Ajax in Codeigniter
Ajax dependent text field and dropdown menu (Php and Javascript)
Dependent dropdown menu using ajax not refreshing but console is showing data
codeigniter - dependent dropdown with jquery and ajax post
Related Tags