Develop Reference

Jquery on click can't show the data from database

Please help, I have trouble in this Jquery onclick at my form, Why my data from database can't show ? example, I choose a category "jantung", that should be show data dokter where category is jantung, but if I use onchange at the form it's work.
This is a html where I click the category (if click this category will show the modal)
<?php foreach ($poli as $row): ?>
<div class="col-sm-4 col-6 poliklinik-item">
<a class="poliklinik-link" data-toggle="modal" href="#poliklinikModal1" onclick="hmm('<?=$row->id_poli?>')">
<img class="img-fluid" src="<?php echo base_url();?>assets/upload/<?php echo $row->gambar?>" width="200" height="200">
</a>
<div class="poliklinik-caption text-center">
<h4><?php echo $row->nama_poli; ?></h4>
</div>
<br>
<br>
</div>
<?php endforeach; ?>
And This
<script>
function hmm(idnya) {
$(document).ready(function(){
document.getElementById('poli').value=idnya;
var id_poli = idnya;
$('#dokter').prop('disabled',false);
$.ajax({
url: "http://localhost/coba/Test/get_autofill",
type: "POST",
data: {'id_poli' : id_poli},
dataType: 'json',
success: function(data){
$('#dokter').html(data);
},
error: function(){
alert('Masih error');
}
});
});
}
</script>
The Modal
<?php echo form_open('hal_user/add/')?>
<div class="form-group">
<label>Nama</label>
<input type="hidden" name="id_pasien" class="form-control" readonly="" value="<?=$this->session->userdata('id_pasien') ;?>">
<input type="text" name="nama_pasien" class="form-control" readonly="" value="<?php echo $this->session->userdata('nama_pasien') ; ?>">
</div>
<div class="form-group">
<label>Poli</label>
<select name="id_poli" id="poli" class="form-control">
<option value="">Select Poli</option>
<?php foreach ($poli as $p): ?>
<option value="<?php echo $p->id_poli;?>"><?php echo $p->nama_poli;?></option>
<?php endforeach; ?>
</select>
</div>
<div class="form-group">
<label>Dokter</label>
<select name="id_dokter" id="dokter" class="form-control" disabled="">
<option value="">Select Dokter</option>
</select>
</div>
<div class="form-group">
<label>Tanggal</label>
<input type="date" class="form-control" name="tanggal" placeholder="Pilih Tanggal">
</div>
<div class="form-group">
<label>Waktu</label>
<a class="btn btn-primary form-control" data-toggle="collapse" href="#waktuanak" role="button" aria-expanded="false" aria-controls="collapseExample">
Pilih Waktu
</a>
<div class="collapse" id="waktuanak">
<div class="card card-body">
<div class="btn-group-toggle" data-toggle="buttons">
<?php foreach ($waktu as $row) :?>
<label class="btn btn-outline-primary">
<input type="radio" name="id_waktu" autocomplete="off" value="<?php echo $row->id_waktu; ?>"><?php echo $row->waktu;?>
</label>
<?php endforeach;?>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-success btn-wd">Simpan</button>
Batal
</div>
<?php echo form_close(); ?>

Try this
On your view file no need to call function and try to use data-attr and add a class hmm on
<?php foreach ($poli as $row): ?>
<div class="col-sm-4 col-6 poliklinik-item">
<a class="poliklinik-link hmm" data-toggle="modal" href="#poliklinikModal1" data-attr="<?=$row->id_poli?>">
<img class="img-fluid" src="<?php echo base_url();?>assets/upload/<?php echo $row->gambar?>" width="200" height="200">
</a>
<div class="poliklinik-caption text-center">
<h4><?php echo $row->nama_poli; ?></h4>
</div>
</div>
<?php endforeach; ?>
On your jquery try this
<script>
$(document).ready(function(){
$('.hmm').on('click',function(){
var idnya = $(this).attr('data-attr');
$('#poli').val(idnya );
var id_poli = idnya;
$('#dokter').prop('disabled',false);
$.ajax({
url: "http://localhost/coba/Test/get_autofill",
type: "POST",
data: {'id_poli' : id_poli},
dataType: 'json',
success: function(data){
$('#dokter').html(data);
},
error: function(){
alert('Masih error');
}
});
});
}
Updated
$("#poli option[value='" + idnya+ "']").prop("selected", true);

clone existing div with Jquery

i have an issue. How can i clone an existing div with jquery?
[Image]1
<div class="modal-body">
<div class="row">
<div class="col-md-5 text-center">
<b>Número Factura</b>
<input type="number" class="form-control" id="numero"><br/>
</div>
<div class="col-md-2 text-center">
-o-
</div>
<div class="col-md-5 text-center">
<b>Número Remisión</b>
<input type="number" class="form-control" id="remision"><br/>
</div>
<div class="col-md-12">
<b>NIT:</b>
<?php $consulta = mysqli_query($conexion, "SELECT * FROM proveedores");
$resultado = mysqli_fetch_all($consulta, MYSQLI_ASSOC); ?>
<select class="form-control" id="proveedor">
<?php foreach($resultado as $r): ?>
<option value="<?php echo $r['nit']; ?>"><?php echo $r['nombre']; ?></option>
<?php endforeach; ?>
</select><br/>
</div>
<div class="col-md-2">
<input type="number" class="form-control" id="productos" value="1">
</div>
<div class="col-md-2">
<button type="button" class="btn btn-success agregar_producto" name="agregar_producto">
<i class="fas fa-user-plus" style="color: white"></i>
</button>
</div>
</div>
<br/>
<div id="contenido" class="row text-center">
<div class="col-md-4">
<b>Producto</b>
<?php $consulta = mysqli_query($conexion, "SELECT * FROM productos");
$resultado = mysqli_fetch_all($consulta, MYSQLI_ASSOC); ?>
<select class="form-control" id="producto">
<?php foreach($resultado as $r): ?>
<option value="<?php echo $r['id']; ?>"><?php echo $r['descripcion']; ?></option>
<?php endforeach; ?>
</select><br/>
</div>
<div class="col-md-4">
<b>Cantidad</b>
<input type="number" class="form-control" id="cantidad"><br/>
</div>
<div class="col-md-4">
<b>Precio</b>
<input type="number" class="form-control" id="precio"><br/>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success crear" name="crear">Agregar Factura</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Regresar</button>
</div>
I need to clone the div with id="contenido" when someone press the button with class="agregar_producto".
How can i solve it?
[Example]2
Is it possible? i need only an example to solve my problem.
Thx you! <3
EDIT: If a clone this inputs how can i change ids/class to this inputs?

Hi Please check below code:
<html>
<head>
<title>Sample HTML</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body bgcolor=white>
<div id="contenido" class="row text-center">
<div class="col-md-4">
<b>Producto</b>
<select class="form-control" id="producto">
<option value="product1">product1</option>
<option value="product2">product2</option>
<option value="product3">product3</option>
<option value="product4">product4</option>
<option value="product5">product5</option>
<option value="product6">product6</option>
</select><br/>
</div>
<div class="col-md-4">
<b>Cantidad</b>
<input type="number" class="form-control" id="cantidad"><br/>
</div>
<div class="col-md-4">
<b>Precio</b>
<input type="number" class="form-control" id="precio"><br/>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn agregar_producto" name="crear">Agregar Producto</button>
</div>
<script type="text/javascript">
jQuery(document).ready(function ($) {
$(".agregar_producto").on('click', function() {
var $contenido = $("#contenido:last");
var $clone = $contenido.clone();
$clone.find('input').val('');
$contenido.after($clone);
});
});
</script>
</body>
</html>

1.Id need to be unique per element so convert id="contenido" to class="contenido"
2.Use .clone()
$('.agregar_producto').on('click', function(){
var clone = $( ".contenido:first" ).clone();
$(clone).attr('id','changedId'); //change cloned element id attribute
$(clone).find('select').attr('id','changedId1'); //change cloned element children attribute also
$(clone).insertAfter( ".contenido:last" );
});
Note:- add selector(class or id) of the element after which you want to append the clone.
Reference:-
.insertAfter()
Working snippet:-
$('.agregar_producto').on('click', function(){
var clone = $( ".contenido:first" ).clone();
$(clone).attr('id','changedId'); //change cloned element id attribute
$(clone).find('select').attr('id','changedId1'); //change cloned element children attribute also
$(clone).insertAfter( ".contenido:last" );
});
#changedId{
background:yellow;
}
#changedId1{
font-size:20px;
color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="modal-body">
<div class="row">
<div class="col-md-5 text-center">
<b>Número Factura</b>
<input type="number" class="form-control" id="numero"><br/>
</div>
<div class="col-md-2 text-center">
-o-
</div>
<div class="col-md-5 text-center">
<b>Número Remisión</b>
<input type="number" class="form-control" id="remision"><br/>
</div>
<div class="col-md-12">
<b>NIT:</b>
<?php $consulta = mysqli_query($conexion, "SELECT * FROM proveedores");
$resultado = mysqli_fetch_all($consulta, MYSQLI_ASSOC); ?>
<select class="form-control" id="proveedor">
<?php foreach($resultado as $r): ?>
<option value="<?php echo $r['nit']; ?>"><?php echo $r['nombre']; ?></option>
<?php endforeach; ?>
</select><br/>
</div>
<div class="col-md-2">
<input type="number" class="form-control" id="productos" value="1">
</div>
<div class="col-md-2">
<button type="button" class="btn btn-success agregar_producto" name="agregar_producto">
<i class="fas fa-user-plus" style="color: black">Click me to append Clone</i>
</button>
</div>
</div>
<br/>
<div class="contenido" class="row text-center">
<div class="col-md-4">
<b>Producto</b>
<select class="form-control" id="producto">
<option value="1">1</option>
<option value="1">2</option>
<option value="1">3</option>
<option value="1">4</option>
<option value="1">5</option>
</select><br/>
</div>
<div class="col-md-4">
<b>Cantidad</b>
<input type="number" class="form-control" id="cantidad"><br/>
</div>
<div class="col-md-4">
<b>Precio</b>
<input type="number" class="form-control" id="precio"><br/>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success crear" name="crear">Agregar Factura</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Regresar</button>
</div>

.clone() method create a deep copy of the set of matched elements. And .appendTo( ) to append the cloned element.
$('.agregar_producto').on('click', function(){
$( "#contenido" ).clone().appendTo( "body" );
});

$('.agregar_producto').click(function(){
$( "#contenido" ).clone().appendTo( "body" );
});
you can change the above to append the clone under specific elements.

You could easily do the following.
<div id="div1">
<p>
Content in DIV1
</p>
</div>
<div id="tgt">
</div>
jQuery snippet would be as follows.
$(document).ready(function(){
var div1 = $("#div1").clone(); //Clone the element. Assigned to the JS variable div1
div1.attr("id", "div1clone"); //Modify the necessary properties using $(element).attr()
$("#tgt").append(div1); //Append the content to where ever desired
});
This is just a very rusty sample. Check this fiddle out to see this in action.

How to find the closest image src path in jQuery

I want to get the path of the image. I have used the closest and find methods but the log shows undefined. How can I get the path? I am using $(this) keyword because I want to get the path of selected option.
<section class="regular slider">
<?php
foreach($todays_offers as $offer){
?>
<div class="product-container col-xs-12" >
<div class="product-left">
<div class="product-thumb">
<a class="product-img detail" href="#" >
>
<img src='<?php echo base_url("images/$image")?> ' alt="<?php echo $product_name?>" ></a>
</div>
</div>
<div class="half">
<div class="product-right">
<div class="product-brand ">
<?php echo ucfirst($brand); ?>
</div>
<div class="product-name " style="height: 40px;
overflow: hidden;line-height:17px;">
<?php echo $product_name ?>
</div>
<?php
$sql ="SELECT * FROM materials where product_name='".$product_name."' ORDER BY retail_price ASC";
$query1 = $this->db->query($sql);
$rowCount="SELECT * FROM materials where product_name='$product_name'";
$query2 = $this->db->query($rowCount);
if (!empty($query1)) {
if ($query2->num_rows() > 1) {
echo "<select name='netweight' class='netweight' >";
foreach ($query1->result() as $row) {
$net = $row->packing;
$retail = $row->retail_price;
$image = $row->image;
?>
<option id="<?php echo $row->id;?>" value="<?php echo $net;?>" data-retial="<?php echo $retail ?>" data-image='<?php echo base_url("images/$image") ?>''><?php echo $net .' - Rs.'. $retail ?>
</option>
<?php }
echo "</select>";
}
else
{
$net_weight=$offer->packing;
echo "<span>$net_weight</span>";
}
}
?>
<div class="price-box">
<span class="product-price"> <i class="fa fa-inr" aria-hidden="true"></i> <?php echo $our_price ?></span>
<?php
if($our_price<$price)
{ ?>
<span class="product-price-old">MRP <i class="fa fa-inr" aria-hidden="true"></i><?php echo $price ?></span>
<?php } ?>
</div>
<div class="col-sm-6 col-xs-4 pad-0">
<div qa="qty" class="input-group"><span class="input-group-addon">Qty</span>
<input type="text" class="form-control quantity" value="1" maxlength="2" name="quantity" id="<?php echo $product_id ?>"></div>
</div>
<div class="col-sm-6 col-xs-6 pad-0">
<div class="product-button">
<?php if($pro_quantity>0){ ?>
<a class="btn btn-danger add_cart" type="button" title="Add to Cart" name="add_cart" style="font-size:12px;width:100%;" data-netweight="<?php echo $net_weight ?>" data-image="<?php echo $image ?>" data-productname= "<?php echo $product_name ?>" data-price="<?php echo $our_price?>" data-productid="<?php echo $product_id ?>"
>ADD <span class="fa fa-shopping-basket"></span></a>
<?php }else{ echo "<span class='label label-danger'>Out of stock</span>";
}
?>
</div>
</div>
</div>
</div>
</div>
<?php }?>
</section>
</div>
JavaScript
<script>
$(document).ready(function(){
$(".netweight").change(function(){
var net = $("option:selected",this).val();
var id = $("option:selected",this).attr('id');
var retail = $("option:selected",this).attr('data-retial');
var image = $("option:selected",this).attr('data-image');
var path=$(this).closest('section.regular').find('img').attr('src');
console.log(path);
$(this).parent().find('.product-price').text(retail);
$(this).parent().find('a').attr('data-netweight',net);
$(this).parent().find('a').attr('data-price',retail);
$(this).parent().find('a').attr('data-productid',id);
});
</script>
Here is a sample image of select drop-down. If we choose the dro-down netweight, it fires the JavaScript event

.product-thumb is not a parent element(while traversing its ancestors in the DOM tree) of .netweight element. You need to traverse to closest .product-container and then find img tag in it:
$(".netweight").change(function(){
var path=$(this).closest('.product-container').find('img').attr('src');
console.log(path);
});
$(".netweight").change(function(){
var path=$(this).closest('section.regular').find('img').attr('src');
console.log(path);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="block-inner">
<section class="regular slider">
<div class="product-container">
<div class="product-left">
<div class="product-thumb">
<a class="product-img detail"><img src='http://google.com/abc.png '>
</a>
</div>
</div>
</div>
<select name='netweight' class='netweight' >
<option value="1" id="1">1</option>
<option value="2" id="2">2</option>
</select>
<div class="name"><?php echo name?> </div>
<div class="price"><?php echo price?> </div>
<div class="price"><?php echo brand?> </div>
</section>
</div>

Note:- According to closest() :-
Given a jQuery object that represents a set of DOM elements, the .closest() method searches through these elements and their ancestors in the DOM tree and constructs a new jQuery object from the matching elements.
But in your case .product-thumb is not an ancestor element of .netweight element.
You can do it with:-
$(this).closest('.block-inner').find('img').attr('src');
Demo example:-
$(document).ready(function(){
$(".netweight").change(function(){
var path=$(this).closest('.block-inner').find('img').attr('src');
console.log(path);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="block-inner">
<section class="regular slider">
<div class="product-container">
<div class="product-left">
<div class="product-thumb">
<a class="product-img detail"><img src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSxofJbEzZjeldI2K5CsG4HjPH8BDlpWUNwVYhuDXUIAM0IMbQjTg'>
</a>
</div>
</div>
</div>
<select name='netweight' class='netweight' >
<option value="1" id="1">1</option>
<option value="2" id="2">2</option>
</select>
<div class="name"><?php echo name?> </div>
<div class="price"><?php echo price?> </div>
<div class="price"><?php echo brand?> </div>
</section>
</div>

I think you should go back to the parent and then check the img :
$(".netweight").change(function(){
var path=$(this).parent().find('img').attr('src');
console.log(path);
});
Demo:
$(".netweight").change(function(){
var path=$(this).parent().find('img').attr('src');
console.log(path);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="block-inner">
<section class="regular slider">
<div class="product-container">
<div class="product-left">
<div class="product-thumb">
<a class="product-img detail"><img src='WWW.SRCFOUND.COM'>
</a>
</div>
</div>
</div>
<select name='netweight' class='netweight' >
<option value="<?php echo $value ?>" id="OPTION1">OPTION 1</option>
<option value="<?php echo $value ?>" id="OPTION2">OPTION 2</option>
</select>
<div class="name">NAME </div>
<div class="price">PRICE </div>
<div class="price">BRAND </div>
</section>
</div>

just replace following line
var path=$(this).closest('.slider').find('img').attr('src');

You can use something like this :
$(document).ready(function(){
$(".netweight").change(function(){
var path= $(this).next('a').find('img').attr('src');
console.log(path);
});

var path= $('.product-thumb').find('img').attr('src');

Javascript Multiple Div Toggle With a PHP Foreach

I have a foreach that loops through and javascript that toggles days of the week and then a checkbox that toggles the times to - from. Although, if there are two of these the toggle only works for the top one.
I am trying to figure out how to have each toggle separate on each div. I think I need to use parent but im not too sure. Also this is an edit, so I need to have the values displayed on each one if selected.
$('input[id="specificTime"]').on('switchChange.bootstrapSwitch', function(event, state) {
$("#specific_on").toggle();
console.log(state); // true | false
});
$('#MonChecked').click(function() {
$("#MonTimes").toggle(this.checked);
});
$('#TueChecked').click(function() {
$("#TueTimes").toggle(this.checked);
});
$('#WedChecked').click(function() {
$("#WedTimes").toggle(this.checked);
});
$('#ThuChecked').click(function() {
$("#ThuTimes").toggle(this.checked);
});
$('#FriChecked').click(function() {
$("#FriTimes").toggle(this.checked);
});
$('#SatChecked').click(function() {
$("#SatTimes").toggle(this.checked);
});
$('#SunChecked').click(function() {
$("#SunTimes").toggle(this.checked);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group" style="height:30px">
<div class="col-md-3 topPadding">
Specific Times
</div>
<div class="col-md-9" style="height:30px">
<!-- <input type="checkbox" class="make-switch" data-on-label="All Times" data-off-label="Specific Times" value="time" name="specificTime" data-size="small"> -->
<input type="checkbox" class="make-switch" data-on-label="All Times" data-off-label="Specific Times" value="time" id="specificTime" name="specificTime" data-size="small">
</div>
</div>
<hr>
<div id="specific_on" style="display:none">
<div class="row">
<div class="col-md-12">
<?php foreach ($week_days as $day) {
$sday = substr($day,0,3);
?>
<div class="row">
<div class="col-md-1">
<input type="checkbox" class="form-control input-sm" id="<?php echo $sday?>Checked" name="day[]" value="<?php echo $sday?>" data-size="small">
</div>
<div class="col-md-2 topPadding">
<?php echo ucfirst($day) ?>
</div>
<div id="<?php echo $sday?>Times" style="display:none;">
<div class="col-md-2 topPadding2">
<input type="text" class="form-control timepicker form-filter input-sm" id="timepicker" required readonly name="<?php echo $sday?>_time_from" placeholder="From">
</div>
<div class="col-md-2 topPadding2">
<input type="text" class="form-control timepicker form-filter input-sm" id="timepicker" required readonly name="<?php echo $sday?>_time_to" placeholder="To">
</div>
</div>
</div>
<?php } ?>
</div>
</div>
</div> <!-- End of specific_on -->

Datepicker not working in jquery loaded ajax modal window on codeigniter

I am trying to edit my database table using jquery loaded ajax modal. and when i trigger the edit form using ajax, the bootstrap datepicker and selct2 plugin is not working but the same datepicker and select2 plugin is working fine inside the page. and i am also trying to bind the jquery inside the modal but its not working too. here is my code for the ajax loaded popup form.
<?php
$edit_data = $this->db->get_where('staff' , array('staff_id' => $param2) )->result_array();
foreach ( $edit_data as $row):
?>
<div class="row">
<div class="col-md-12">
<div class="panel panel-primary">
<div class="panel-heading">
<div class="panel-title" >
<i class="fa fa-plus-circle"></i>
<?php echo get_phrase('edit_staff');?>
</div>
</div>
<div class="panel-body">
<?php echo form_open(base_url() . 'index.php?admin/staffs/do_update/'.$row['staff_id'] , array('autocomplete'=>'off','target'=>'_top'));?>
<div class="form-group row">
<label class="col-sm-4 control-label"><?php echo get_phrase('staff_name');?></label>
<div class="col-sm-8">
<div class="inputer">
<div class="input-wrapper">
<input type="text" class="form-control" name="program_name" value="<?php echo $row['name']; ?>">
</div>
</div>
</div>
</div>
<div class="form-group row">
<label class="col-sm-4 control-label"><?php echo get_phrase('date_of_birth_');?> <i class="ion-android-calendar"></i></label>
<div class="col-sm-8">
<div class="inputer">
<div class="input-wrapper">
<input type="text" class="form-control bootstrap-daterangepicker-basic" id="datepicker" name="dob" value="<?php echo $row['dob']; ?>">
</div>
</div>
</div>
</div>
<div class="form-group row">
<label class="col-sm-4 control-label"><?php echo get_phrase('address');?> </label>
<div class="col-sm-8">
<div class="inputer">
<div class="input-wrapper">
<input type="text" class="form-control" name="address" value="<?php echo $row['address']; ?> ">
</div>
</div>
</div>
</div><!--.form-group-->
<div class="form-group row">
<label class="col-sm-4 control-label"><?php echo get_phrase('phone');?> </label>
<div class="col-sm-8">
<div class="inputer">
<div class="input-wrapper">
<input type="text" class="form-control" name="phone" value="<?php echo $row['phone']; ?>">
</div>
</div>
</div>
</div><!--.form-group-->
<div class="form-group row">
<label class="col-sm-4 control-label"><?php echo get_phrase('email');?> </label>
<div class="col-sm-8">
<div class="inputer">
<div class="input-wrapper">
<input type="text" class="form-control" name="email" value="<?php echo $row['email']; ?>">
</div>
</div>
</div>
</div><!--.form-group-->
<div class="form-group row">
<label class="col-sm-4 control-label"><?php echo get_phrase('sex');?></label>
<div class="col-sm-8">
<select name="sex" style="width:100%;">
<option value="1" <?php if($row['sex'] == '1')echo 'selected';?>>
<?php echo get_phrase('male');?>
</option>
<option value="2" <?php if($row['sex'] == '2')echo 'selected';?>>
<?php echo get_phrase('female');?>
</option>
</select>
</div>
</div><!--.form-group-->
<div class="form-group row">
<label class="col-sm-4 control-label"><?php echo get_phrase('department');?></label>
<div class="col-sm-8">
<select name="department_id" class="chosen-select">
<?php
$departments = $this->db->get('department')->result_array();
foreach($departments as $row2):
?>
<option value="<?php echo $row2['department_id'];?>"
<?php if($row['department_id'] == $row2['department_id'])echo 'selected';?>>
<?php echo $row2['name'];?>
</option>
<?php
endforeach;
?>
</select>
</div>
</div><!--.form-group-->
<div class="form-group row">
<label class="col-sm-4 control-label"><?php echo get_phrase('designation');?> </label>
<div class="col-sm-8">
<div class="inputer">
<div class="input-wrapper">
<input type="text" class="form-control" name="post" value="<?php echo $row['post']; ?>">
</div>
</div>
</div>
</div><!--.form-group-->
<div class="form-group row">
<label class="col-sm-4 control-label"><?php echo get_phrase('is_teacher');?></label>
<div class="col-sm-8">
<select name="is_teacher" style="width:100%;">
<option value="1" <?php if($row['is_teacher'] == '1')echo 'selected';?>>
<?php echo get_phrase('Yes');?>
</option>
<option value="2" <?php if($row['is_teacher'] == '0')echo 'selected';?>>
<?php echo get_phrase('No');?>
</option>
</select>
</div>
</div><!--.form-group-->
<br/><br/>
<div class="form-group row">
<div class="col-sm-offset-3 col-sm-5">
<button type="submit" class="btn btn-info"><i class="fa fa-pencil"></i> <?php echo get_phrase('edit_staff');?></button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<?php
endforeach;
?>
<script type="text/javascript">
$("#datepicker").FormsPickers.init();
</script>
and below is my code for generating ajax loaded popup ..
<script type="text/javascript">
function showAjaxModal(url)
{
// SHOWING AJAX PRELOADER IMAGE
jQuery('#modal_ajax .modal-body').html('<div style="text-align:center;margin-top:200px;"><img src="assets/images/preloader.gif" /></div>');
// LOADING THE AJAX MODAL
jQuery('#modal_ajax').modal('show', {backdrop: 'true'});
// SHOW AJAX RESPONSE ON REQUEST SUCCESS
$.ajax({
url: url,
success: function(response)
{
jQuery('#modal_ajax .modal-body').html(response);
}
});
}
</script>
<!-- (Ajax Modal)-->
<div class="modal fade" id="modal_ajax">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title"><?php echo $system_name;?></h4>
</div>
<div class="modal-body" style="height:500px; overflow:auto;">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
this is the include_buttom.php ...
<script src="assets/globals/plugins/pnikolov-bootstrap-colorpicker/dist/js/bootstrap-colorpicker.min.js"></script>
<script src="assets/globals/plugins/minicolors/jquery.minicolors.min.js"></script>
<script src="assets/globals/plugins/bootstrap-daterangepicker/daterangepicker.js"></script>
<script src="assets/globals/plugins/clockface/js/clockface.js"></script>
<script src="assets/globals/plugins/chosen/chosen.jquery.min.js"></script>
<script src="assets/globals/plugins/selectize/dist/js/standalone/selectize.min.js"></script>
<script src="assets/globals/plugins/multiselect/js/jquery.multi-select.js"></script>
<script src="assets/globals/plugins/quicksearch/dist/jquery.quicksearch.min.js"></script>
<script src="assets/globals/plugins/bootstrap-select/dist/js/bootstrap-select.min.js"></script>
<script src="assets/globals/plugins/jasny-bootstrap/dist/js/jasny-bootstrap.min.js"></script>
<script src="assets/globals/plugins/jquery-validation/dist/jquery.validate.min.js"></script>
<script src="assets/globals/plugins/twitter-bootstrap-wizard/jquery.bootstrap.wizard.min.js"></script>
<!-- PLUGINS INITIALIZATION AND SETTINGS -->
<script src="assets/globals/scripts/forms-select.js"></script>
<script src="assets/globals/scripts/forms-pickers.js"></script>
<script src="assets/globals/scripts/forms-wizard.js"></script>
<!-- END PLUGINS INITIALIZATION AND SETTINGS -->
<!-- PLEASURE -->
<script src="assets/globals/js/pleasure.js"></script>
<!-- ADMIN 1 -->
<script src="assets/admin1/js/layout.js"></script>
<script>
$(document).ready(function () {
Pleasure.init();
Layout.init();
FormsPickers.init();
FormsSelect.init();
Index.init();
});
</script>

Actually you calling the assest in wrong path. Means you are missing base_url() word in your src URL
Your code should be
<script src="<?php echo base_url() ?>assets/globals/plugins/pn...

this is the include_buttom.php ...
<script src="assets/globals/plugins/pnikolov-bootstrap-colorpicker/dist/js/bootstrap-colorpicker.min.js"></script>
<script src="assets/globals/plugins/minicolors/jquery.minicolors.min.js"></script>
<script src="assets/globals/plugins/bootstrap-daterangepicker/daterangepicker.js"></script>
<script src="assets/globals/plugins/clockface/js/clockface.js"></script>
<script src="assets/globals/plugins/chosen/chosen.jquery.min.js"></script>
<script src="assets/globals/plugins/selectize/dist/js/standalone/selectize.min.js"></script>
<script src="assets/globals/plugins/multiselect/js/jquery.multi-select.js"></script>
<script src="assets/globals/plugins/quicksearch/dist/jquery.quicksearch.min.js"></script>
<script src="assets/globals/plugins/bootstrap-select/dist/js/bootstrap-select.min.js"></script>
<script src="assets/globals/plugins/jasny-bootstrap/dist/js/jasny-bootstrap.min.js"></script>
<script src="assets/globals/plugins/jquery-validation/dist/jquery.validate.min.js"></script>
<script src="assets/globals/plugins/twitter-bootstrap-wizard/jquery.bootstrap.wizard.min.js"></script>
<!-- PLUGINS INITIALIZATION AND SETTINGS -->
<script src="assets/globals/scripts/forms-select.js"></script>
<script src="assets/globals/scripts/forms-pickers.js"></script>
<script src="assets/globals/scripts/forms-wizard.js"></script>
<!-- END PLUGINS INITIALIZATION AND SETTINGS -->
<!-- PLEASURE -->
<script src="assets/globals/js/pleasure.js"></script>
<!-- ADMIN 1 -->
<script src="assets/admin1/js/layout.js"></script>
<script>
$(document).ready(function () {
Pleasure.init();
Layout.init();
FormsPickers.init();
FormsSelect.init();
Index.init();
});
</script>

1.
first of all give exact path to all of your assets as
<script src="<?php echo base_url() ?>assets/globals/plugins/pnikolov-bootstrap-colorpicker/dist/js/bootstrap-colorpicker.min.js"></script>
or
<script src="<?php echo base_url('assets/globals/plugins/pnikolov-bootstrap-colorpicker/dist/js/bootstrap-colorpicker.min.js') ?>"></script>
2.
what following codes do at your include_button page??
FormsPickers.init();
FormsSelect.init();
you are initializing FormsPicker with selector ID which can be multiple since you are looping there. change that selector to class name.
<script type="text/javascript">
$("#datepicker").FormsPickers.init();
</script>
to
<script type="text/javascript">
$(".class_name").FormsPickers.init();
</script>
3.
Best initialize choosen and datepicker by yourself as following in your ajax loaded popup form
<script type="text/javascript">
$(".choosen_class").chosen();
$(".datepicker_class').datepicker();
</script>
by doing these i hope your problem should be solved. If still problem persist, do ask us :)