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 :)
Related
I wanted to show a select box when edit icon is clicked.With my code, When i click on the edit icon, the select box appears & it fades out in a second.How can i fix this?
<script src="<?php echo base_url() ?>Assets/js/jquery.min.js"></script>
<script src="<?php echo base_url('vendor/select2/select2.min.js'); ?>"></script>
<div id="wrapper">
<div class="col-lg-6">
<div class="form-group">
<label>Material</label>
<input type="text" value="<?php echo $row->ro_material;?>" class="form-control" readonly>
<i class="fas fa-edit"></i>
</div>
</div>
<div class="col-lg-6" id="hidddenMaterial" >
<select name="material" class="form-control">
</select>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">
function materialEditDiv(){
$('#hidddenMaterial').show();
}
$(document).ready(function(){
$('#hidddenMaterial').hide();
});
</script>
EDIT
<script src="<?php echo base_url() ?>Assets/js/jquery.min.js"></script>
<body onload="getData()">
<div class="col-lg-6" id="hidddenMaterial" style="display:none;">
<select name="material" class="form-control">
<option value="">Select</option>
<?php foreach ($material->result() as $rorow) : ?>
<option value="<?php echo $rorow->material_name; ?>"><?php echo $rorow->material_name; ?>
</option>
<?php endforeach; ?>
</select>
</div>
<script type="text/javascript">
function materialEditDiv(){
$('#hidddenMaterial').show();
}
$(document).ready(function(){
/* $('#hidddenMaterial').hide();*/
});
function getData(){
$('#hidddenMaterial').hide(); // tried commenting this line also
}
</script>
https://jsfiddle.net/f4oj76d9/ - code snippet. please have a look on it.
How about a delegated click event?
Html
<i class="fas fa-edit"></i>
Js
$(document).delegate(".toggleMaterial","click",function(){
$('#hidddenMaterial').toggle();
});
Or
$(document).on("click",".toggleMaterial",function(){
$('#hidddenMaterial').toggle();
});
Full Code
<div id="wrapper">
<div class="col-lg-6">
<div class="form-group">
<label>Material</label>
<input type="text" value="<?php echo $row->ro_material;?>" class="form-control" readonly>
<i class="fas fa-edit"></i>
</div>
</div>
<div class="col-lg-6" id="hidddenMaterial" style="display:none">
<select name="material" class="form-control">
</select>
</div>
</div>
<script type="text/javascript">
$(document).on("click",".toggleMaterial",function(){
$('#hidddenMaterial').toggle(); // shows on first click, hides on second
});
</script>
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.
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 -->
I have a dynamic form written with the following code and I am trying to get all the details in the form. How can I go about doing it?
Form
<?php echo form_open_multipart('backendProduct/save_product'); ?>
<div class="row" ng-app="appcolor">
<div id="gc_photos"></div>
</div>
</form>
<script type="text/template" id="imageTemplate">
<div class="row gc_photo" id="gc_photo_{{id}}" style=" border-bottom:1px solid #ddd; padding-bottom:20px; margin-bottom:20px;">
<div class="col-md-2">
<input type="hidden" name="images[{{id}}][filename]" value="{{filename}}"/>
<img class="gc_thumbnail" src="<?php echo base_url('../product_images/{{filename}}');?>" style="padding:5px; border:1px solid #ddd"/>
</div>
<div class="col-md-10">
<div class="row">
<div class="col-md-4">
<div class="form-group">
<input name="images[{{id}}][alt]" value="{{alt}}" class="form-control" placeholder="<?php echo lang('alt_tag');?>"/>
</div>
</div>
<div class="col-md-4">
<div class="checkbox">
<label>
<input type="radio" name="primary_image" value="{{id}}" {{#primary}}checked="checked"{{/primary}}/> <?php echo lang('main_image');?>
</label>
</div>
</div>
<div class="col-md-4">
<a onclick="return remove_image($(this));" rel="{{id}}" class="btn btn-danger pull-right"><i class="icon-times "></i></a>
</div>
</div>
<div class="row">
<div class="col-md-12">
<label><?php echo lang('caption');?></label>
<textarea name="images[{{id}}][caption]" class="form-control" rows="3">{{caption}}</textarea>
</div>
</div>
</div>
</div>
</script>
Function
function addProductImage(val)
{
view = {
id:val.item_id,
filename:val.detail_image_name,
alt:val.alt,
primary:val.primary,
caption:val.caption
}
var output = Mustache.render(imageTemplate, view);
$('#gc_photos').append(output);
$('#gc_photos').sortable('refresh');
photos_sortable();
}
I am trying to generate morris js chart in bootstrap dynamically using AJAX. But I couldn't figure out the issue and why I couldn't do it. Console.log saya "Uncaught SyntaxError: Unexpected token {".
Here is the html code and the javascript where user will click on a button to load ajax content.
$( "#report_form" ).submit(function( event ) {
// Stop form from submitting normally
event.preventDefault();
alert('test');
if($('#cb').is(':checked')){
cb=true;
}else{
cb=false;
}
if($('#cheque').is(':checked')){
cheque=true;
}else{
cheque=false;
}
if($('#tr').is(':checked')){
tr=true;
}else{
tr=false;
}
if($('#especes').is(':checked')){
especes=true;
}else{
especes=false;
}
var start_d=document.getElementById("start_date").value;
var end_d=document.getElementById("end_date").value;
$.post( "reporting/generate_graph", {
cb: cb,
cheque: cheque,
tr: tr,
especes: especes,
start_date: start_d,
end_date: end_d
})
.done(function(chart) {
$( "#chart" ).html(chart);
console.log(chart);
// $.globalEval( "draw_graph();" );
// eval(chart);
});
});
<form id="report_form" action="<?php echo base_url(); ?>reporting/generate_graph" method="post" class="form-horizontal" role="form">
<div class="form-group">
<label for="" class="col-sm-3 control-label">Time Period- from:</label>
<div class="col-sm-3">
<input name="date_start" id="start_date" type="date" name="" id="input" class="form-control" value="" required="required" title="" >
</div>
<label for="" class="col-sm-3 control-label">To:</label>
<div class="col-sm-3">
<input name="date_end" id="end_date" type="date" name="" id="input" class="form-control" value="<?php echo date('Y-m-d'); ?>" required="required" title="">
</div>
</div>
<div class="form-group">
<label for="" class="col-sm-3 control-label">CB:</label>
<div class="col-sm-3">
<div class="checkbox">
<label>
<input name="cb" type="checkbox" value="cb" id="cb">
</label>
</div>
</div>
<label for="" class="col-sm-3 control-label">Cheque:</label>
<div class="col-sm-3">
<div class="checkbox">
<label>
<input name="cheque" type="checkbox" value="cheque" id="cheque">
</label>
</div>
</div>
</div>
<div class="form-group">
<label for="" class="col-sm-3 control-label">TR:</label>
<div class="col-sm-3">
<div class="checkbox">
<label>
<input name="tr" type="checkbox" value="tr" id="tr">
</label>
</div>
</div>
<label for="" class="col-sm-3 control-label">ESPECES:</label>
<div class="col-sm-3">
<div class="checkbox">
<label>
<input name="especes" type="checkbox" value="especes" id="especes">
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-9 col-sm-offset-3">
<button type="submit" class="btn btn-warning" >Genarate</button>
</div>
</div>
</form>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="hidden-xs hidden-sm col-md-2 col-lg-2"></div>
<center>
<!-- The Div for Charts -->
<div class="col-xs-12 col-sm-12 col-md-8 col-lg-8" id="chart">
</div>
</center>
<div class="hidden-xs hidden-sm col-md-2 col-lg-2"></div>
</div>
And here is the html response that the above page will have
<html>
<head></head>
<body >
<div id="chart_div"></div>
<script type="text/javascript">
//function draw_graph() {
alert('graph');
Morris.Bar({
element: 'chart_div',
data: [
<?php foreach ($graph_data as $bars) { ?>
{y:
<?php echo $bars['date']; ?> ,
<?php if($cb==true) { ?>
a: <?php echo $bars['cb']; ?>,
<?php } ?>
<?php if($cheque==true) { ?>
b: <?php echo $bars['cheque']; ?>,
<?php } ?>
<?php if($tr==true) { ?>
c: <?php echo $bars['tr']; ?>,
<?php } ?>
<?php if($especes==true) { ?>
d: <?php echo $bars['especes']; ?>,
<?php } ?>
}
<?php
}
?>
],
xkey: 'y',
ykeys: ['a', 'b','c','d'],
labels: ['CB', 'Cheque','TR','ESPECES'],
resize:true
});
//}
</script>
</body>
</html>
But Nothing happens. I want to generate the above graph. $graph_data is an array of a record set and it is fine. I have var_dump it and it gives a result array without any issue.